PINGDOM_CANARY_STRING
Lucidspark LogoWas ist ein Wireframe?
    Kostenlos registrieren
Diagram

Was ist ein Wireframe?

Welchen Bedarf haben Sie an Whiteboards?

Ich möchte mein eigenes Whiteboard in Lucidspark herstellen.

Inhaltsverzeichnis

Lesedauer: 15 Minute(n)

Möchten Sie ein eigenes Whiteboard erstellen? Versuchen Sie Lucidspark. Es ist schnell, einfach und völlig kostenlos.

Kostenlos registrieren

Was ist ein Wireframe?

Stellen Sie sich vor, Sie hätten den Auftrag erhalten, ein Haus zu bauen. Was machen Sie als erstes? Sie erstellen einen Grundriss, um das Layout der Räume festzulegen, bevor Sie mit den eigentlichen Bauarbeiten beginnen können. Im Zweifelsfall ist es einfacher, jetzt Änderungen am Grundriss vorzunehmen, als später das ganze Haus abzureißen und neu zu bauen.

Schon klar – Sie sind nicht hier, weil Sie sich für Arbeitsabläufe im Baugewerbe interessieren. Sie sind hier, weil Sie eine App oder eine Website bauen. Zwischen beiden gibt es jedoch gewisse Ähnlichkeiten: Bevor Sie mit dem Bau Ihrer App oder Website beginnen, sollten Sie einen Grundriss in Form von eines Wireframes erstellen.

Genau wie ein Grundriss ist ein Wireframe eine schematische Zeichnung zur Darstellung der Struktur bzw. des Layouts einer App oder Website – quasi ihr „Skelett“.

Beim Erstellen von Wireframes geht es um die Struktur und Anordnung der unterschiedlichen Elemente: Was gehört wohin? Die detaillierte Gestaltung folgt in einem späteren Schritt. Ein Wireframe besteht aus einfachen Grundformen, die die visuellen Elemente einer Seite repräsentieren: Suchleisten, Kopfzeilenbilder und andere Container.

Wireframing hört sich komplizierter an, als es ist – man braucht dazu weder eine Ausbildung als UX-Profi noch spezielle Software oder jahrelange Erfahrung. Viele Wireframes entstehen ursprünglich als Skizzen im Notizblock oder auf einer Serviette – was immer gerade zur Hand ist, wenn der Geistesblitz einschlägt. Wenn Sie das Potenzial Ihrer Wireframes voll ausschöpfen wollen, sollten Sie es jedoch nicht dabei belassen. Am effektivsten entwickeln Sie Ihre Idee mithilfe einer digitalen Wireframing-Plattform weiter – dabei können Sie schrittweise mehr Details hinzufügen und Benutzererlebnisse simulieren. Am nützlichsten sind Wireframes, die sowohl das Seitenlayout als auch den Nutzerfluss, die Informationsarchitektur und das vorgesehene Benutzerverhalten darstellen.

Das Erstellen von Wireframes hat zwei Hauptvorteile: Erstens bekommen alle Beteiligten eine klare Vorstellung vom Design Ihres Produkts. Zweitens wird sichergestellt, dass das Design nutzerorientiert ist.

Arten von Wireframes

Wireframes lassen sich in drei Kategorien aufteilen: Low Fidelity, Mid Fidelity und High Fidelity. Der Begriff „Fidelity“ bezieht sich auf die Detailtreue des Wireframes. Low-Fidelity-Wireframes sind grobe Umrisse, die wenig mehr als das Layout darstellen; High-Fidelity-Wireframes enthalten Fülltext und imitieren einige Benutzerfunktionen.
Im Folgenden werden diese Unterschiede genauer erklärt und Anwendungsszenarien für die verschiedenen Typen von Wireframes erläutert.

Low-Fidelity-Wireframes

Low-Fidelity-Wireframe

Die Erstellung von Low-Fidelity-Wireframes zählt in der Regel zu den ersten Schritten im Designprozess. Am besten stellen Sie sich diese Diagramme als grobe Entwürfe vor, die zur schnellen Visualisierung des Grundlayouts Ihrer App oder Website dienen. Beim Erstellen von Low-Fidelity-Wireframes gilt das Prinzip: Weniger ist mehr. Sie sollten nur unbedingt erforderliche Texte und einfache Grundformen enthalten. Bilder, Fülltext und Symbole werden durch Platzhalter (ein Kästchen, „X“ o. ä.) dargestellt.

