Der schnelle Entwurf: Wireframing

Wer Webseiten oder Anwendungen im Kundenauftrag erstellt, der kennt das Problem, dass die eigenen Vorstellungen und die des Auftraggebers durchaus stark voneinander abweichen können.Diese Diskrepanz führt nicht selten dazu, dass eine Seite umgestaltet werden muss, wenn bereits in stundenlanger Arbeit ein detailgetreuer Prototyp mit Photoshop oder einem anderen Bildbearbeitungsprogramm erstellt wurde. Die daraus resultierenden Probleme und Zeiterfordernisse können vermieden werden, je frühzeitiger der Kunde in die Konzeptphase eingebunden wird. Papierprototypen sind hier ein oft genutztes Werkzeug.Handgezeichnete Entwürfe - auch Mockups genannt - ermöglichen eine erste Abstimmungsrunde mit dem Kunden, sind aber nur schwierig und zeitaufwändig zu erstellen und zu überarbeiten.In diesem Artikel werden einige Tools vorgestellt, die Ihnen die Erstellung solcher Mockups in digitaler Form ermöglichen. Die Ergebnisse dieser Werkzeuge lassen sich prinzipiell in zwei verschiedene Kategorien einordnen: Wireframes und Prototypes.

Wireframes

Die erste Kategorie von Tools stellen Werkzeuge zur Verfügung, mit denen skizzenhafte Darstellungen von Ergebnissen möglich sind. Die Darstellung ähnelt in der Regel handgemalten Strichzeichnungen ohne Farbe. Diese werden daher auch als Wireframes bezeichnet.Der Fokus liegt hier auf der schematischen Darstellung von Funktionen und Größenverhältnissen. Diese Art der Darstellung und damit die Reduzierung auf das Wesentliche ist bei diesen Tools mit Absicht gewählt. Sie soll den frühen Stand des Entwurfes verdeutlichen.

Prototyping

Die zweite Variante von Tools versucht deutlich näher am Endergebnis zu bleiben, indem sie die verfügbaren Steuerelemente detailgenau für verschiedene Plattformen nachbildet. Dieser Nachbau kann bei einer Webseite natürlich nicht gelingen, da es hier nur wenige Standardelemente gibt, die immer wieder verwendet werden können. Hier wird der individuellen Gestaltung der einzelnen Elemente Vorzug vor Gleichförmigkeit gegeben.Wer allerdings Web- oder Desktopanwendungen entwickelt, für den sind solche Prototyping-Programme durchaus eine Überlegung wert, da die gezeichneten Mockups sehr nahe am wirklich umgesetzten Endergebnis liegen.

Aufgebohrt

Wer sich zu Erstellung von Prototypen und Entwürfen nicht in ein neues Programm einarbeiten möchte, dem stehen einige sinnvolle Varianten zur Auswahl.Die einfachsten, aber auch funktional am meisten eingeschränkten sind Shapes für gängige Charting-Lösungen wie beispielsweise Microsoft Visio oder Omnigraffle. Diese Shapes erweitern das jeweilige Programm um einen Satz an Steuer- oder Webseitenelementen. Eine Anfrage an Google mit dem Namen des Tools und dem Begriff Wireframes (beispielsweise "Visio Wireframes") liefert meist eine Reihe solcher Vorlagen.Mit diesen Vorlagen lässt sich sehr schnell und, vom Anschaffungspreis der Charting-Lösung abgesehen, kostenfrei eine erste Wireframing-Lösung aufbauen. Wer zudem Layouts nach dem 960-Grid-System (960.gs) baut, der findet für die meisten ein entsprechendes Template. Der Nachteil an dieser Art von Entwurfserstellung ist, dass die einzelnen Shapes nicht immer ideal aufeinander abgestimmt sind und sich auch nur schwierig erweitern oder pflegen lassen.Wer ein zusätzliches Steuerelement benötigt, der muss entweder auf die Suche im Netz gehen oder sich den Shape selbst bauen, was entsprechend zeitraubend ist. Selbstverständlich müssen Sie auch bereits im Besitz der jeweiligen Charting-Lösung sein.

Plugins

