Wie erstellt ihr Wireframes / Mockups?

Macht mit und gewinnt eine Software-Lizenz für Balsamiq Mockups im Wert von $79!

Unter einem Mockup (Attrappe) bzw. Wireframe (Drahtgittermodell) versteht man in Web- und Software-Entwicklung einen Rohentwurf des Layouts einer Bedienoberfläche (UI = User Interface, bzw. GUI = Graphical User Interface). Noch ehe ein Designer sich um detaillierte Ausgestaltung Gedanken macht, nutzt man die Möglichkeit in groben Zügen und vergleichbar schnell den funktionellen Aufbau verschiedener Bereiche einer Website / Software darzustellen.

Wozu Wireframes dienen

Bereiche, deren Positionierung per Wireframing spezifiziert werden, können beispielsweise Listendarstellungen der aktuellen News sein, der auf verschiedenen Unterseiten wiederverwendet wird, das können Bereiche für Werbebanner sein (unter Berücksichtung der üblichen Standard-Formate), ein Login-Formular, die letzten Kommantare, die neuesten User, etc. Einfacher Mockup von Alexander-Langer.de

Ohne sich zu sehr ins Detail zu verstricken kann man auf diese Weise, beispielsweise als Basis für Pflichten-/Lastenhefte, gemeinsam mit dem Kunden den strukturellen Aufbau der Seite und Workflow der Anwendung erarbeiten. Hilfreich ist dies, weil über die Visualisierung vieles besser erklärt und dokumentiert werden kann. Die Wireframes (ich nenne es lieber so als Mockups) können dem Designer ebenso als Grundlage dienen, wie dem Entwickler und konretisieren die sonst oft nur in Textform verfassten Spezifikationen.

Eine gute kurze Einführung in das Thema findet sich auch bei den Webkrauts und bei Radicalmonday.

Womit Wireframes erstellt werden

Allgemein kann man sagen, dass jede Person Wireframes / Mockups mit den Mitteln erstellt, mit denen sie sich dabei am wohlsten fühlt. Die Fraktion Pen & Paper zeichnet Wireframes freihändig oder mit Bleistift und Lineal. Hier können einzelne Elemente auch ausgeschnitten und zusammengeheftet werden. So kann man einfach und schnell Variationen erstellen, ohne immer gleich alles neu zeichnen zu müssen. Ein schönes Beispiel hierfür sieht man im Video von Leisa Reichelt und Mark Boulton, die aktuell für Drupal 7 die User Experience neu formen (ab etwa Zeitindex 1:18):

Ein reinhhaltiger Fundus von Praxis-Beispielen findet sich auch in der Flickr Gruppe I Love Wireframes.

In meiner Zeit als Java Entwickler habe ich die Mockups von Programmoberflächen recht schnell in Tolls / Entwicklungsumgebungen erstellt, die dazu passende Werkzeuge liefern. Diese können dann später auch direkt weiterverwendet werden. Im Bereich Web ist das deutlich schwieriger, da Elemente hier individuell gestylt werden. Schnell kommt man in der Besprechung eher auf Detailfragen des Designs, als sich zunächst auf die Funktionalität zu beschränken.

Kollegen und Chefs habe ich schon Gestaltungen in Powerpoint, Excel, etc. machen sehen. Auch eingescannte Handzeichnungen von Kunden kommen mir schonmal unter. Daneben gibt es aber auch spezielle Tools, die einem bei der Erstellung behilflich sind. Im Netzlogbuch wurde kürzlich auf das Tool Balsamiq Mockups aufmerksam gemacht. Als ich mich auf der Produktwebsite um- und mir das Video anschaute, war ich direkt verliebt!

Wireframes sind so beliebt, dass es u.a. mit dem Wireframe Magazine auch einen großen bekannten Blog gibt, der Techniken und Beispiele rund um die Erstellung vorstellt.

Über Balsamiq Mockups

Balsamiq Mockups gibt es als Desktop-Anwendung auf Basis von Adobe Air (also sowohl auf Windows, als auch auf Mac und Linux lauffähig) und als integrierte Version für die Wiki Systeme Atlassian Confluence und XWiki, sowie das Issue Tracking System Atlassian JIRA.

