Was versteht man unter Wireframing?

Wenn du jemals versucht hast, eine Website oder App ohne ein Wireframe zu entwerfen, weißt du, warum der Wireframing-Prozess von Bedeutung ist. Wie könntest du mit deinem Team ohne Wireframes visualisieren, was du erreichen willst? Wie sequenzierst du Benutzerflüsse oder weißt, welche Inhalte auf welchen Bildschirmen erscheinen?

„Es ist frustrierend, wenn Leute visuelle Elemente kommentieren, obwohl man eigentlich allgemeineres Feedback benötigt, wie zum Beispiel: ‚Ist das das Wichtigste?‘“, sagt Tom Lowry, Director of Advocacy bei Figma Exzellentes Produkt- und Webseitendesign beginnt mit klugem Wireframe-Design – lies weiter, wenn du alle Phasen des Wireframings mit den Profi-Tipps und Wireframing-Tools von Figma meistern möchtest.

Was ist ein Wireframe?

Wireframes sind grundlegende Entwürfe, die Teams dabei unterstützen, sich auf Anforderungen abzustimmen und Gespräche über UX-Design fokussiert und konstruktiv zu gestalten. Betrachte deinen Wireframe als das Skelett deiner App, Website oder eines anderen Endprodukts. Dein Wireframe zeigt dem Designteam und den Stakeholdern die grundlegenden Umrisse der wesentlichen Webseiten, Komponenten und Funktionen, zum Beispiel:

• Bildschirm-Layouts
• Navigationsleisten
• Komponenten des UX- und UI-Designs
• Interaktive Elemente

In den frühen Phasen des Designs arbeiten Low-Fidelity-Wireframes mit Lorem-Ipsum-Text und einfachen Kästen als Platzhalter für Bilder und Videos. Dies hilft dem Designteam, den Texter*innen und anderen Teammitgliedern, sich auf die grundlegenden Funktionen zu konzentrieren und die richtige Richtung einzuschlagen.

Ein sauberes, schlichtes Wireframe-Design bietet UI/UX-Designer*innen auch Raum für Iterationen. Sie können frühzeitig Feedback aus Benutzertests zu zentralen UX/UI-Elementen sammeln, ohne die Nutzer*innen mit visuellen Designdetails abzulenken. Designteams probieren verschiedene Konzepte, Nutzerflüsse und Vorlagen aus, während sie auf das ultimative Nutzererlebnis hinarbeiten.

3 Arten von Wireframe-Designs

Die Möglichkeiten des UX-Designs scheinen unendlich zu sein, aber die meisten Wireframe-Designs lassen sich in drei grundlegende Stufen der Genauigkeit einteilen. Auf dem Weg zu deinem Endprodukt kannst du alle drei Arten von Wireframe-Designs durcharbeiten.

1. Low-Fidelity-Wireframes sind grundlegende Wireframes, die sich auf Layout, Navigation und Informationsarchitektur konzentrieren. Sie zeigen, wie die Benutzeroberfläche aussehen wird und veranschaulichen Benutzerabläufe mit wichtigen UI-Designelementen. Physische Whiteboard-Skizzen können in den frühen Wireframing-Phasen nützlich sein, obwohl sie nicht immer leicht zu teilen, zu speichern oder zu überarbeiten sind. Mit dem Online-Wireframing-Tool von Figma kannst du Wireframes mit niedriger Detailgenauigkeit schnell erstellen, teilen und iterieren.
2. Mid-Fidelity-Wireframes helfen Designer*innen, das endgültige Design zu iterieren und zu formen. Designteams können Annotationen und Inhalte hinzufügen, während sie verschiedene Ansätze für Benutzerflüsse und UI-Designelemente ausprobieren, um die Kernfunktionalität und die wichtigsten Interaktionen zu skizzieren. Dies ermöglicht es den Teams, sich auf das endgültige Wireframe-Design-Rahmenwerk zu einigen, bevor sie visuelle Designkomponenten hinzufügen.
3. High-Fidelity-Wireframes ähneln frühen Produkt-Mockups mit interaktiven und visuellen Designelementen, jedoch ohne die Funktionalität von Low-Fidelity-Prototypen. An diesem Punkt des Designprozesses bietet es sich an, Markenelemente wie Schriftarten, Farben und Logos hinzuzufügen. Auf diese Weise kannst du das Aussehen und die Haptik des Endprodukts für Benutzertests erfassen.

Wann sollten die Wireframe-Phasen übersprungen werden?

Viele Designteams nehmen an, dass sie mit einem Low-Fidelity-Wireframe beginnen müssen und sich von dort aus weiterentwickeln. Das ergibt Sinn, wenn du neue Produktkonzepte erkundest, damit du dich auf die wichtigsten Komponenten abstimmen, iterieren und später visuelle Designdetails hinzufügen kannst. Doch laut Tom ist es manchmal besser, direkt mit dem High-Fidelity-Wireframe-Design zu beginnen.

