Was ist ein Wireframe?

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

Ob App oder Website, eins steht fest: Sie werden mehr als ein Wireframe erstellen müssen. Beim Wireframing dreht sich alles um den Nutzer. Wie navigiert der Nutzer durch die App? Gibt es einen bestimmten Ort, an dem er im Idealfall landen soll?

Bevor Sie mit dem Erstellen von Diagrammen beginnen, sollten Sie die möglichen Wege beim Navigieren Ihrer App oder Website aufzeichnen. Für jedes weitere Fenster brauchen Sie ein eigenes Wireframe.

Diese Vorarbeit mag übertrieben erscheinen aber die Mühe lohnt sich jedoch! Wenn Sie sich direkt ins Erstellen von Wireframes stürzen, ohne eine klare Vorstellung vom Nutzer zu haben, kommen verwirrende und unübersichtliche Diagramme heraus.

2. Einfache Grundformen hinzufügen

Nach ein oder zwei gründlichen Planungssitzungen können Sie mit dem Entwerfen beginnen. Als erstes müssen Sie Ihrem Diagramm einen „Rahmen“ geben. Wenn Sie ein Wireframe für eine App erstellen, sollten Sie eine Form auswählen, die dem Bildschirm eines Mobilgeräts ähnelt. Für ein Website-Wireframe wählen Sie am besten eine Form, die einem Browserfenster ähnelt. Beide Rahmenformen müssten in den Formbibliotheken der meisten digitalen Wireframing-Plattformen zur Verfügung stehen.

Als nächstes fügen Sie die größten Elemente des Wireframe hinzu: einfache Formen und Container, die Elemente wie Kopfzeilen, Seitenspalten, Textfelder usw. darstellen. Zu diesem Zeitpunkt brauchen Sie weder Bilder noch Text einzubauen – zunächst geht es nur darum, das allgemeine Layout festzulegen.

Wiederholen Sie diesen Vorgang für jedes Wireframe, das Sie erstellen möchten.

3. Schaltflächen hinzufügen und Wireframes verknüpfen

Nachdem Sie das Layout Ihrer Wireframes festgelegt haben, ist es an der Zeit, einige Funktionen hinzuzufügen. Auf jedem beliebigen Fenster in Ihrem Produkt gibt es wahrscheinlich mehrere Schaltflächen, die den Benutzer zu einem neuen Fenster weiterleiten. Möglicherweise haben Sie bereits im vorigen Schritt Formen für diese Schaltflächen eingefügt. Wenn nicht, wählen Sie jetzt für jede Schaltfläche eine einfache Grundform aus und fügen Sie sie in Ihr Wireframe ein. Sie können den Schaltflächen auch Beschriftungen hinzufügen (z. B. „Zur Startseite“).

Wenn in Ihrer Wireframing-Plattform Verknüpfungsfunktionen inbegriffen sind, verknüpfen Sie jede Schaltfläche mit dem Wireframe, zu dem sie den Nutzer weiterleiten soll.

Tipp: Wählen Sie eine einzige Schriftart für Ihr Wireframe aus. Sie können ggf. Formatierungen anwenden (Fettdruck oder Kursivsetzung). Die weitere Textgestaltung können Sie sich an dieser Stelle für später aufheben. Diese kommen erst in der Mockup- und Prototypenphase zum Einsatz.

4. Feedback einholen und überarbeiten

Sie haben stundenlange Arbeit in Ihre Wireframes gesteckt. Das Layout sieht gut aus, und Sie haben sie miteinander verknüpft, um den Nutzerfluss zu simulieren. Nun ist es soweit – Zeit, anderen Projektbeteiligten die Früchte Ihrer harten Arbeit zu präsentieren. Sehr wahrscheinlich gibt es Aspekte Ihrer Wireframes, die sich verbessern lassen. Deswegen ist es wichtig, Feedback einzuholen, bevor Sie zusätzliche Details integrieren.

Vielleicht ist eine Schaltfläche noch nicht ganz an der richtigen Stelle. Oder vielleicht ist die Menüleiste zu groß und dominiert die Seite. Hören Sie sich die Meinung Ihrer Kollegen unbedingt an – Wireframing ist Teamarbeit.

Setzen Sie sinnvolle Vorschläge zur Verbesserung Ihrer Wireframes um. Wiederholen Sie diesen Vorgang so lange, bis alle maßgeblichen Stakeholder Ihre Entwürfe freigegeben haben.

5. Details hinzufügen

Bei den freigegebenen Diagrammen handelt es sich in aller Regel um Mid-Fidelity-Wireframes, die Sie nun im nächsten Schritt detaillierter ausgestalten können. Fügen Sie Bilder und Text ein. Heben Sie einzelne Elemente auf der Seite farblich voneinander ab. Dabei arbeiten Sie am besten mit unterschiedlichen Graustufen. Achten Sie darauf, dass die Größenverhältnisse bis aufs Pixel genau stimmen.

6. Wireframes zur Nutzung freigeben

Nun sollten Sie über einen Satz funktionsfähiger High-Fidelity-Wireframes verfügen, die Sie für andere Projektbeteiligte und Teams zur Nutzung freigeben können.