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:

Informationsarchitektur, Interfacedesign, Tools, Web-Gestaltung, Wireframes

08. Juli 2009
von Matthias Zellmer