Lars Gentz

Ein Softwareentwickler steht am Anfang eines Projekts oft vor folgendem Problem:

Wie präsentiere ich schnell und mit möglichst wenig Aufwand ansprechende GUI-Vorschläge?

Vor einiger Zeit stand ich vor dem gleichen Problem. Ein Auftraggeber wollte kurzfristig die GUI sowie die einzelnen Abläufe grafisch aufbereitet sehen, ohne sich durch Ablaufdiagramme kämpfen zu müssen. Meine Suche nach brauchbaren Tools führte mich über den Begriff Mock-up (Was ist ein Mock-up?) zu einer Software von der ich richtig begeistert bin:

Balsamiq Mockups

Mit dieser genialen Software lassen sich verschiedene Entwürfe für das GUI Design schnell realisieren.

Die Bedienung

Die Software lässt sich einfach bedienen. Ganz leicht mit Drag-and-Drop Technik die verschiedenen von der Software bereitgestellten Designelemente in den Arbeitsbereich ziehen. Ein hinterlegtes Grid, an welchem die Elemente “magnetisch” ausgerichtet werden sorgen für ein sauberes Erscheinungsbild mit Fluchten. Die Inhalte der Felder, Bereiche, Tabellen etc. können mit einem doppelklick in der Element ganz simpel geändert werden. Meist genügt es um zum Beispiel einen Reiter im Tabmenu hinzuzufügen das ein “,” und anschließend der Text angefügt wird. Balsamiq Mockup setzt das ganze dann sauber und schön ins Bild. Genauso einfach lassen sich zum Beispiel Tabellen schnell mit Dummydaten befüllen.
So werden aus den einzelnen Elementen schnell ansehnliche Screenentwürfe.
Ein Beispiel:

[caption id="attachment_533" align="aligncenter" width="150" caption="Mein erstes Mockup Fenster"][/caption]

Weitere Funktionen

[caption id="attachment_538" align="alignright" width="96" caption="Export Mockup"][/caption]

Man kann seine erstellen Mockups im xml Format abspeichern oder wie es hier heist Exportieren. Mit der Importieren-Funktion realsiert man so ganz einfach den Austausch zwischen Kollegen, Partner oder Auftraggebern. Auch der Export des Mockups in eine png oder pdf Datei ist möglich.

Übliche Funktionen wie Cut, Copy & Paste lassen sich über das Menu oder über Icons in der Toolbar ansteuern.

[caption id="attachment_543" align="aligncenter" width="258" caption="Mockup Toolbar"][/caption]

Die Designelemente im Arbeitsbereich lassen sich gruppieren und in verschiedenen Ebenen überlappend bzw. verdeckend anordnen.

[caption id="attachment_540" align="alignright" width="105" caption="Mockup Kontextmenu"][/caption]

Des Weiteren gibt es ein praktisches Kontextmenu zu jedem sich im Arbeitsbereich befindlichen Elements. Hier hat man auf viele Funktionen die ich schon weiter oben angesprochen hatte (Ebenen, Gruppieren, Cut, Copy, Paste) bequem Zugriff. Darüber hinaus hat man je nach Element auch die Möglichkeit eine Transparenz und/Oder Hintergrundfarbe anzugeben.

Extras

Seit einiger Zeit gibt es eine User-Community rund um Balsamiq Mockup Software, die sich primär mit Erweiterungen und Templates für Designelemente befasst. Hier kann man sich neben Anregungen auch mal einen Überblick verschaffen was alles so möglich ist.
Hier der Link:

Mockups To Go

Fazit:

Balsamiq Mockups bieten nicht nur Entwicklern die Möglichkeit schnelle GUI Designentwürfe zu erstellen – auch für Auftraggeber kann das sinnvoll sein um so seine Visionen den Entwicklern rüber zu bringen. Der große Vorteil daran ist die Einarbeitungszeit die nahezu komplett entfällt. Die Software ist super intuitiv und man kann wirklich sofort loslegen.
Mir gefällt einfach das Ergebnis – es hat einfach noch so ein bisschen das Flair vom skizzieren per Hand!
Ich selber nutze das Programm sehr gerne und empfehle es auch jedem weiter der irgendwie mit GUI Design zu tun hat.
Als weiterer Einsatzbereich sehe ich auch kurze Skizzen für Webseiten, Blogs & Präsentationen.

Ich hoffe ich konnte Euch von diesem Tool ein wenig begeistern. Wer es einfach mal ausprobieren möchte klickt auf den Link ganz oben im Artikel – es gibt dort eine online “Try-out” Version die direkt im Browser startet – also keine Installation erforderlich.

Über Kommentare, Meinungen aber auch Kritik zu diesem Artikel freue ich mich – nutzt dafür einfach die Kommentarfunktion weiter unten – Danke!