Balsamiq-Wireframe-Export mit Napkee im HTML oder FLEX Format

Wir erhielten Anfragen, ob es Tools gibt, mit denen Wireframes automatisch in HTML exportiert werden können. „Es wäre doch schön, wenn die Entwickler Zeit sparen könnten und der Code gleich aus den Wireframes generiert werden kann.“ Da wir unter anderem mit dem Wireframing-Tool Balsamiq arbeiten, haben wir uns das Tool Napkee näher angeschaut. Dieses verspricht Balsamiq Wireframes importieren zu können und dann als HTML oder auch im FLEX 3 Format zu exportieren. Für diesen Test haben wir ein schon existierendes Balsamiq Projekt, eine WM Tippspiel Applikation, verwendet. Es sind hierbei zwar nicht alle verfügbaren Balsamiq Elemente verwendet worden, aber grundlegende Elemente wie Titel, Spinner oder Buttons sind vorhanden. Das schon in früheren Blog-Posts vorgestellte Tool AXURE generiert auf Mausklick ebenfalls HTML-Prototypen. Die Qualität dieses Codes wird in einem späteren Blog-Post behandelt.


Napkee ist eine Air Applikation, die einfach und schnell zu installieren ist. Wenn man Adobe Air schon installiert hat, dann benötigt man nur 2-3 Minuten Installationszeit, bis man Napkee benutzen kann.

Import von Balsamiq Wireframes

Der Import mittels Balsamiq erstellter Wireframes nach Napkee geht reibungslos. Automatisch werden die miteinander verknüpften Wireframes importiert und in einer Liste angezeigt. Einzelne Wireframe-Dateien können anschließend händisch aus der Liste entfernt werden. Als nächster Schritt ist das Projekt zu sichern, bevor der Export der Dateien stattfinden kann. Das Projekt kann auf HTML oder FLEX 3 umgestellt werden, je nach dem, welches Format man gerade für den Export benötigt.

Eine Vorschau der importierten Wireframes in Napkee ist durch Klick auf die jeweilige Datei zu sehen. Das Generieren der Vorschau ist jedoch etwas langsam und könnte bei sehr umfangreichen Wireframes länger dauern. Bei den Wireframes in Balsamiq, die jetzt zum Testen von Napkee herangezogen worden sind, wurden Elemente wie Select-Felder, Spinner, Überschriften, Buttons, Bilder sowie auch Container etc verwendet – ein Durchschnitt der meistgenuzten Elemente.

HTML Format

Bei der WEB-Vorschau für den HTML Export zeigt sich, dass die Bilder in Farbe vorliegen, obwohl die Einstellung in Balsamiq auf „Sketch it“ (schwarz-weiß Version) gestellt worden ist. Positiv ist, dass Input-Felder und normale Buttons korrekt dargestellt werden. Die Spinner hingegen werden nur als Inputfelder dargestellt und können hier auch nicht händisch geändert werden. Die Anordnung der Flächen wird auch nicht in der Reihenfolge dargestellt, in der sie in Balsamiq angegeben wurde. Postitiv aufgefallen ist, dass die Opazität von Napkee richtig interpretiert wird.

Für den Export können einige Voreinstellungen gemacht werden:

–          Schriftgröße und Schriftart sind änderbar

–          Der Prefix für Klassenbezeichnungen kann geändert werden

–          Eine zusätzliche CSS Klasse kann importiert werden

Zur Qualität des exportierten HTML Codes

Die CSS Styles der einzelnen Elemente werden direkt in den Header Bereich der HTML Seite geschrieben. Einige allgemeingültige Styles werden in externe CSS Dateien geschrieben. Im Firefox sieht die HTML Ausgabe auch so aus, wie in der Vorschau von Napkee. Schaut man es sich allerdings im IE6 an, gibt es böse Überraschungen mit transparenten PNGs, Box-Layout und Opazität von Flächen. Im IE8 werden die exportierten HTML Dateien ähnlich wie im Firefox angezeigt. Der einzige Unterschied liegt in der Schriftfarbe einiger Untertitel und Paragraphen. Diese werden manchmal in weiß dargestellt, was dazu führt, dass sie auf weißem Hintergrund nicht lesbar sind.

FLEX Format

Bei der FLEX Vorschau zeigt sich, dass Buttons und Eingabefelder mehr dem Layout einer Webanwendung entsprechen. Positiv ist, dass Spinner Elemente korrekt angezeigt werden und Opazität und Reihenfolge von Elementen, wie in Balsamiq definiert, übernommen wurden. Das „Sketch it“ Attribut bei Bildern wird aber auch hier ignoriert und die Untertitel werden leider gar nicht angezeigt.

Export im FLEX 3 Web- bzw. Air-Applikationsformat

Bei dem Export in das Flex Format ergaben sich erst einmal keine Probleme. Der Import in den Adobe Flash Builder 4 zeigte jedoch, dass die Vorbelegung des Spinners mit einem Strich für die Kompilierung ein Problem darstellt, da nur eine Vorbelegung mit Zahlen valide ist. In der Vorschau von Napkee sind anstatt der Striche Nullen (0) angezeigt, die beim Export jedoch so nicht übernommen werden. Als Workaround musste vorher in Balsamiq die Spinnervorbelegung geändert werden. Anschließend konnte das Projekt im Flash Builder kompiliert werden und zeigte ein fast original getreues Wireframes Abbild (Projekteinstellung Web oder Air). Die Spinner konnten jedoch nicht alle mit der Maus bedient werden, da Elemente (Title, Subtitle) überlappten. Die Bilder waren ebenso in Farbe abgebildet. Der generierte Code war nicht an allen Stellen eingerückt, und Styles waren direkt in Code-Elementen integriert (Layout nicht vom Code getrennt).

Fazit

Zusammenfassend ist zu sagen, dass der Einsatz von Napkee nur für die Erstellung für einen Air-Prototyp oder einen HTML-Prototypen geeignet ist und nicht für die Codeweitergabe an die Entwickler. Der PDF-Export oder PNG Export aus Balsamiq reicht vollkommen aus, wenn man dem Kunden Wireframes zukommen lassen möchte. Im PDF ist der Klick auf die Verlinkung der Wireframes untereinander auch möglich.

Der FLEX Projekt Export funktioniert gut, ist aber nicht für die spätere Codeverwendung für die Entwickler gedacht. Es müssten viele Änderungen und Verbesserungen am Code durchgeführt werden, damit dieser sauber im Entwicklungsprojekt verwendet werden kann. Um dem Kunden ein Gefühl für das Projekt als Air- oder Webanwendung zu geben, ist der Export aber gelungen, muss aber vor der Weitergabe an den Kunden angepasst werden, damit ein qualitativ guter Prototyp gewährleistet ist.

Wenn der Kunde explizit einen HTML Prototypen wünscht, und dieser im Firefox oder im Internet Explorer 8 angezeigt wird, dann ist Napkee trotz der genannten Einschränkungen zu empfehlen. Der Arbeitsaufwand reduziert sich, da nur kleinere Änderungen an den HTML Dateien gemacht werden müssen, wenn Elemente wie Select-Felder oder Überschriften nicht korrekt angezeigt werden sollten. Bezüglich der Weiterverarbeitung des HTML Code ist Napkee nicht zu empfehlen, da Accessibility außer Acht gelassen wird und kein sauberer Code erzeugt wird. Der exportierte Code ist also nur für die Wireframephase zu gebrauchen.