Vorsicht: „Schnell“ ist nicht gleich „Pfusch“. Sie würden Ihrem Chef ja auch keinen zerknitterten Schmierzettel präsentieren. Eine digitale Wireframing-Plattform unterstützt nicht nur die Gestaltung übersichtlicher Wireframes in professioneller Optik, sondern auch die Zusammenarbeit mit anderen. Statt Zeichnungen zu fotokopieren oder ein Whiteboard zu fotografieren, brauchen Sie nur auf „Freigeben“ zu klicken.

Mid-Fidelity-Wireframes

Mid-Fidelity-Wireframe

Nachdem Sie Ihre Ideen mit Low-Fidelity Wireframes festgehalten haben, können Sie sie nun etwas detaillierter ausarbeiten. Beim Erstellen von Mid-Fidelity-Wireframes sollten Sie Ihre Aufmerksamkeit auf Maßstab und Proportionen richten: Wie groß ist jedes einzelne Element im Verhältnis zum ganzen Fenster bzw. Bildschirm? Wie groß ist es im Verhältnis zu den anderen Elementen? Auch in diesem Schritt bleibt die optische Gestaltung auf ein Minimum beschränkt. Ggf. können generische Symbole und wichtige Texte eingefügt werden.

Low-Fidelity-Wireframes sind ein nützliches Hilfsmittel, um die Zustimmung wichtiger Stakeholder einzuholen; damit hat sich ihre Funktion jedoch bereits erschöpft. Mid-Fidelity-Wireframes bringen diese ersten Skizzen in eine übersichtlichere und detailliertere Form. Sie werden zumeist in der Frühphase des Designprozesses erstellt.

Einige digitale Plattformen zur Erstellung von Wireframes unterstützen das Hinzufügen von Benutzerfunktionen zu Ihren Diagrammen. Ein Mid-Fidelity-Wireframe sollte dem Betrachter eine Vorstellung des beabsichtigten Nutzerflusses vermitteln. Was passiert beim Anklicken einer Schaltfläche? Wenn sich das Seitenlayout ändert oder der Benutzer zu einer neuen Seite weitergeleitet wird, sollte sie mit einem Wireframe verknüpft werden, das den neuen Bildschirm darstellt.

High-Fidelity-Wireframes

Bei High-Fidelity-Wireframes ist Präzision das A und O. Jedes einzelne Element sollte sich bis auf das Pixel genau an der richtigen Stelle im Diagramm befinden. Soweit möglich, sollten alle für das Endprodukt vorgesehenen Bilder und Texte integriert werden. Menüs und andere anklickbare Aspekte der Seite sollten funktional sein und ebenso hochgradig detailliert dargestellt werden.

Aufgrund ihrer hochgradigen Detailtreue werden High-Fidelity Wireframes normalerweise von UX-Designern erstellt. Während die beiden anderen Wireframe-Typen in der Regel Nicht-Designer bei der Kommunikation ihrer Ideen an Designer unterstützen, erfüllen High-Fidelity-Wireframes eine umgekehrte Funktion: Designer verwenden sie, um anderen Projektbeteiligten die Möglichkeit zu geben, den endgültigen Entwurf zu prüfen.

Wireframes, insbesondere High-Fidelity-Wireframes, werden häufig mit Mockup-Diagrammen verwechselt. Im folgenden Abschnitt werden die Unterschiede zwischen beiden sowie ihre jeweiligen Funktionen und Anwendungszwecke erläutert.

Wireframes und Mockups: Was ist der Unterschied?

Wireframes sind Grundrisse für Apps und Websites; ein Mockup ist ein maßstabgetreues 3D-Modell in Farbe. Ein Wireframe – das gilt auch für High-Fidelity-Wireframes – ist ungefähr so weit von einer funktionsfähigen App oder Website entfernt wie ein Grundriss vom schlüsselfertigen Haus. Wireframes sind keine künstlerischen Meisterwerke. Sollen sie auch nicht sein – vielmehr dienen sie primär zur Kommunikation des Aufbaus und Funktionsumfangs Ihrer App oder Website.