Zum Testen kann man sich die Demo-Version von Balsamiq Mockups herunterladen und installieren, bei der lediglich die Funktionen zum Speichern und Exportieren deaktiviert sind. Eine einzelne Lizenz schlägt aktuell mit $79 zubuche und gilt für eine Person, egal auf wievielen Rechnern diese die Lizenz nutzt. So kann ich meine Mockups Lizenz ruhigen Gewissens auf meinem MacBook im Büro und dem iMac daheim einsetzen. Weiterhin beinhaltet die Lizenz lebenslange Updates!

Screenshot von Balsamiq Mockups

Die erstellten Wireframes sind von Haus aus in einem Handarbeit-Stil gehalten, der Fragen wie „Soll so meine Wesbite aussehen?“ ganz gut vorbeugt. Importierte Bilder kann man per Klick auch in einen schwarz-weißen Zeichenstil umwandeln lassen, um den Gesamteindruck des Mockup nicht zu stören.

Wireframe von DIGITAL-ROOM.de

Gewinne eine Lizenz für Balsamiq Mockups!

Was ist zu tun?

Schreibt und veröffentlicht einen Artikel darüber, ob und wie ihr Wireframes einsetzt und welche Erfahrungen ihr damit gemacht habt. Setze einen Tackback (Link) auf diesen Post in deinen Artikel. Vllt. hast du ein schönes eigenes Beispiel, das du abfotografieren, einscannen, konvertieren und online setzen kannst. Wenn nicht, kannst du die dir die Mockups Demo installieren und dort selbst einen Wireframe deiner eigenen Websites / deines Blog erstellen. Da du in der Demo nicht speichern kannst, mach einfach einen Screenshot.

Wer keinen Blog hat, kann mir seinen Wireframe auch per Mail zuschicken an: kontakt(_AT_)alexander-langer.de

Auch Kommentare auf diesen Artikel sind willkommen.

Wie lange habe ich Zeit?

Einsendeschluss ist Dienstag, der 30. Juni 2009.

Wie gehts weiter?

Nach Ablauf der Frist entscheide ich per Zufallsgenerator wer gewonnen hat. Ich nehme mir dann Zeit in einem Artikel die ganzen Arbeiten zusammenzufassen und verlinke zurück auf entsprechende Beiträge. Der Gewinner wird von mir benachrichtigt, ebenso wie die Jungs von Balsamiq, die mir freundlicherweise auf Anfrage diese Lizenz zur Verfügung gestellt haben. Die Lizenz bekommt der Gewinner dann direkt von Balsamiq zugemailt und kann seine Demo damit zur Vollversion aufrüsten.

Kommentare (6)

  1. Pingback: Balsamiq Mockups Lizenz gewinnen - Netzlogbuch

  2. @Alexander: Genau das Tool, das ich gesucht habe! Für ein neues Projekt soll eine Skizzenästhetik die Inhalte transportieren. Ich hoffe, man kann den Prototypen einfach weiterverwenden.

    Gruß aus Berlin,
    Uwe.

  3. balsamiq mockups weiterverwenden? versucht mal „napkee“. (napkee.com) napkkee importiert balsamiq mockups und peppt sie nochmal auf. versand des prototypen und schnelles „testen“ der mockups machen einfach nur spaß und helfen extrem gut dabei, die ideen aus dem kopf zu holen und zu zeigen.

    schnelle iteration von ideen ist für das A und O bei usability und auch in der kooperation mit softwarefreaks, die eigentlich lieber hardcoden und erst mal zwei wochen hinter dem PC verschwinden.

    für diese spezies stellt napkee doch tatsächlich den quellcode zur verfügung. super. ich mache bilder, das kann ich, und der programmierer fummelt im code rum, das kann er besser.

    balsamiq und napkee. das beste aus zwei welten!!!

  4. Sehr guter Hinweis, Danke dafür!

    Habe mir den Screencast von Napkee mal angeschaut und denke, dass das auch für mich interessant sein könnte, zumal der Preis okay ist.

  5. Ich persönlich schwöre auf Balsamiq Mockups, hab da letztens auch was in der Internet Professional drüber gelesen. Trotzdem danke für den Artikel, war sehr lesenswert!

Kommentare sind geschlossen.