Wissenswertes über Wireframing auf modernen Geräten

Ratgeber: Wer eine Website oder bei einer Software das Graphical User Interface (GUI) entwirft, stellt sich die Frage, was wie und wo dargestellt wird. Fragen wie welche Informationen vermittelt werden, wie die Struktur der Darstellung ist und wie der Anwender oder User navigieren soll, stehen an der Tagesordnung. Dabei beschreibt ein Wireframe das strukturelle Modell einer Website, einer Web-Anwendung oder einer Software.

Es handelt sich dabei um einen schematischen Entwurf, worin definiert wird, an welchen Stellen welche Elemente verwendet werden und wie zwischen Elementen die Navigation auf einzelnen oder unterschiedlichen Webseiten bzw. auf Screens einer Web-Anwendung oder Software funktioniert. Hierbei wird der Prozess, in dem ein Wireframe erstellt wird, als Wireframing bezeichnet.

Inhalte des Wireframing

Es geht beim Wireframing darum, ein Gerüst („Wireframe“ ist englisch und bedeutet auf Deutsch „Drahtmodell“ oder „Drahtgerüst“) zu entwerfen, welches die Navigation, die Informationsarchitektur und das User Interface ideal visualisiert. Demnach geht es also um folgende Kriterien:

• Navigation Design

• Information Design

• Interface Design

Für Wireframe sind alternative Begriffe Screen Blueprint, Page Schematics oder ein wenig altmodisch Bildschirmplan beziehungsweise Seitenschema.

Ziele für das Wireframing

Zunächst bestehen die Ziele des Wireframing darin, dass der Designer von der Website ein strukturelles Modell besitzt, das für ihn hilfreich bei der Gestaltung ist. Hierbei erfolgt Wireframing vor einem grafischen Design (Mock-up) und der anschließenden technischen Umsetzung (Prototyp).

Damit ein Wireframe erstellt werden kann, muss vorab allerdings der Zweck des Projektes festgelegt werden. Die Art und Weise der Benutzerführung und die ideale Struktur beeinflussen das Ziel der Website und das Geschäftsmodell. Ein Wireframe ist im Idealfall ein Bestandteil eines Austausches zwischen Designer und Klient, wodurch die Expertise des Designers und die Bedürfnisse und Wünsche des Kunden zusammengebracht werden können.

Vorteile des Wireframing

Wireframing bietet einige Vorteile:

1. Über den Aufbau seiner Anwendung oder Website gewinnt der Erzeuger des Wireframes Klarheit.

2. Zumindest bezüglich der Erstellung lässt sich ein Wireframe schnell realisieren. Die Erstellung wird umso länger dauern, je komplexer oder umfangreicher eine Lösung ist.

3. Ein Wireframe wird „gezeichnet“. Dieses Vorgehen ist daher deutlich günstiger, als voreilig mit der Programmierung einer Website oder der Implementierung einer Lösung zu beginnen.

4. Wireframing ist auch bezüglich des Materialeinsatzes günstig. Stift und Papier reichen in der einfachsten Ausbaustufe. Die Aufwände steigen jedoch, wenn an dem Prozess mehr Menschen beteiligt sind. In Abhängigkeit von möglichen technischen Lösungen können auch die Kosten steigen.

5. Zudem lassen sich Kunden, Kollegen, Anwender, Auftraggeber und so weiter frühzeitig einbinden. Auch wird der Austausch zwischen den Parteien gefördert.

6. Neue Erkenntnisse können leicht genutzt und anschließend integriert werden. Das ist deutlich einfacher als spätere Implementierungen oder Anpassungen.