Tool-Tipp: Balsamiq Mockups

Persönlich mag ich ja lieber den Ausdruck Wireframe, aber das Synonym Mockup ist auch okay. Vor allem wenn er zur Benennung eines so interessanten Tools wie Balsamiq Mockups herhalten darf.

Das Interessante an Balsamiq Mockups ist, dass die Wireframes die man dort zusammenstellt das Aussehen eines Papier-Wireframes haben. Das nimmt den Wireframes die Anmutung des Fertigen. Dies hilft, sie auch vom Look & Feel her am Beginn des Entwicklungszyklus zu platzieren. Was möglicherweise ein paar grundlegende Erläuterungen zur Einordnung im Bezug auf die in dieser Projekt-Phase noch nicht wirklich möglichen Vollständigkeit der dargestellten Elemente und Funktionalitäten erspart. Auch finde ich die zur Verfügung stehenden Wireframe-Elemente (Controls) recht gut ausgewählt. Ein paar kleine Beispiele:

bal_mock_bsp

Weitere Komponenten und Design-Patterns wie etwa ein Facebook oder ein Menus- und Buttons-Set gibt es auf der Site mockupstogo.net. Wie man eigene Controls erstellt, hat sich mir noch nicht ganz erschlossen, aber fürs Erste sollten die vorhandenen für die allermeisten Anwendungsfälle reichen.

Die Desktop-Variante von Balsamiq Mockups basiert auf Adobes AIR-Technologie und für 79$ kann man die nervigen Kauf-Erinnerungen eliminieren, die alle 5 Minuten aufpoppen. Eine Investition, die sich lohnen könnte. Ich werde Balsamiq Mockups bei einem der nächsten Projekte auf jeden Fall mal intensiver testen.

Adobe, Konzeption, Tools, User Experience, UX

28. Mai 2009
von Matthias Zellmer

Trackback

Kommentare

Alexander Langer schrieb am 28.05.2009 um 23:21 Uhr

Ah, interessanter Tipp!

Ich hatte letztens mal ein Wireframe-Plugin für den Firefox installiert, aber das war ganz was gruseliges. Darum hab ich es gleich wieder entfernt und schon wieder den Namen vergessen.

Wireframes würde ich viel häufiger erstellen, wenn es nicht so eine Sch…arbeit wäre. ;) Für mich reichen Pen&Paper, aber das einzuscannen und zu mailen ist auch doof.

Es gibt diverse Libs für Tools wie Omnigraffle und Visio, aber die nutze ich beide nicht. Also behelfe ich mir notfalls eben mit Keynote (für Windows-User: Powerpoint)..

Letztens erhielt ich aber im Rahmen eines Projektkonzepts auch eingescannte händische Zeichnungen einer Kundin. Es macht also Schule.

Richtig eingesetzt ist Pen&Paper auch unschlagbar, wie man schön bei den Usability und Webdesign Rockstars Leisa Reichelt und Mark Boulton im Rahmen der Arbeiten für die Drupal 7 User Experience sehen kann: http://www.d7ux.org/edit-on-page/

Matthias Zellmer schrieb am 29.05.2009 um 09:10 Uhr

@Alexander Langer: Danke für den ausführlichen Kommentar.

Ich persönlich komme mit der Pen&Paper-Lösung irgendwie nur sehr schlecht klar. Vielleicht liegt es daran, dass ich als gelernter Technischer Zeichner beim Erstellen von solchen Zeichnungen immer einen (angelernten) Perfektionsanspruch habe. Ich habe meine Wireframes bisher mit ConceptDraw gemacht. Das Tool ist von der Nutzung und vom Funktionsumfang ungefähr mit Visio zu vergleichen.

Bisher habe ich Balsamiq Mockup noch in keinem realen Projekt eingesetzt, aber es fühlt sich bei der (bisher eher spielerischen) Test-Nutzung ziemlich gut an. Scheint mir ein guter Kompromiss …

Alexander Langer schrieb am 29.05.2009 um 10:04 Uhr

Der Vorteil von Pen & Paper ist klar, dass man sich Sachen ausschneiden und übereinander kleben kann und damit etwa Zustandswechsel deutlich schneller mal visualisieren und präsentieren kann, als wenn man sich erst lange am Rechner einen abrödelt. In einem der ersten Videos von Leisa und Mark wurde das auch demonstriert. Fand ich total spannend zu sehen wie die “Profis” so arbeiten.

Ich plane Balsamiq auch mal eine Runde anzutesten. Vllt. bei einem aktuellen, vllt. bei einem kommenden Projekt. Mal schauen..

Lustig, dass da sogar ein Cover-Flow-Widget drin ist, denn sowas in Flash habe ich gerade für nen Kunden in Auftrag gegeben… Die erste Funktion die ich suchte war aber der Import von Grafiken, die man gar stilistisch in diesen Mockup-Style umwandeln lassen kann – sehr schick!

Erstellst du Wireframes auch zusammen mit dem Kunden in Sessions?

rainwebs schrieb am 31.05.2009 um 01:02 Uhr

Schaut es Euch unbedingt an. Es gibt nichts besseres zur Zeit. Hier mein Testbericht (bin IT-Business Architect für JEE):

http://blog.rainer.eschen.name/2009/02/25/balsamiq-mockup-on-air/

Hab außerdem mal angefangen, es für den UML-Einsatz klarzumachen:

http://blog.rainer.eschen.name/2009/05/30/mock4u-agile-uml-with-balsamiq-mockup/

Matthias Zellmer schrieb am 02.06.2009 um 09:54 Uhr

@Alexander Langer: Die initiale Erstellung von Wireframes mache ich in aller Ruhe nach Kunden-Workshops. Sie dienen dann in erster Linie, um in weiteren Workshops zu schauen, ob auch an möglichst alles gedacht ist. Das ist dann auch papier-basiert.

Alexander Langer schrieb am 10.06.2009 um 15:36 Uhr

Muss mich erstmal noch ganz lieb für den Tipp bedanken. Ein paar Tage drauf, nachdem ich mir dann mal Zeit zu intensiveren Tests genommen hatte, habe ich dann meine Lizenz erworben.

Da man ja so schön sagt “Tue Gutes und berichte darüber.” kam mir die Idee einer Blogparade. Für diese haben die Balsamiq-Jungs mir eine Lizenz zur Verlosung versprochen. Hier gehts lang: Wie erstellt ihr Wireframes / Mockups?

Napkee – Prototyping-Tool als Erweiterung zu Balsamiq Mockups - Netzlogbuch schrieb am 17.06.2009 um 10:20 Uhr

[...] einiger Zeit habe ich euch Balsamiq Mockups vorgestellt. Ein extrem cooles Tool, um damit Wireframes in Papier-Prototypen-Optik zu erstellen. [...]

Balsamiq Mockups in der Praxis - Netzlogbuch schrieb am 08.07.2009 um 09:53 Uhr

[...] 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 [...]