14. Juli 2009

Review: WireframeSketcher

Labels:

Conclusion: WireframeSketcher is a really good and very useful Eclipse plugin. For $75 you get lot's of interesting features - everything integrated in the OS-agnostic and long standing integrated development environment called Eclipse. (my other reviews)

WireframeSketcher is a tool that helps you quickly create screen mockups and UI prototypes right from within Eclipse IDE . Mockups are designed by laying out on canvas widgets such as labels, text fields, trees and tables. Many more widgets and screen parts are available from the provided library. Designed screen mockups have intentionally a bare look so that they cannot be mistaken for a real application.

Heute möchte ich das Prototyping Tool WireframeSketcher reviewen und euch, liebe THS-Leser, mal vorstellen.

Das Prototyping Tool WireframeSketcher welches von dem rumänischen Entwickler Petru Severin programmiert und ständig weiterentwickelt wird, ist ein Eclipse Plug-in zum erstellen von Wireframes und kurzen Storyboards.

Wer mit Eclipse überhaupt nichts anfangen kann, kann hier schon aufhören zu lesen. Ich selber benutze nicht Eclipse sondern Aptana um Front-end zu programmieren (Aptana ist sozusagen die junge, hübsche Schwester von Eclipse). Als Informationsarchitekt schreibe ich beruflich kein Code, aber in meiner Freizeit hacke ich dann manchmal CSS, HTML, JavaScript und so weiter... und da ist es eben gut, wenn man einen Editor zur Hand hat dem man vertraut. Ich möchte fast sagen, dem Coder sein Editor ist wie dem Förster sein Hund.

Na ja, und eben in diesen Editor lässt sich ein Tool zum Wireframes ankritzeln als Plug-in integrieren - eben der WireframeSketcher. Der Prozess ist einfach und hier genau beschrieben. Ich habe allerdings für die Installation die neue Aptana Andretti (Alpha 2) Variante benutzt, da es dort noch einfacher geht.

Der WireframeSketcher kann dann bei gestartetem Eclipse/Aptana ganz einfach geöffnet werden...

Hat man dann ein erstes Projekt angelegt und den ersten Screen erstellt, kann es so aussehen:

WireframeSketcher ist so aufgebaut, wie man es von vielen anderen Tools auch kennt. In der Mitte gibt es eine Bühne auf der man eben seine Sachen anlegen und entwerfen kann (der Begriff Bühne oder Stage ist noch ein Überbleibsel aus meiner Zeit als Flash-Entwickler. Ich weiß garnicht wie der Bereich in Eclipse oder WireframeSketcher wirklich heißt) und links und rechts gibt es zusätzliche Anzeigen und Strukurelemente, wie beispielsweise die Widget-Library die in diesem Fall rechts ist.

Aus der Widget-Bibliothek kann man sich, wie bei allen Prototyping Tools üblich, einzelne Elemente herausziehen und damit seine Wireframes bauen. Das geht wirklich sehr einfach und reibungslos.

Einzelne Screens werden als jeweils eigenständige Seiten angelegt. Man kann aber aus dem Strukturbaum (Project Explorer) bereits fertige Layouts mit copy & paste relativ leicht duplizieren. Appropos copy and paste das geht auch mit den sonstigen Wireframe-Elementen sehr gut, auch von Screen zu Screen. Die Dateien im Project Explorer sind alphabetisch sortiert und lassen sich leider weder umsortieren noch einrücken. Was ich wirklich gut finde, ist dass das jeweils aktive Screen, also das Wireframe, auf der Bühne auch immer mit der Auswahl im Project Explorer übereinstimmt. Manche anderen Tools aktualisieren die Auswahl im Project Explorer nicht, wenn man auf der Bühne von einem Tab zum anderen wechselt, was oft für Verwirrung sorgen kann.

Ausgewählte, aktive Elemene lassen sich mit Pfeiltasten auf dem Keyboard bewegen. Eine präzise Positionierung ist über das eintragen von X- und Y-Werten in ein entsprechendes Feld möglich. Alle Objekte lassen sich auch als Gruppe (Markierung mit gedrückter Shift-Taste) bewegen und sperren.

Hält mein ein Element längere Zeit geklickt, werden Hilfslinien eingeblendet die einen bei der Positionierung unterstützen. Ein sehr schönes Feature.

Elemente lassen sich wirklich sehr einfach bearbeiten und beschriften. Bei Tabs oder Link-Bars (horizontales Navigationselement) lässt sich jeweils ein einzelner Eintrag sehr einfach als "gerade aktiv" auswählen. Die Linienstärke eines Objekts lässt sich nicht beeinflussen, die Farbe und Transparenz in den meisten Fällen schon.

Oft lassen sich Details nicht bearbeiten, beispielsweise der Zustand eines aktiven Navigationselementes. Aber das ist überhaupt nicht schlimm, denn es handelt sich ja schließlich um ein Wireframe und nicht um das fertige Design. Wenn man einen bestimmten Detailgrad aber wirklich benötigt, muss man auf die vielen Elemente aus der Bibliothek verzichten und kann sich in vielen Fällen die gewünschten Objekte selbst zusammenbauen. Das geht natürlich auch.

