Was ist ein Wireframe? (+Vorlagen und wie man sie erstellt)

X markiert den Punkt, na ja, irgendwie.

Wireframing ist ein wesentlicher Bestandteil Ihres Entwicklungsprozesses. Sie würden doch kein Haus ohne Bauplan bauen, oder? Ebenso sollten Sie Ihr App-Design nicht ohne die Erstellung eines Wireframes entwickeln.

Benutzer erwarten immer mehr von Marken. Zum Beispiel geben 97 Prozent der Geschäftskunden an, dass „Benutzerfreundlichkeit“ die wichtigste Eigenschaft für mobile Apps ist. Die kleinen Dinge summieren sich.

Was ist ein Wireframe?

Ein Wireframe ist eine visuelle Darstellung des Inhalts und oft auch der Funktionalität einer bestimmten Seite. Die Zeichnungen bestehen normalerweise aus Kästchen oder Rahmen, um das Layout der Benutzeroberfläche in Bezug auf Platzzuweisung und Priorisierung von Bildern, Texten, Schaltflächen usw. zu vermitteln. Wireframes werden von Designern und/oder Entwicklern verwendet, um die Grundstruktur ihres Webdienstes zu erstellen, sei es eine App zu erstellen, eine Website oder nur eine einzelne Landingpage.

Wireframes enthalten typischerweise keine Stilelemente, das heißt, es gibt keine endgültigen Farben oder Grafiken. Der alleinige Fokus des Wireframings liegt darauf, zu bestimmen, was wohin in das UI-Design kommt und warum, um die beste Benutzererfahrung (UX) zu erzielen.

Wireframing kann und sollte eine kollaborative Anstrengung sein, aber es gibt so etwas wie zu viele Köche in der Küche. Es ist besser, Meinungen von einer vielfältigen Gruppe einzuholen, anstatt nur von UI/UX-Designern.

Wie man ein Wireframe erstellt

Gehen wir die fünf Schritte durch, die Sie unternehmen müssen, um ein großartiges Wireframe zu erstellen.

1. Machen Sie Ihre Recherche

Bevor Sie einen Stift in die Hand nehmen und mit dem Skizzieren beginnen, stellen Sie sicher, dass Sie alles in Ordnung haben. Sie müssen Ihr Publikum wirklich verstehen und dann Benutzer-Personas erstellen. Von dort aus denken Sie über die Vielzahl von Anwendungsfällen nach. Möglicherweise müssen Sie sogar ein Wettbewerbs-Audit und andere Branchenrecherchen durchführen, um eine bessere Perspektive darauf zu bekommen, wie Menschen mit Ihrem Dienst interagieren werden.

2. Verwenden Sie Ihre Erkenntnisse als Referenz, um eine Strategie zu entwickeln

Halten Sie all diese Recherchen griffbereit, insbesondere Ihre Hauptziele. Wenn Sie das Glück haben, bereits Feedback von Ihrem Publikum zu haben, als Sie die Idee für eine App hatten, dann nutzen Sie es! Die Benutzererfahrung sollte immer im Mittelpunkt des Designprozesses stehen.

3. Skizzieren Sie den Benutzerfluss mit Fokus auf UX

Wie viele Bildschirme planen Sie zu haben? Wohin führt der Zurück-Button auf jedem Bildschirm? Diese Architektur und den Fluss zu erstellen, bevor Sie tatsächlich etwas zeichnen, hilft, die Dinge organisiert zu halten. Organigramme könnten ein guter Anfang sein. 

Beachten Sie, wie die Pfeile den Benutzerfluss vermitteln. Versuchen Sie, an einem Fluss gleichzeitig zu arbeiten und ihn bis zum Ende zu sehen, bevor Sie mit dem nächsten beginnen. Denken Sie an UX und das Endziel Ihrer Benutzer, um vorherzusehen, wo es potenzielle Abbruchstellen geben könnte.

4. Entwerfen Sie mehr als eine Version jeder Seite

Fangen Sie an zu zeichnen! Endlich können Sie Ihre Gedanken zu Papier bringen oder, in einigen Fällen, auf den Bildschirm. Denken Sie daran, dass Sie nur hochrangige Konzepte umreißen; keine Details sind notwendig. Viele Designer verwenden einen Marker, um Wireframes zu entwerfen, da es sie zwingt, sich auf das Wesentliche zu beschränken und nicht zu viel über das Kleingedruckte nachzudenken. Sobald Sie ein paar Versionen pro Bildschirm haben, ist es Zeit, mit dem Team zusammenzuarbeiten.