Wer etwas mehr Komfort benötigt, sollte also zu anderen Programmen greifen. Pencil (https://www.evolus.vn/Pencil/) ist eines davon. Das kostenfrei verfügbare Plugin für den Firefox-Browser nutzt dessen Rendering- Engine zur Darstellung der Prototypen. Die Software bringt per default Steuerelemente in Varianten für Windows und GTK mit.Wer es etwas mehr weblike benötigt, der kann sich zusätzliche Elemente von der Pencil-Webseite laden. Interessant sind hier beispielsweise die Vorlagen für das Dojo- und Ext JS-Framework. Aus den vorhandenen Vorlagen und Steuerelementen lassen sich einfach per Drag and Drop die ersten Entwürfe erstellen.In der kommenden Version 1.1, die bereits als Release Candidate vorliegt, kommen interessante Funktionen hinzu, die beispielsweise das Verlinken einzelner Prototypen-Seiten erlauben. Leider ist die Auswahl an Steuerelementen im Moment noch sehr stark auf die Erstellung von Desktop-Anwendungen ausgelegt. Möchten Sie einen ersten Entwurf einer Webseite erstellen, so wird die Auswahl an Elementen nicht ausreichend sein.Wer für die Erstellung von Programmen und Webseiten mit der Entwicklungsumgebung Eclipse arbeitet, kann auf das kostenpflichtige Plugin Wireframesketcher (https://wireframesketcher.com) zurückgreifen, das sich nahtlos in die IDE integriert. Anders als Pencil legt Wireframesketcher keinen Wert auf die detailgetreue Nachbildung der Steuerelemente, sondern stellt diese in Wireframe-Art als handgezeichnete Elemente dar.Sowohl Elemente von Desktopanwendungen als auch von Webseiten sind enthalten, darunter auch Elemente für Google-Maps, Video-Player oder Breadcrumb-Menüs. Durch die Integration in die Entwicklungsumgebung können Entwürfe projektbezogen gespeichert und dank der Integration von VCS-Werkzeugen wie Subversion oder GIT auch ohne großen Aufwand versioniert gespeichert werden.Die Vollversion kostet 75 US-Dollar pro Einzelplatzlizenz. Die gezeichneten Wireframes können einfach als PDF oder Grafik gespeichert werden. Im Gegensatz zu anderen Werkzeugen sind die Mockups aber nicht interaktiv, sie können also nicht für Präsentationen miteinander verlinkt werden, um Abläufe auf der Seite zu demonstrieren.

Standalone

Neben den genannten Programmen, die sich in eine bereits exis-tierende Software einklinken, existieren eine Reihe weiterer, die als separate Anwendung ausgeliefert werden. Eine der vielfältigsten und populärsten ist Balsamiq (https://www.balsamiq.com). Die Software basiert auf Flash und kann sowohl im Browser, als auch als Adobe-AIR-Anwendung als Desktoptool genutzt werden.Balsamiq-Mockups besitzen die Optik von handgezeichneten Skizzen, die aus einer sehr großen Menge an vorgefertigten Steuerelementen zusammengesetzt werden können. Balsamiq kann mit Einschränkungen kostenlos genutzt werden, wer seine gezeichneten Wireframes allerdings lokal speichern und wieder laden möchte, der ist auf die kostenpflichtige Version angewiesen.Diese kostet 79 US-Dollar und besitzt neben der erwähnten Im-/Export-Funktion die Fähigkeit, einzelne Wireframes miteinander zu verlinken, was gerade bei Präsentationen von Vorteil ist, um Abläufe von Funktionen zu demonstrieren. Sehr schön gelöst ist die Befüllung der einzelnen Steuerelemente mit Daten.So können Sie beispielsweise nicht nur den Text eines Buttons schnell verändern, auch komplexere Controlls wie beispielsweise Menüs oder Tabellen lassen sich einfach mit eigenen Beispieldaten befüllen. Neben der großen Auswahl an Elementen ist die Community ein großer Vorteil von Balsamiq. Diese stellt zusätzliche Steuerelemente meist kostenfrei zur Verfügung.Hier ist mittlerweile ein reger Austausch entstanden, sodass viele Standardelemente nachgerüstet werden können. Eine interessante Funktion ist die Integration in bestehende Tools. Balsamiq kann direkt auf Wiki-Seiten eingesetzt werden, die mit Confluence oder XWiki als Engine arbeiten.Auch einige Bugtracker werden unterstützt. Wer möchte, der kann die fertigen Wireframe-Mockups auch als Adobe Flex-Anwendung exportieren, was allerdings in der aktuellen Version nur sehr eingeschränkt funktioniert.