„Wenn du ein etabliertes Designsystem hast und das Design, das du ausprobierst, anderen, bereits existierenden Designs ähnelt, werden sich die Gespräche wahrscheinlich nicht mehr so sehr um visuelle Einzelheiten drehen“, erklärt er. „In diesen Fällen kann das Ausarbeiten einer Designidee auf einer höheren Stufe genauso schnell und genauso effektiv sein.“

7 Best Practices im Wireframe-Design

Ein effektives Wireframe kann so einfach wie eine Serviettenskizze oder so komplex wie ein statisches Produkt-Mockup sein. Mit diesen Best Practices im Wireframe-Design kannst du dich schneller mit deinem Team auf Richtungen einigen und mit dem besten Ansatz weiterarbeiten.

1. Identifiziere deine Designziele.

Bevor du mit dem Skizzieren oder dem Herumtüfteln an Wireframe-Vorlagen beginnst, definiere deine Designziele. Berücksichtige die Bedürfnisse der Benutzer und welche Aktionen sie durchführen sollen, um diese zu erreichen. Vielleicht kannst du Nutzenden helfen, ein Problem zu lösen, indem sie ein hilfreiches Produkt kaufen oder sich für einen informativen Newsletter anmelden. Richte dein Designteam auf dieses Ziel aus, damit deine Wireframe-Entwürfe dieses Ziel fördern.

2. Wähle die richtige Größe für deinen Wireframe.

Deine Wireframes sollten der Bildschirmgröße entsprechen, die deine Zielgruppe verwenden wird. Natürlich sieht eine Website oder Anwendung auf einem Laptop anders aus als auf einem Mobilgerät. Vor diesem Hintergrund sind die Standardgrößen für Wireframes je nach Bildschirmtyp wie folgt:

• Mobil: 393 Pixel breit und 852 Pixel hoch
• 11-Zoll-Tablet: 834 Pixel breit und 1194 Pixel hoch
• Desktop: 1440 Pixel breit und 1024 Pixel hoch

3. Halte dein Wireframe-Design einfach.

Beginne deinen Wireframe mit Graustufenfarben, begrenze die Schriftarten und ersetze Grafiken durch Platzhalter. Stell sicher, dass dein Entwurf die Benutzeranforderungen auf der grundlegendsten Ebene erfüllt. Wenn du dich auf Details wie Rechtschreibfehler oder Farbschemata konzentrierst, übersiehst du vielleicht einen Fehler in der Benutzererfahrung. Für inhaltsreiche Benutzeroberflächen empfiehlt Tom, echten Inhalt anstelle von „Lorem Ipsum“-Platzhaltertext zu verwenden. „Wenn man beginnt, Informationsarchitektur auf einer Benutzeroberfläche anzuwenden, ist es nicht sehr nützlich, die Menüpunkte 1-2-3-4 aufzulisten“, erklärt er. „Dann möchtest du echte Inhalte verwenden.“

4. Design-Konsistenz beibehalten.

Wireframes sollten nicht ablenken oder verwirren. Ähnliche Komponenten sollten in allen Wireframes gleich aussehen, damit sie leicht zu verstehen, weiterzuentwickeln und zu programmieren sind. Selbst wenn es nur geringfügige Abweichungen zwischen zwei zusammengehörigen Komponenten gibt, können unterschiedliche Designs über Seiten und Iterationen hinweg Unsicherheit bei Entwickler*innen schaffen.

5. Navigation deutlich machen.

Deine Benutzerflüsse sollten flüssig und intuitiv sein. Wenn du die Informationsarchitektur auf dein Wireframe anwendest, überlege, wo du sie möglicherweise mit Navigations- und Wegfindungshinweisen unterstützen kannst. Wenn Benutzer eine Sitemap konsultieren müssen, muss deine Navigation und Informationsarchitektur verbessert werden.

6. Häng nicht zu sehr an deinem Wireframe.

Selbst ein hochpräziser Wireframe ist immer noch ein Entwurf, der Anpassungen benötigt, um ein finales Produkt zu werden. Sobald dein Designteam das Wireframe-Design abgeschlossen hat, solltest du mit Entwicklern und anderen Mitgliedern des Kreativteams zusammenarbeiten, um Funktionen hinzuzufügen.

7. Nutze Wireframing-Tools.

Designteams benötigen Wireframes, die sie teilen, speichern und online in Mockups umwandeln können. Das Wireframe-Kit von Figma bietet Drag-and-Drop-Designtools, die es sowohl Anfängern als auch Designprofis ermöglichen, maßgeschneiderte, hochpräzise Wireframes zu erstellen.

Checkliste für das Wireframe-Design

Der Wireframing-Prozess hilft dir, zu planen, zu erstellen und während der gesamten Design- und Entwicklungszyklen zusammenzuarbeiten – aber woran merkst du, dass du fertig bist? Sobald du diese Aktionspunkte von deiner Wireframing-To-Do-Liste abhaken kannst, ist dein Wireframe bereit für Mockups und Prototypen mit höherer Detailgenauigkeit.

