Twitter Bootstrap macht das Erstellen komplexer Seitenlayouts zum Kinderspiel. Geben Sie ein paar Zeilen HTML ein, wenden Sie einige Klassen an und Sie haben ein anständig aussehendes, minimal funktionierendes Modell.
Wäre es nicht schön, wenn es noch einfacher wäre? Was wäre, wenn Bootstrap eine visuelle Schnittstelle hätte? Was wäre, wenn Sie Bootstrap-Seiten erstellen könnten, indem Sie Elemente auf eine leere Leinwand ziehen und ablegen? Mit Easel.io können Sie genau das tun. Mal sehen, wie es funktioniert.
Fertig machen
Sobald Sie den schnellen Anmeldeprozess durchlaufen haben, werden Sie zu Ihrem Dashboard weitergeleitet. Hier sollten Sie eine mitgelieferte Demo-Seite und einige Steuerelemente zum Erstellen eines neuen Dokuments sehen.
Ich wünsche mir sofort, dass es einige grundlegende Seitenlayouts gibt, die als Bausteine verwendet werden könnten. Es wäre großartig, in Zukunft hier eine Reihe von Starter-Vorlagen zu sehen.
Stattdessen klicken Sie auf "Dokument erstellen". Taste, um loszulegen. Benennen Sie hier Ihr Dokument und legen Sie die Berechtigungen mithilfe der Dropdown-Liste fest.
UI & Tools
Die Benutzeroberfläche hier ist unglaublich einfach. Es gibt nur eine große leere Leinwand und eine Reihe von Werkzeugen, die auf der linken Seite herunterlaufen.
Das standardmäßige Bootstrap-Toolset ist in acht reduzierbare Kategorien unterteilt: Typografie, Tabelle, Formulare, Schaltflächen, Navigation, Container, Miniaturbilder und verschiedene Elemente.
Es gibt auch ein grundlegendes, auf Symbolen basierendes Werkzeugset mit einigen typischen Werkzeugen auf der rechten Seite: Verschieben, Rechteck, Typ, Zoom und Verschieben. Neben den Bootstrap-Elementen gibt es im Easel Pack einige benutzerdefinierte Elemente. und eine Reihe kostenloser Icons, die Sie in Ihrem Design verwenden können.
Arbeitsablauf
Staffelei hat einen ziemlich offenen Workflow. Ziehen Sie einfach Elemente auf die Leinwand und mischen Sie sie herum. Wenn Sie jedoch möchten, dass Ihr resultierender Code richtig strukturiert ist und das Endergebnis ansprechend ist, müssen Sie einen viel spezifischeren Prozess verfolgen.
Es gibt nicht viel Dokumentation, von der ich reden kann, also bin ich zwar ein bisschen unklar, was die Details angeht, aber so denke ich, dass es funktioniert.
Beginnen Sie mit einem Container
Als erstes sollten Sie einen Container herausziehen. Dieser befindet sich in den "Containern". Abschnitt Ihrer Werkzeuge.
Stellen Sie sich dies in Bezug auf Ihr typisches Rastersystem vor. Container enthalten Zeilen mit Inhalten, die jeweils eine bestimmte Anzahl von Spalten enthalten.
Wenn Sie einen Container oder ein anderes Element ausgewählt haben, werden auf der rechten Seite des Bildschirms verschiedene Optionen angezeigt, mit denen Sie die Größe, Rundheit usw. der ausgewählten Elemente anpassen können.
Diese Optionen sind kontextsensitiv und ändern sich je nach Auswahl.
Jetzt eine Reihe
Jetzt, da Sie einen Container haben, mit dem Sie arbeiten können, ist es Zeit, in eine Reihe zu ziehen. Stellen Sie sicher, dass Sie es in den Container ziehen, den Sie im vorherigen Schritt erstellt haben. Sie sollten im Hover ein Highlight sehen, mit dem Sie erkennen können, wo Sie die Reihe platzieren.
Standardmäßig wird eine Zeile mit zwei Spalten angezeigt. Wenn Sie klicken und ziehen, um die Grenzen eines Bereichs zu ändern, passt sich der andere automatisch an den restlichen Platz an.
Wenn Sie mehr Spalten wünschen, wählen Sie einfach eine und die Schaltfläche "Duplizieren" oben im rechten Menü. Sie können die Spaltenbreite auch manuell über das Dropdown-Menü unter "Benutzerdefiniert" festlegen. Werkzeugmenü.
Elemente ziehen und ablegen
Nun, da Sie einige Spalten zum Arbeiten haben, können Sie sie mit verschiedenen Elementen füllen. Hier habe ich die drei Boxen verwendet, die ich eingerichtet habe, um einen schönen Text zu erstellen.
Wiederholen Sie diesen Vorgang von hier aus immer und immer wieder. Sie können den vorhandenen Container verwenden, ziehen Sie einfach neue Zeilen heraus und fügen Sie den Zeilen weitere Elemente hinzu. Hier habe ich eine weitere Textzeile und einige Miniaturbilder eingefügt.
Anpassung
Sobald Sie einige Elemente auf der Seite gefunden haben, können Sie diese anpassen und anpassen. Wählen Sie zum Beispiel Text aus und ändern Sie die Schrift. Easel bietet großartige Webtyp-Optionen von Typekit und Google.
Andere Goodies
Bevor wir zusammenarbeiten, sollten wir ein paar weitere Funktionen hervorheben. Wie bereits erwähnt, gibt es in der App eine Reihe großartiger Symbole:
Es gibt auch einige sehr hilfreiche Raster-Ansichtsoptionen, mit denen Sie wirklich genau sehen können, was mit dem Bootstrap-Layout los ist. Sie können Ihr Raster in diesem Menü anzeigen und anpassen.
Da wir einem responsiven Workflow gefolgt sind, können wir die Symbole des Ansichtsfensters mithilfe der Symbole oben rechts ändern und sehen, wie unser Design auf verschiedene Szenarien reagiert.
Wenn Sie mit Ihrem Entwurf fertig sind, können Sie den Code und die Ressourcen herunterladen, die verwendet wurden. Diese Funktion ist bei weitem der beste Teil der App, da Ihre Prototypen zu etwas werden, das Sie tatsächlich verwenden können.
Der hier erzeugte Code ist schön und sauber. sehr nahe an dem, was Sie erhalten, wenn Sie mit Bootstrap von Hand arbeiten.
Wie ist das?
Trotz der Tatsache, dass ich ständig über WYSIWIGs spreche, freute ich mich sehr auf Easel. Ich habe jetzt schon eine Weile darüber nachgedacht, dass das saubere Codesystem von Bootstrap leicht zu automatisieren ist, und ich habe gehofft, dass jemand auf einen interaktiven Bootstrap-Seitenersteller springt.
Sobald ich Staffelei in die Hände bekam, waren meine Gedanken gemischt. Untersuchen wir einige spezifische Bereiche und wie es ihnen ergangen ist.
Konzept: Großartig
Die Leute hinter Easel haben einen guten Start. Sie verfügen über ein hervorragendes Konzept und eine solide Grundlage, um etwas zu bauen, das für Bootstrap-Benutzer (von denen es viele gibt) wirklich nützlich ist.
Anweisungen: Fast nicht vorhanden
Derzeit kann ich anscheinend echte Dokumentation für die Verwendung von Easel finden (vielleicht ist es da und ich sehe es einfach nicht!). Zugegeben, es ist die Art von App, mit der Sie einfach loslegen möchten, aber es gibt hier immer noch genügend Komplexität, so dass eine ausführliche Dokumentation erforderlich ist.
Es gibt zumindest einige hilfreiche QuickInfos, wenn Sie mit der Maus über verschiedene Elemente der Benutzeroberfläche fahren. Diese sind nett, reichen aber alleine nicht aus.
Layout-Workflow: Ein bisschen Wonky
Das Erstellen einer Seite mit Easel ist sehr einfach. Ziehen Sie einfach Elemente auf die Seite. Wenn Sie anfangen, dies zu tun, haben Sie leider den Verdacht, dass Sie etwas falsch machen.
Dann entdecken Sie die? Container? Abschnitt und Sie erkennen, dass Sie Container und Zeilen in Ihrem Layout verwenden sollten. Wenn dies wirklich der erste Schritt ist, warum stehen diese dann nicht ganz oben auf der Werkzeugliste?
Sobald Sie feststellen, dass Sie Zeilen erstellen sollten, ist das Unterteilen dieser Zeilen in etwas anderes als zwei Spalten ziemlich schwierig. Ich habe lange gebraucht, um herauszufinden, wie es geht, und ich bin immer noch nicht sicher, ob ich es richtig mache.
Ich würde völlig überdenken, wie das Layout funktioniert. Platzieren Sie zuerst die Layout-Werkzeuge oben im Werkzeugsatz. Wenn eine Zeile in einem Container abgelegt wird, zeigen Sie als Nächstes einige Steuerelemente, mit denen ich die Anzahl der Spalten in diesem Container leicht erhöhen und verringern sowie die Spaltenbreite anpassen kann.
Gib mir auch ein paar vorgefertigte Layout-Module zum Herausziehen. Sie könnten ungefähr so aussehen:
Mit diesen Funktionen können Sie gängige Layoutstrukturen schnell und ohne großen Aufwand ziehen und erstellen, wodurch der derzeitige Frust des Layouts erheblich reduziert wird.
Platzhalterbilder: Ein Durcheinander
Es muss auf jeden Fall ein besseres System für Platzhalterbilder vorhanden sein. Wenn ich ein einzelnes Platzhalterbild ziehe, scheint es mir nicht möglich zu sein, die Größe effektiv zu ändern. Diese Funktion ist sehr fehlerhaft und springt zwischen einem winzigen oder einem ungewöhnlich großen Bild. Geben Sie mir eine unkomplizierte Möglichkeit, ein Platzhalter-Image zu platzieren, das zwölf Spalten umfasst und 300 Pixel groß ist, einer, der vier Spalten breit und 100 Pixel hoch ist, usw.
Darüber hinaus ist das Vorschaubildraster auch nicht leicht zu bearbeiten. Ich denke, es sollte einfache Steuerelemente geben, mit denen ich die Anzahl der Bilder festlegen kann, die in jeder Zeile und Spalte verwendet werden sollen, aber es gibt kein solches System. Stattdessen erhalten Sie standardmäßig drei Bilder und müssen einen unbeholfenen und unbeholfenen Prozess durchlaufen, um Ihren Weg in die von Ihnen gewünschte Galerie zu kopieren.
Preisgestaltung: Großartig
Ich mag die Preisstrategie wirklich sehr. Ich hatte absolut erwartet, dass sie den Download von Codes für kostenlose Benutzer ähnlich wie Gridset blockieren würden, aber ich stellte fest, dass ich fast alles tun konnte, was ich mit dem kostenlosen Plan wollte.
Die Prämienpläne verlangen im Wesentlichen eine erhöhte Zusammenarbeit und eine unbegrenzte Anzahl von Seiten, was definitiv fair ist. Wenn Sie legitimerweise einen Weg finden, Websites schneller mit diesem Produkt auszuteilen, sind 15 Dollar pro Monat ein Kinderspiel.
Probieren Sie es aus!
Ich war ziemlich hart auf Easel in meinem Feedback, aber das liegt nur daran, dass ich hier eine Unmenge von Potenzial sehe und weiß, dass dies von etwas hübschem Spiel ausgehen kann. zu einem? unverzichtbaren Werkzeug? mit einiger zeit und aufmerksamkeit.
In seiner jetzigen Form ist Easel ein gutes statisches Mockup-Tool, aber für reaktionsschnelle Prototypen habe ich ständig darüber nachgedacht, wie ich jedes Bootstrap-Layout, das ich viel schneller möchte, aufrüsten kann. Im Idealfall sollte das Tool Zeit sparen.
Trotzdem empfehle ich dringend, dass Sie Easel für sich selbst ausprobieren. Probieren Sie es aus und hinterlassen Sie einen Kommentar, damit wir wissen, was Sie denken.