Was ist ein Wireframe und wozu brauche ich das?
Haben Sie schon oft darüber nachgedacht eine Website zu erstellen oder eine App zu entwickeln? Dann können Sie mit der Erstellung von Website Wireframes und Wireframe App gar nicht früh genug anfangen. (Na ja, „gar nicht“ ist vielleicht etwas übertrieben …) Besonders relevant sind Wireframes für UX-Designer und Webdeveloper.
Zwar ist jedes Projekt einzigartig und hat eigene Erfordernisse und Arbeitsabläufe – allgemein gilt jedoch, dass die ersten Wireframes entweder in der Konzept- oder der Planungsphase des Projektlebenszyklus erstellt werden sollten.
In der Konzeptphase erstellt man zunächst Low-Fidelity-Wireframes. Zu diesem Zeitpunkt steht das Experimentieren im Vordergrund: Sie haben eine Idee für eine Website oder App, aber noch keine genaue Vorstellung davon, wie sie aussehen soll. Low-Fidelity-Wireframes sind schnell und einfach erstellt und eignen sich daher hervorragend als Hilfsmittel zum Brainstorming. Hier kommt es zunächst darauf an, Ideen festzuhalten, Feedback von anderen Projektbeteiligten einzuholen und Ihre Entwürfe dann entsprechend zu überarbeiten.
Beim Übergang in die Planungsphase sollten Sie anfangen, mit Mid- und High-Fidelity-Wireframes zu arbeiten. In dieser Phase werden Entwürfe konkretisiert; entsprechend brauchen Sie solide Wireframes, bevor Sie zur Ausführung übergehen können.
Während der Konzept- und Planungsphase sollten Ihre Wireframes zunehmend Komplexität und optischen Schliff erhalten. Bis zur Übergabe an das Entwicklungsteam zum Programmieren (der Ausführungsphase) sollte der Wireframing-Prozess abgeschlossen sein.
Die Elemente eines Wireframes
Wireframes sehen oberflächlich betrachtet vielleicht einfach aus aber genau deswegen sind sie so effektiv. Beim Entwickeln von Websites und Apps erliegt man allzu leicht der Versuchung, sich gleich in die Auswahl von Schriftarten, Farben usw. zu stürzen, noch bevor man das Nutzererlebnis richtig geplant hat. Wenn man mit Wireframes beginnt, bleiben solche Ablenkungen zunächst außen vor; stattdessen konzentriert man sich auf drei grundlegende Aspekte des Produkts: Informationsdesign, Navigationsdesign und Oberflächendesign.
Informationsdesign
Wenn Nutzer mit Ihrer App oder Website interagieren, nehmen sie ständig Informationen auf: Auf was für einer Website befinden sie sich? Wie können sie mit ihr interagieren? Welchem Zweck dient die Website? Dieser Prozess verläuft automatisch und weitgehend unterschwellig. Als Designer der Website ist es Ihre Aufgabe, diese Interaktion zu unterstützen – Sie entscheiden über die Form und Anordnung, in der diese Informationen präsentiert werden.
Was bedeutet das konkret?
Sie müssen das Wireframe Design dem Nutzer anpassen. Wenn Ihre Website beispielsweise einen Messaging-Dienst anbietet, fallen die meisten Besucher in eine von zwei Kategorien: wiederkehrende Benutzer und neue Besucher. Wiederkehrende Benutzer wollen sich wahrscheinlich anmelden; neue Besucher möchten möglicherweise ein Konto erstellen oder einfach mehr über Ihr Leistungsangebot erfahren. Auf der Startseite müssen Sie entsprechende Funktionen für beide Arten von Besuchern bereitstellen und genügend Informationen kommunizieren, damit sie das jeweils gewünschte Ziel erreichen. Zur Vermittlung dieser Informationen bieten sich beispielsweise Schaltflächen an: Anmelden, Registrieren, weitere Infos usw. Beim Informationsdesign geht es darum zu entscheiden, welche Informationen auf die jeweilige Seite gehören und wo sie positioniert werden sollen.
Navigationsdesign
Wir wissen alle, wie nervtötend es sein kann, wenn man in einer App ewig lange nach dem Menü „Einstellungen“ suchen muss. Und wer hatte nicht schon einmal das Gefühl, dass man sich auf einer Website im Kreis dreht: Statt auf der eigenen Kontoseite landet man immer wieder entweder auf der Startseite oder – noch schlimmer – bei der Meldung „Fehler 404 – Die Seite wurde leider nicht gefunden“. Als Internetnutzer sind wir mit schlechtem Navigationsdesign nur allzu vertraut. Das sind eine von vielen dieser schlechten Wireframe Designs, die nicht durchdacht wurden.
Wie der Name schon sagt, legt das Navigationsdesign die Pfade fest, auf denen Benutzer einer App oder Besucher einer Website von einem Fenster zum nächsten navigieren. Von jeder beliebigen Seite aus kann zu verschiedenen anderen Seiten navigiert werden. Damit der Benutzer oder Besucher das auch weiß, müssen Sie ihm entsprechende visuelle Elemente als Navigationshilfen anbieten: z. B. Dropdown-Menüs oder anklickbare Links.
Oberflächendesign
Das Oberflächendesign eines Wireframes bringt alles zusammen: Informationen, Navigation und alles, was sonst noch in Ihren Wireframe gehört. Im Navigations- und Informationsdesign haben Sie Elemente erstellt, die auf dem Bildschirm angezeigt werden sollen: Schaltflächen, Menüs usw. Beim Oberflächendesign geht es um die Gestaltung einer überzeugenden Benutzeroberfläche aus diesen und weiteren Elementen – z. B. Textfeldern, Headerbildern und Seitenleisten.
Wie erstelle ich einen Wireframe?
Theoretisch wissen Sie jetzt, wie man Wireframes erstellt – nun müssen Sie dieses Wissen nur noch in die Praxis umsetzen. Hier ein paar nützliche Hinweise zu den ersten Schritten:
1. Gesamtübersicht erstellen
