Wireframing

Der schnelle Entwurf: Wireframing

Mit Skizzen und Entwürfen kann eine Website gemeinsam mit dem Auftraggeber entwickelt werden und liefert so sehr früh im Projekt ein visuelles Feedback.

  1. Der schnelle Entwurf: Wireframing
  2. Standalone
webdesign, internet, wireframe, website, tools, mockups

© Internet Magazin

webdesign, internet, wireframe, website, tools, mockups

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

webdesign, internet, wireframe, website, tools, mockups

© Internet Magazin

Mehr eine Philosophie als eine Anwendung ist das 960-Grid, für das viele Vorlagen für alle möglichen Programme existieren.

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

webdesign, internet, wireframe, website, tools, mockups

© Internet Magazin

Pencil ist ein Firefox-Plugin, das dessen Rendering-Engine zur Darstellung der Prototypen nutzt.

Wer etwas mehr Komfort benötigt, sollte also zu anderen Programmen greifen. Pencil (http://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 (http://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

webdesign, internet, wireframe, website, tools, mockups

© Internet Magazin

Mit Balsamiq lassen sich sehr schnell gezeichnete Prototypen erstellen. Das Tool bietet neben Web-Elementen auch Steuerelemente für Desktop- und iPhone-Anwendungen.

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 (http://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.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".