Sobald dein Wireframe fertig ist, wirf einen Blick auf deinen ursprünglichen Arbeitsumfang. Jetzt, da du dein Endprodukt skizziert hast, kannst du möglicherweise deinen Kostenvoranschlag verfeinern. Selbst wenn es sich nur um eine Skizze mit Platzhaltern handelt, sollte dein Wireframe Folgendes zeigen:

• Welche Bildschirme sind unerlässlich, um die Bedürfnisse der Nutzer*innen zu erfüllen?
• Nutzerfluss durch Konversionstrichter
• Überlegungen zur Nutzbarkeit, einschließlich Navigation und Organisation
• Hauptziele und Benutzerflüsse für jeden Bildschirm
• Wichtige UI-Designelemente sowie Inhalte und interaktive Funktionen auf jedem Bildschirm
• Wie Designkomponenten zusammenpassen, um Bildschirmvorlagen zu bilden

Wenn dein Designteam den Designprozess startet, weißt du möglicherweise noch nicht genau, wie dein Endprodukt funktionieren oder aussehen wird. Anfänger könnten versucht sein, das Wireframing zu überspringen und sich auf bestehende Designmodelle zu verlassen – was jedoch zu einer uninspirierten und wenig hilfreichen Benutzererfahrung führen kann. Wireframes lenken die kreative Aufmerksamkeit auf die Bedürfnisse der Nutzer und helfen den Teams, sich während des gesamten Design- und Entwicklungsprozesses abzustimmen. „Ein Wireframe bietet einen frühen Einblick in das Projekt, bevor man viel Zeit in den Feinschliff investiert hat“, so Tom. „Jedes Mal, wenn du frühzeitig mehr Personen im Unternehmen einbinden kannst, sparst du später Zeit.“

Es ist wahrscheinlich, dass dein Endprodukt ganz anders aussehen wird als der ursprüngliche Wireframe – und das ist richtig so! Wireframing gibt dir die Freiheit, zu experimentieren, Änderungen vorzunehmen, neue Konzepte auszuprobieren und Risiken einzugehen. Mit einem vorhandenen Grundgerüst kannst du problemlos an Arbeitsabläufen und Designelementen feilen, die später im Designprozess nur schwer anzupassen wären. Dein endgültiges Design wird dank des Trial-and-Error-Wireframing-Prozesses besser aussehen und sich besser anfühlen.

Wireframes stellen die Benutzerfreundlichkeit in den Vordergrund und richten den kreativen Fokus auf Elemente, die für das Benutzererlebnis wesentlich sind, darunter:

• Benutzerflüsse und Szenarien
• UX-Design-Fixes potenzieller Schwachstellen
• Navigations- und Wegfindungsfunktionalität
• In die Bildschirmvorlagen integrierte Informationshierarchie

Wie du erkennst, dass dein Wireframe gelungen ist

Den Erfolg von Wireframes ohne quantitative Daten zu bewerten, ist schwierig. Laut Tom gibt es jedoch mehrere qualitative Metriken, die man anwenden kann. Er empfiehlt, moderierte Benutzertests durchzuführen, um zu sehen, ob die Nutzer*innen die Benutzererfahrung auch ohne Anweisungen bewältigen können – anstatt „ins Stolpern zu geraten oder nicht zu wissen, was sie als nächstes tun sollen“.

Ein weiteres Zeichen für den Erfolg eines Wireframes ist die Ausrichtung an den Stakeholdern. „Wenn du aus einer Kreativsitzung mit dem Gefühl herauskommst, dass du das gewünschte Feedback erhalten hast und zuversichtlich die nächsten Schritte angehen kannst, dann würde ich sagen, dass dein Wireframe gelungen ist“, so Tom.

„Wenn sich die Stakeholder jedoch auf kleinere Details oder ästhetische Aspekte konzentrieren, statt auf die Kernbedürfnisse der Nutzer*innen,“ sagt er, „könnte das ein Hinweis darauf sein, dass du die Detailgenauigkeit der Wireframes verringern solltest. Reduziere den Feinschliff an den Artefakten, die du teilst, bis du das benötigte Feedback erhältst.“

Wireframe-Designs mit Figma erstellen und anpassen

Teams benötigen Wireframes, um sich zu vernetzen und gemeinsam über UX/UI-Designs zu brainstormen – und der Wireframe-Kit von Figma hilft dir beim Einstieg. Du kannst Ideen validieren und Design-Workflows auf der kollaborativen Figma Designplattform beschleunigen – und Webdesign-Projekte mit dem kostenlosen Website-Wireframing-Kit von Figma starten.

Für weitere Einblicke und Inspiration empfiehlt Tom, sich mit der Figma-Community zu vernetzen. „Unsere Community teilt eine Fülle von Wireframe-Ideen und UI-Vorlagen“, sagt er.