Was mir wirklich auch sehr gut gefällt, ist die sogenannte Outline. Eine Outline ist eine Auflistung oder Gliederung irgendeiner Art. Im Fall von WireframeSketcher werden alle Elemente aufgelistet, die in dem jeweils gerade aktiven Wireframe verwendet werden. Das hilft gerade bei komplexen Wireframes sehr die Übersicht zu behalten und Elemente auszuwählen die vielleicht aufgrund der umfangreichen Wireframe-Struktur von vielen anderen Elementen verdeckt oder überlagert sind. Diese Funktion habe ich schon bei vielen anderen Programmen vermisst. Über die Outline lassen sich alle Objekte natürlich auch markieren. Mehrere Elemente kann man bei gedrückter Shift-Taste oder Steuerungs-Taste selektieren.

Noch nicht ganz perfekt, ist die Tatsache, dass gruppierte Elemente aus der Outline verschwinden und nur noch als ein Gruppeneintrag erscheinen (der sich auch nicht aufklappen lässt, wie man es erwarten würde). Seltsamer Weise lassen sich auch über die Outline ausgewählte Elemente nicht gruppieren, wenn man die selben Elemente gruppieren möchte, muss man sie eben über die Bühne selektieren.

Die jeweiligen Wireframes lassen sich einfach als Bilder (PNG) abspeichern. Hierbei wird alles angezeigt, was auch zuvor in dem Wireframe (auf der Bühne) zu sehen war (Kommentare können beispielsweise optional nicht ausgeblendet werden). Das Bild ist immer automatisch so breit, dass alle Elemente ins Bild passen. Solange man keine gekaufte Version der Software hat, erscheint der Schriftzug "Evaluation" quer über das Bild.

In der Storyboard Ansicht lassen sich verschiedene Wireframes in eine Anzeige importieren und halbwegs übersichtlich anzeigen. Durch Doppelklick auf das Wireframe "Thumbnail" komt man zu dem eigentlichne Wireframe. Als Bild speichern, lässt sich das Storyboard meines Wissens nach leider nicht.

Fazit

Ja, der WireframeSketcher ist noch nicht ganz perfekt, aber dennoch wirklich kein schlechtes Tool. Die Arbeit geht einem damit gut von der Hand. Der WireframeSketcher hakt nicht oder stockt oder so. Die Software macht einen wirklich soliden Eindruck und wie mir Petru sagte, wird sie ständig weiterentwickelt.

Wenn hinter einem Projekt wenige, oder wie hier nur eine, Personen dahinter stecken, finde ich das immer sehr charmant. Man hat dann eigentlich immer einen direkten Draht zu den Machern hinter der Anwendung um Wünsche, Vorschläge oder Fragen ganz direkt und unkompliziert zu stellen.

Es gibt ein paar nette Funktionen, wie zum Beispiel Quick Add, worüber sich Elemente leichter (als über den Weg über die Bibliothek) einfügen lassen. Man kann einzelne Wireframes als Master Screens in wiederum anderen Wireframes verwenden. So dass, gespeicherte Änderungen in dem Master Wireframe dann auch automatisch in einem anderen Wireframe sichtbar werden.

Es gibt einen Präsentationsmodus in dem man über Pfeiltasten oder die SPACE Taste durch die einzelnen Screens klicken kann (oder über Rechtsklick Screens direkt anteuern kann). Diese werden dann nicht skaliert im Vollbildmodus auf weißem Hintergrund dargestellt.

Besonders positiv: Da es sich um ein Eclipse Plug-in handelt, ist die Versionierung auch entsprechend Eclipse-mäßig gut und unkompliziert. Die Anwendung läuft auf PC, Linux und Mac - ich habe aber nur die PC Version getestet.

Es gibt ein kleines aber feines Forum in dem man auch ohne vorherige Registrierung posten darf. Ist das nicht herrlich? Wo gibt es sowas heute noch? Auch der Blog ist fein aber lesenswert. Schaut mal drauf um zu sehen was für tolle Widgets in letzter Zeit hinzugekommen sind...

Eine Lizenz für eine Person und unbegrenzte Installationen und kostenlose Updates auf Lebenszeit (na ja, zumindest so lange es Updates für den WireframSketcher gibt) kostet $75, das sind derzeit nicht mal 54 Euro (siehe alle Preise).

Für diesen Preis ist der WireframeSketcher wirklich ein tolles Tool das man sich unbedingt mal näher anschauen sollte.

Petru sagte mir, dass er gerade ein paar richtig gute Neuerungen und Widgets in der Mache hat. Schaut also ab und zu mal beim WireframeSketcher vorbei.

Hier geht es zu einem kurzen Demo Video, hier zu einer übersichtlichen Sammlung aller Features und hier zum Download der Trial Version.

Reviews