Balsamiq Mockups in der Praxis
So angetan wie von Balsamiq Mockups war ich ewig nicht mehr von einem Stück Software. Wie schon in einem früheren Beitrag beschrieben, kann man damit Wireframes skizzieren, die ein bisschen das Look & Feel von auf Papier geskribbelten Wireframes haben. Die hat den Vorteil, dass sie bei der Präsentation nicht aus Versehen oder Unkenntnis für Layout-Entwürfe gehalten werden.
Diese Tatsache finde ich gut und praktisch, aber wirklich begeistert bin ich aus anderen Gründen. Zum einen ist Balsamiq Mockups ein wirklich sehr gut durchdachtes Programm, das das was es tun soll, wirklich sehr gut tut. Hört sich selbstverständlich an, ist es aber leider nicht. Die Bedienung ist so einfach und gut zu handhaben, dass es eine wahre Freude ist, damit seine Wireframes zu entwickeln. Aber das zeig ich jetzt am besten mal an einem kleinen Anwendungsbeispiel:
Horizontales Navigationsmenü
Ein horizontales Navigationsmenü zu skizzieren, ist ein typischer Anwendungsfall in einem Wireframe. Dazu zieht man in Balsamiq Mockups per Drag-and-Drop das Element “Button Bar / Tab Bar” auf die Arbeitsfläche. Diese sieht dann folgendermaßen aus:
Die Eigenschaften-Box, die hier unter der Menü-Leiste dargestellt ist, zeigt immer die Bearbeitungs- und Einstellungsmöglichkeiten des aktiven Elements an. Wenn man, wie in diesem Beispiel getan, mit der Maus drüber fährt, wird diese Box aktiv dargestellt und man die dort zur Verfügung stehenden Möglichkeiten nutzen. Hier sieht man etwa, dass das Menü-Feld “One” hervorgehoben bzw. aktiv ist.
Um jetzt die Default-Werte in der Menü-Bar zu ändern, macht doppelklickt man auf das Element und schon kann man die Werte komma-separiert ändern.
Das sieht dann so aus:
Natürlich kann man nun auch das aktive Menü-Feld wechselt:
Was dann, wenn man nun z.B. “Zwei” auswählt, das Folgende zum Ergebnis hat:
Wie man an diesem einfachen Anwendungsbeispiel vielleicht schon sehen kann, ist Balsamiq Mockups ein sehr durchdachtes und gut zu handhabenden Tool. Doch wie geschrieben, dies ist nur ein ganz, ganz einfaches Beispiel zur Nutzung des Tools. Natürlich ist der Zweck des Tools z.B. eine Webseite zu skizzieren … wie etwa diese:
von Matthias Zellmer
Napkee – Prototyping-Tool als Erweiterung zu Balsamiq Mockups
Vor einiger Zeit habe ich euch Balsamiq Mockups vorgestellt. Ein extrem cooles Tool, um damit Wireframes in Papier-Prototypen-Optik zu erstellen. Nun wurde mit Napkee dazu die logische Erweiterung in Richtung Prototyping-Tool angekündigt. Wenn Napkee so funktionieren wird, wie es das Video oben zeigt, dann sollten die Konzepter und Informationsarchitekten dieser Welt viel Freude an dem Paket Basamiq Mockups und Napkee haben.
Wie das Video zeigt, wird man seine aus Balsamiq Mockups heraus gespeicherten Wireframes direkt in Napkee öffnen können und bekommt dann den Balsamiq Mockups eigenen und auf XML-basierenden BMML-, den HTML-, CSS- und JavaScript-Code sowie eine Vorschau der gestalteten Elemente bzw. Seiten. Und ich hoffe, dass wenn man nun noch einen grafischen Styleguide hat, man direkt in dem Tool das CSS grafisch an die dort gegeben Vorgaben anpassen kann. Auch sollte nicht nur Napkee, wie im Video gezeigt, automatisch die im Balsamiq Mockups vorgenommenen Änderungen am Wireframe übernehmen, sondern auch umgekehrt.
Jetzt bin ich aber schon mächtig auf die Test-Version von Napkee gespannt …
von Matthias Zellmer
Die neusten Beiträge
Die neusten Kommentare