5. Verfeinern, fügen Sie Details hinzu und beginnen Sie mit dem Testen

Jetzt ist es an der Zeit, endlich einige Daten und Details einzubeziehen. Die Verwendung von echtem Inhalt, selbst nur ein Entwurf davon, wird in der Testphase helfen. Es wird einige der potenziellen Stolpersteine lindern, wie dass Ihre Tester eine Million Fragen dazu stellen, wie das fertige Produkt tatsächlich aussehen und funktionieren wird. Der Inhalt fügt diesem konzeptionellen Prozess Kontext hinzu.

Wireframe-Tools

Keine Angst, die Software ist hier. Wireframing kann ein sehr chaotischer Prozess sein – wir bevorzugen den Begriff „organisiertes Chaos“. Aber nur weil es für die Designer Sinn macht, heißt das nicht, dass alle anderen es verstehen werden. Wie werden Sie dies in der Befehlskette verkaufen oder einem Kunden präsentieren?

Wenn Sie Ihre Bildschirme nicht von Hand entwerfen möchten, werden Wireframing-Tools verwendet, um diese Blaupausen zu erstellen, um alles von einfachen Skizzen bis hin zu komplexen Seitenlayouts für Websites, Webseiten oder Anwendungen zu erstellen. Egal, ob Sie ein Online-Wireframe-Tool oder eines mit einer umfangreichen Bibliothek von Elementen benötigen, es gibt ein Tool, das für Sie geeignet ist.

Warum ist Wireframing wichtig?

Sie sollten Ihre Wireframes früh im Design- und Entwicklungsprozess erstellen. Die Verwendung dieser reduzierten Version Ihrer Website oder App ermöglicht es Ihnen, sich auf Ihre Benutzer und ihre Ziele zu konzentrieren. Der Wireframing-Prozess ist eine visuelle Übung, die Ihnen die Möglichkeit gibt, Geschäftsziele direkt mit den Bedürfnissen der Benutzer in Einklang zu bringen.

Wireframes sind das Fundament, dann kommen Mockups und dann Prototypen. Mockups sind ähnlich wie Wireframes, da sie nicht funktionsfähig sind, aber Farbe, Grafiken usw. enthalten. Prototypen gehen einen Schritt weiter und sind interaktive Versionen des Produkts.

Am Ende des Designprozesses können Sie keinen voll funktionsfähigen Prototypen ohne ein wirklich gutes Wireframe haben.

Wireframe-Beispiele

Jetzt, da wir wissen, was ein Wireframe ist, wie man eines erstellt und warum, schauen wir uns ein paar grundlegende Wireframes an und wie sie in die Realität umgesetzt werden.

App-Wireframe

In diesem Wetter-App-Konzept können Sie sehen, dass das mobile Wireframe keine Schnörkel enthält. Es ist eine sehr einfache Darstellung des Endprodukts auf der rechten Seite.

Quelle: Matt Sclanrandis

Beachten Sie, wie die Einfachheit des Wireframes Sie dazu zwingt, sich auf den Abstand und das Layout der verschiedenen Elemente auf dem Bildschirm zu konzentrieren.

Website-Wireframe

Dieses Wireframe ist verlängert, um das Scrollen des Benutzers über die gesamte Seite zu berücksichtigen. In diesem Beispiel entspricht die endgültige Website nicht genau dem ursprünglichen Wireframe. Denken Sie daran, dass Wireframes lediglich Richtlinien sind, die jedoch größtenteils vom Entwicklungsteam genau befolgt werden.

Quelle: JustInMind

Haben Sie jemals das Gefühl, dass viele Websites ein vertrautes Aussehen und Gefühl haben? Das liegt daran, dass sie oft mit Standard-Wireframe-Templates erstellt werden.

Fangen Sie an zu skizzieren

Einige Designer ziehen es vor, mit Entwürfen auf Papier zu beginnen, und andere gehen direkt zu ihrem bevorzugten Wireframe-Tool. Es gibt keinen richtigen Weg, ein Wireframe zu erstellen, aber es ist ein wesentlicher Schritt beim Erstellen einer App. Denken Sie einfach daran, Ihre Benutzer im Mittelpunkt zu behalten und Feedback von Ihrem Team zu akzeptieren.

Erfahren Sie mehr über UI-Design und erstellen Sie Schnittstellen, die Benutzer ansprechen.