WOZU WIREFRAMES? DARUM SIND WIREFRAMES IM GESTALTUNGSPROZESS SO WICHTIG

Bei einem neuen Projekt oder einem Relaunch möchte man am liebsten gleich mit dem Screendesign starten. Farben, Typografie, Icons, Bildsprache und diverse Elemente definieren. Doch wenn erst in der Designphase mit den Überlegungen gestartet wird, welche Informationen dargestellt werden sollen, und “wohin dieser Button überhaupt führt?!”, gelangt der/die Designeri:in schnell ins Straucheln. Halbfertige Screens werden über den Bildschirm geschoben und erzeugen dadurch reines Chaos. Die hierdurch entstandenen Fehler verzögern den geplanten Launch und kosten Zeit und Geld. Deswegen ist es wichtig, einen Plan für die Screens oder für Templates zu haben.

Was sind Wireframes?

“Wireframes”, wortwörtlich für “Drahtrahmen”, sind nichts anderes als Skizzen von Screens oder Templates. Ganz so, wie man zuerst ein Bild skizziert und nach und nach mit Leben füllt, passiert dies mit einer Website. Zuerst werden die Rahmenbedingungen geschaffen und sobald diese fixiert sind, kann die Konzentration auf die Entwicklung gesetzt werden.

Unterschied Wireframes und Mockups

Seit über zwanzig Jahren arbeiten wir als Digitalagentur mit Wireframes und Mockups. Doch bis heute kommt es immer wieder zu Verwechslungen bzw. Fragen der Nomenklatur von Wireframes und Mock-Ups, weswegen hier noch einmal die Unterschiede dargestellt werden:

Schematisch werden Typografie und Elemente gesetzt, eventuell zur Trennung Farben verwendet, welche nicht in den Mock-Ups vorkommen müssen. Der Einsatz von Farben stellt lediglich eine Gewichtung dar oder testet bereits erste Farbmöglichkeiten, um mögliche Interaktionen auszuprobieren.

Mock-Ups sehen aus wie das fertige Produkt und werden so an die Entwicklung weitergegeben. In dieser Phase lassen sich auch noch Usertests durchführen, bevor es an die finale Umsetzung geht. Farben, Typografie, Bilder, Icons und diverse Elemente sind fertig definiert; interaktive Elemente sind bereits eingeplant.

3 Gründe, warum Wireframes so wichtig sind

Egal, ob Websites, Apps oder übergreifenden Templates – wer ohne Plan agiert, verliert im Designprozess wertvolle Zeit – und dadurch auch Geld. Wireframes können hier helfen. Hier unsere Top 3 Gründe, warum Wireframes so wichtig sind.

1.) Wireframes als Leitfaden für Gestaltungsprozesse

Der Prozess fängt bei einer simplen niedergeschriebenen Informationsarchitektur an. Mit simpel ist gemeint, dass Informationsarchitekturen schnell auf Papier niedergeschrieben werden können und dafür kein Computerprogramm nötig ist. So werden grob Klickwege des Benutzers durchgeplant, ohne etwas visuell darstellen zu müssen. Ist das fixiert, kann mit der Erstellung von Wireframes gestartet werden. Auf Basis der Informationsarchitektur werden Screens oder Templates skizzenhaft aufgebaut. Ein erster visueller Überblick entsteht und die Gewichtung der Elemente wird festgelegt.

Wichtig: Wireframes geben nicht vor, wie ein Screendesign aussehen soll. Oft ist der/die Designer:in verleitet, Farben, Bilder und Typografie anzuwenden. Doch das ist irreführend und führt später dazu, Elemente aus den Wireframes im Screendesign anzuwenden. Kunden mitzuteilen, dass es sich bei Wireframes nicht um rohe Screendesigns handelt, ist also wichtig. Denn nur so ist die Erwartungshaltung kommuniziert und der Kunde ist nicht enttäuscht, wenn das fertige Screendesign zum Beispiel nicht den “gleichen Iconstil” zeigt.

2.) Wireframes dienen auch als Basis für Klickdummys

Visualisierte Wireframes helfen dabei, umständliche oder überflüssige Klickwege auszumerzen, indem klickbare Prototypen aufbereitet werden. Je nachdem, ob es sich bei den Wireframes um Desktop-, Tablet- oder Handyscreen handelt, lässt sich der Klickdummy live auf dem jeweiligen Gerät testen. Dadurch bekommt man als Ersteller selbst ein besseres Gefühl als Benutzer und kann mit diesem “Prototypen” die ersten Tests machen, noch bevor es zum eigentlichen Screendesign kommt.

Wireframes sind also gut geeignet, um Gewichtungen festzulegen, zu testen, ob “dieser Button überhaupt als so wichtig für den Benutzer wahrgenommen wird”, ob ein generelles Verständnis für den Seitenaufbau vorhanden ist oder ob sich das Gespann aus Kunde, Design und Entwicklung lieber noch in einem Workshop zusammensetzen möchte, um den Aufbau zu überarbeiten sowie zu ergänzen.

3.) Wireframes zeigen einen guten Plan, und lassen doch genügend Platz für Optimierungen

Ist auch dieser “visuelle Bauplan” geschaffen, fällt bald auf, wenn Elemente vergessen wurden, die während der Erstellung der Informationsarchitektur oder der Auflistung der gewünschten Seitenelemente verloren gegangen sind. Aber dafür sind Wireframes da – sie visualisieren das ursprünglich Theoretische. Dabei lassen sie genügend Spielraum für die Ergänzung vergessener Elemente und Verbesserungen des Userweges. Als Dokumentation für Kunden, Design und Entwicklung ist dieser visuelle Prozess ebenfalls geeignet.

Fazit

Wireframes eignen sich gut, um einen visuellen Plan des Projekts zu erstellen und um Zeit zu sparen. Für Projekte, welche zuvor keine Wireframes geplant hatten, ist der Screendesign-Prozess zeitintensiver. Klickwege planen und Gewichtungen der Elemente zu bestimmen während Farben, Typografie, Bildsprache und Aussehen besagter Elemente gestaltet werden, vermischt zwei verschiedene Prozesse. Es ist machbar, jedoch muss in diesem Prozess der Aufbau des Projekts sowie das Design auf einmal bewertet werden. Sowohl der Aufbau als auch das Design können voneinander ablenken und den Fokus der jeweiligen Gewichtung nehmen. Werden diese Gewichtungen getrennt, also erstellt zuerst Wireframes, dann das Design, bauen sie aufeinander auf anstelle vermischt zu werden. Weder Kunde, noch Design oder Entwicklung verlieren sich in Details zu einem Zeitpunkt, wo es sich noch um den Aufbau der Seite, nicht die Gestaltung, handelt.