Wireframing, Übersetzung: Erstellung eines Drahtgittermodells, Drahtgerüsts, Drahtgestells
Was ist Wireframing?
Als Wireframing wird die Erstellung eines sehr frühen, konzeptionellen Entwurfes einer Website bezeichnet. Hierbei handelt es sich um eine skizzenähnliche Darstellung der Inhalte und detaillierte Beschreibung des Layouts und der Funktionen. Beim Wireframing wird in der Entwicklungsphase, bevor die eigentlichen Inhalte eingestellt werden, die Struktur, und die daraus resultierende Benutzerführung, der Website definiert.
In einem sogenannten Wireframe (dt. Drahtgittermodell) werden die unterschiedlichen Bereiche der Website in Planquadrate aufgeteilt. Alle grundlegenden Elemente und Features, wie beispielsweise Logos, Inhaltsbereiche, Navigationselement, Suchfelder, Call-To-Action-Elemente etc., werden in verschiedenen Graustufen dargestellt und im Wireframe positioniert. Da es hier um die Planung und die erste Veranschaulichung eines zukünftigen Internetauftritts geht, werden noch keine konkreten Design-Elemente und Inhalte verwendet. Ein Wireframe kommt ganz ohne Farben, Fonts, Typographien, Grafiken und Texte aus.
Auf der Grundlage eines Wireframes werden im nächsten Schritt, sogenannte Mockups erstellt. Diese bauen auf dessen Struktur auf, sie sind aber bereits viel detaillierter. In einem Mockup, wird das spätere Erscheinungsbild (inklusive Farbschema, Typographien etc.), der zu erstellenden Website, so genau wie möglich abgebildet.
Arten des Wireframes
Beim Wireframing können zwei Arten von Entwürfen verwendet werden. Man unterscheidet zwischen dem statischen und dem dynamischen Wireframe. Bei beiden steht die Konzeption, nicht das Design im Vordergrund.
Bei einem statischen Wireframe handelt es sich um einen Erstentwurf einer Website. Es wird nur eine einzelne Seite, mit den grundlegenden Elementen, schematisch dargestellt. Hierbei geht es um ein konzeptionelles Layout, Inhalt und Design spielen noch keine Rolle.
Wireframing | Mobile Beispiel
Ein dynamischer Wireframe besteht aus mehreren Seiten, die bereits miteinander verknüpft sind. Eine Navigation von einer Seite zur anderen ist möglich. Dies dient der ersten Überprüfung des Navigationskonzepts und der Usability. Die Struktur wird durch das Ergänzen eines Navigationsbaums bzw. eines Flussdiagramms verdeutlicht. Auch bei dem dynamischen Wireframe geht es vorrangig um die grundlegende Gliederung einer Website. Die einzelnen grafischen Elemente werden nur vereinfacht dargestellt.
Vorteile des Wireframings
Ein wesentlicher Vorteil des Wireframings ist, die Zeitersparnis. Denn Wireframes lassen sich deutlich schneller erstellen als die traditionellen Layouts, die alle Design-Elemente bereits beinhalten. Da die Erstellung nur wenig Zeit in Anspruch nimmt, können durchaus mehrere Layout-Vorschläge ausprobiert werden. Die Wünsche, beispielsweise eines Kunden, lassen sich ohne viel Aufwand integrieren, Variationen und neue Ideen schnell ausprobieren. Ebenfalls die Umsetzung eines Layouts, anhand eines fertigen Wireframes benötigt viel weniger Zeit, da z.B. die Form, Größe und Positionierung vieler Elemente bereits schon vorher bestimmt wurde.
Ein weiterer Vorteil ist die bessere Kommunikation zwischen den einzelnen Projektteilnehmern. Anhand der visuellen Darstellung des Layouts, haben alle Beteiligten von Anfang an, das gleiche Bild vor Augen. Mit Hilfe des Wireframes fällt es wesentlich leichter, die Funktionen der einzelnen Elemente zu erklären. Aus diesem Grund kommt es seltener zu Missverständnissen und zeitaufwendige Fehlentwicklungen können dadurch verhindert werden.
Da Änderungen schnell umgesetzt werden können, ist es möglich, dass der Auftraggeber stärker in die Entwicklung mit eingebunden wird. Jegliche Entwicklungsschritte können schnell abgestimmt und abgesegnet werden. In Folge dessen, ist die Gefahr, einer Entwicklung, die nicht den Vorstellungen des Auftraggebers entspricht, dadurch deutlich geringer.