Wieso eigentlich Wireframes?

Die Fifty Shades of Mausgrau.

12. März 20183 Minuten

Die Enttäuschung steht ihr ins Gesicht geschrieben: “Ein lebensbejahendes Mausgrau.” Kein Leuchten mehr in ihren Augen, Vorfreude adé. “Das ist das Design? Aber das sind doch gar nicht unsere Unternehmensfarben!”

Da ist er, der Moment für einen kurzen Wireframe-Exkurs. #bringbackthehappiness

Starten wir ein neues Projekt, haben wir meist noch keine genaue Vorstellung vom Endprodukt. Wir wissen zwar was es wird: Website, App, Shop, Konfigurator. Aber wie das ganze am Ende aussieht, das ist im ersten Schritt irrelevant. Vielmehr ist es wichtig zunächst zu klären was “unter der Oberfläche” passiert: Welche Funktionen müssen vorhanden sein und welches Nutzererlebnis soll transportiert werden. Dazu nutzen wir Wireframes!

Wireframes sind quasi der Bauplan unseres digitalen Produkts. Stellt Euch vor, ihr würdet ein Auto bauen. Kein Mensch würde damit starten die Karosserie zu fertigen, oder? Zunächst geht’s an die Planung: wendiger Cityflitzer? Sportwagen? Familienkutsche? Großer Kofferraum oder doch lieber viel Beinfreiheit? Ihr fasst Eure Ideen und Skizzen in einem Bauplan zusammen, definiert jedes Teil. Erst dann geht's an die Modellerstellung! Wir machen das nicht anders, nur eben digital.

Golden Gate Bridge

Der User Interface Design-Prozess startet mit der Darstellung aller technischen Anforderungen und der Ausarbeitung der Benutzerführung – ganz einfach und ohne Schnickschnack. Stattdessen arbeiten wir mit simplen Kästchen und kurzen Bezeichnungen. So wird schnell klar, ob an alles gedacht wurde und ob möglicherweise Schwierigkeiten in der Benutzung auftreten könnten. Zudem wird deutlich was darüber hinaus nötig ist um eine gute User Experience zu gewährleisten. Die Wireframes werden dann zur internen Abstimmung mit dem Entwicklerteam genutzt und ermöglichen es uns früh in der Konzeptionsphase den Seitenaufbau und die Funktionalitäten mit dem Kunden abzustimmen, ohne dabei auf das “perfekte” Design achten zu müssen. Das spart enorm viel Zeit und führt schneller zum Ziel. Wirklich.

Die meist sehr groben Wireframes werden anschließend weiter ausgearbeitet und mit Details versehen. Die Highfidelity Wires erinnern jetzt zwar dank Buttons und Eingabefelder stark an das finale Design, grau bleibt’s trotzdem. Funktionalität vor Optik.

Erst wenn der Bauplan steht und mit dem Kunden abgestimmt ist, dann schwingen wir die Designkeule: Welche Typografie wird genutzt? Wie sehen Bedienfelder aus? Wie groß ist ein Button? Das schöne daran: ist erstmal klar wie die Seiten genau aufgebaut sein sollen, kann der Designer sich ganz auf sein Wesentliches konzentrieren: die Gestaltung. Sogar in Farbe.