Mockups hingegen sind möglichst originalgetreue Nachbildungen des fertigen Produkts. Sie beinhalten Gestaltungselemente wie Schriftarten, Farben und Bilder, aber ohne die im Wireframe enthaltenen Funktionen.

Wie bereits erläutert, kommen Wireframes in allen Phasen des Designverfahrens zum Einsatz. In vielen Fällen werden sie nicht von Mitgliedern des Designteams erstellt. Wireframes unterstützen die Projektbeteiligten beim Beheben struktureller Designfehler und bei der Konsensbildung über die Funktionsweise der App oder Website. Ästhetische Elemente bleiben in diesem Schritt weitgehend unberücksichtigt.

Mockups dienen zur Veranschaulichung der optischen Gestaltung des Produkts; in der Regel werden sie von Designern erstellt, nachdem der Wireframing-Prozess abgeschlossen ist. Sobald die Mockups eines Produkts von den erforderlichen Stakeholdern freigegeben wurden, kann das Projekt in die Entwicklungsphase gehen.

Was habe ich mir unter Wireframing in UX vorzustellen?

Ein Wireframe kann jeder erstellen. In der Praxis werden sie jedoch hauptsächlich von UX-Designern verwendet – in diesem Abschnitt erfahren Sie, warum.

UX-Designer (UX steht für „User Experience“) sind für die Gestaltung des Kundenerlebnisses bei der Interaktion mit dem betreffenden Produkt verantwortlich, also im Fall von Apps und Websites für die Gestaltung der Interaktion mit digitalen Benutzeroberflächen. Anhand von Wireframes lassen sich diese Interaktionen simulieren, sodass das Design perfektioniert werden kann, bevor mit dem Programmieren der Funktionen begonnen wird.

Was bedeutet das konkret? Bei der Gestaltung der Benutzeroberfläche für eine Website sind unterschiedliche Fragen zum Besucherverhalten zu berücksichtigen: Wie navigieren Besucher durch die Seite? Sollen sich Pop-up-Fenster oder Dropdown-Menüs öffnen? Und wenn ja, wo sind diese Funktionen untergebracht?

Mithilfe von Wireframes können UX-Designer sowohl das Layout einer Website als auch den vorgesehenen Nutzerfluss modellieren. Die in einem Wireframe enthaltenen Elemente können anklickbar gestaltet werden, um die Simulation echter Benutzererlebnisse zu unterstützen. Die Designer können diese Wireframes dann an andere Teams weiterleiten und Feedback einholen. Bei Wireframes für Apps sieht das Verfahren ganz ähnlich aus.

Kostenlos registrieren

Wann sollte ich mit dem Erstellen von Wireframes anfangen?

Mit dem Erstellen von Wireframes können Sie gar nicht früh genug anfangen. (Na ja, „gar nicht“ ist vielleicht etwas übertrieben …) 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.

Elemente eines Wireframes

Wireframes sehen oberflächlich betrachtet einfach aus – in ästhetischer Hinsicht kommen sie eher dürftig daher. Nicht zuletzt 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 Benutzer 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?

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.

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, anklickbare Links oder Bildlaufleisten.

Oberflächendesign

Das Oberflächendesign 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, Kopfzeilenbildern und Seitenleisten.

So erstellen Sie ein 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


Wireframe

Ob App oder Website, eins steht fest: Sie werden mehr als ein Wireframe erstellen müssen. Beim Wireframing dreht sich alles um den Nutzerfluss. Wie navigiert der Benutzer 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 – die Mühe lohnt sich jedoch! Wenn Sie sich direkt ins Erstellen von Wireframes stürzen, ohne eine klare Vorstellung vom Nutzerfluss zu haben, kommen verwirrende und unübersichtliche Diagramme heraus.

2. Einfache Grundformen hinzufügen


Wireframe

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


Wireframe

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 Benutzer 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 sparen; sie sollte erst im Mockup- und Prototypenstadium erfolgen.

4. Feedback einholen und überarbeiten


Wireframe

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 Mühen 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


Wireframe

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.


Deutsch
EnglishFrançaisDeutsch日本語PortuguêsEspañolNederlandsPусскийItaliano
DatenschutzLegal
© 2021 Lucid Software Inc.