Was ist ein Wireframe? + Wie man einen erstellt

Read in English (Auf Englisch lesen).

Ein Wireframe ist eine visuelle Darstellung dessen, was Nutzer sehen und womit sie interagieren, wenn sie auf einer Website, Webseite oder mobilen App landen. Der Zweck eines Wireframes besteht darin, ein User-Experience (UX)-Konzept zu finalisieren, bevor eine Website oder App tatsächlich programmiert wird. 

Stellen Sie sich ein Wireframe als digitale Skizze, Modell oder Prototyp vor, der die Position jedes Elements innerhalb einer Benutzeroberfläche zeigt, einschließlich Text, Schaltflächen, Bildern, Videos und Menüs. Ein Wireframe kann auch Informationen zur Funktionsweise der Website oder App enthalten. 

Wireframes werden üblicherweise nach ihrer Genauigkeit klassifiziert, also danach, wie sehr sie der Website, Seite oder App ähneln, zu der sie letztendlich werden. Hier sind einige Unterscheidungen:

• Low-Fidelity-Wireframes sind die einfachsten und gröbsten Entwürfe einer Website, Seite oder App. Sie zeigen, wie alle Elemente auf dem Bildschirm positioniert werden. Sie enthalten typischerweise Elemente wie generischen Text und Platzhalter für Bilder, Überschriften, Menüs und Schaltflächen.

• Mid-Fidelity-Wireframes enthalten mehr Details als solche mit niedriger Wiedergabetreue. Zu den Details können genauere Abstände zwischen Elementen, tatsächliche Überschriften und zusätzliche Designelemente gehören.

• High-Fidelity-Wireframes wirken realistischer als Low- oder High-Fidelity-Wireframes und ähneln den Websites oder Apps, die sie darstellen, am meisten. Ein High-Fidelity-Wireframe kann visuelle Details wie Typografie, Farben und Bilder enthalten. 

Wer verwendet Wireframes?

Wireframing ist ein vielseitiger Prozess, den Menschen in unterschiedlichen Rollen nutzen, um Ideen greifbar zu machen. Ob für berufliche oder private Projekte – Wireframes helfen dabei, Konzepte zu visualisieren und weiterzuentwickeln. Es kann spannend sein, sich von realen Anwendungsfällen in Unternehmen inspirieren zu lassen oder potenzielle Karrierewege in diesem Bereich zu erkunden. Bei Ihrer Recherche zu Wireframes könnten Ihnen folgende Berufsbezeichnungen begegnen:

• UX- und UI-Designer erforschen, wie Benutzer mit Apps und Websites interagieren, um ansprechende digitale Erlebnisse zu gestalten.

• Ein Grafikdesigner erstellt visuelle Konzepte, in manchen Fällen auch Website-Layouts, um Ideen dem Publikum zu vermitteln.

• Ein Webdesigner bestimmt, wie eine Website den Benutzern angezeigt wird, einschließlich Farben, Schriftarten, Bildern sowie dem allgemeinen Layout und der Ästhetik, die das Benutzererlebnis prägen.

• Ein App-Designer bestimmt das Erscheinungsbild einer mobilen Anwendung, einschließlich der visuellen Elemente, ihrer Anordnung und der Funktionalität der App. 

Zusätzlich zu den genannten Rollen nutzen auch Unternehmer, Künstler, Designer, Freiberufler, Pädagogen und Hobbyisten Wireframes, um Benutzererlebnisse zu visualisieren. So kann beispielsweise ein Schmuckhersteller, der eine E-Commerce-Website für den Verkauf seiner Kollektion plant, Wireframes einsetzen, um das Layout und die Navigation zu strukturieren. Ebenso kann ein Lehrer, der eine App für den Zugriff auf Unterrichtsmaterialien entwickelt, Wireframes verwenden, um die Benutzerführung zu optimieren und Ideen zu verfeinern.

Vorteile von Wireframes

Wireframes können ein hilfreicher Einstieg in die Erstellung einer Website oder mobilen App sein. Berücksichtigen Sie beim Wireframing folgende Vorteile:

• Sie können ein frühes Konzept erkunden, ohne Entscheidungen über Schriftarten, Farben oder andere Designfunktionen des fertigen Produkts zu treffen.

• Sie können Ästhetik, Informationsarchitektur und Funktion erkunden, ohne Code zu schreiben.

• Mitarbeiter und Interessenvertreter können Feedback zum Drahtmodell geben, bevor die Funktionen fertiggestellt werden.

• Die Erstellung eines Wireframes ist einfach, kostengünstig und hilft, den Aufwand für Versuch und Irrtum zu minimieren. Zudem senkt sie die Kosten für die Entwicklung des fertigen Produkts. 

Wireframe-Software 

Es gibt eine Vielzahl von Wireframe-Programmen zur Erstellung visueller Darstellungen Ihrer Website, Webseite oder mobilen App. In der folgenden Tabelle finden Sie fünf Programme sowie deren Kosten, Funktionen und G2*-Bewertungen [1]. 

* Die Bewertungen auf G2 basieren auf der Zufriedenheit der Benutzer mit der Benutzerfreundlichkeit, den Erfahrungen mit Geschäftspartnerschaften, der Qualität des Supports und der Qualität der Verwaltung. 

Was macht ein Wireframe erfolgreich? 

Sie können Wireframes mit unterschiedlicher Genauigkeit und unter Verwendung unterschiedlicher Software erstellen. Wenn Sie jedoch sicherstellen, dass Ihr Wireframe die folgenden Eigenschaften aufweist, kann dies die Entwicklung Ihres fertigen Produkts erleichtern. 

1. Einfachheit 

Ihr Wireframe sollte sich auf die wichtigsten Komponenten Ihres Website- oder App-Konzepts konzentrieren: die einzubindenden Seitenelemente, deren Platzierung und die Interaktion der Nutzer mit ihnen. Ein hochpräzises Wireframe kann Schriftarten, Farben oder Bilder enthalten, muss aber dennoch übersichtlich und frei von Informationen sein, damit die Mitarbeiter es problemlos interpretieren können. 

2. Klare Beschreibungen der Benutzerfreundlichkeit 

Alle Notizen, die Sie einem Wireframe hinzufügen, sollten sich auf die Interaktion der Nutzer mit den Seitenelementen konzentrieren. Diese Beschreibungen sollten kurz und prägnant sein, zum Beispiel: „Button-Klicks öffnen die Seite in einem neuen Fenster.“ Fügen Sie diese Beschreibungen nur ein, wenn die Benutzerfreundlichkeit nicht aus der Darstellung des Wireframes hervorgeht. 

3. Wiederverwendbare Stile und Symbole

Wiederverwendbare Stile und Symbole, wie etwa Kästen für Bilder und horizontale Linien für Text, können den Prozess der Erstellung von Wireframes beschleunigen, die Konsistenz der Wireframes gewährleisten und ihre Interpretation erleichtern. 

Website-Wireframe vs. Mobile-App-Wireframe

Ein Website-Wireframe und ein Wireframe einer mobilen App unterscheiden sich in mehreren wichtigen Punkten, darunter Größe und Layout, die Art und Weise, wie Benutzer mit den Elementen der Benutzeroberfläche interagieren und wie diese Elemente funktionieren. Beispielsweise können Website-Benutzer mit der Maus auf Seitenelemente klicken oder auf einem Touchscreen darauf tippen, während Benutzer mobiler Apps auf Elemente tippen können, um sie zu verwenden.    

So erstellen Sie ein Wireframe

Bereit, Ihr erstes Wireframe zu erstellen oder Ihren bestehenden Wireframing-Workflow zu verbessern? Folgen Sie den unten stehenden Schritten. 

1. Schreiben Sie eine kurze Beschreibung des Endprodukts 

Wenn Sie sich mit Wireframes beschäftigen, haben Sie vielleicht bereits eine Idee für eine Website, eine Webseite oder eine mobile App, die Sie umsetzen möchten. Lassen Sie sich von bestehenden Websites oder Apps inspirieren, die Ihnen besonders gut gefallen oder die Sie als benutzerfreundlich empfinden.

Überlegen Sie zunächst, was Sie erstellen möchten und welches Benutzererlebnis Sie Ihren Nutzern bieten wollen. Eine kurze, klare Beschreibung hilft Ihnen dabei, das endgültige Erscheinungsbild Ihres Produkts besser zu visualisieren und während des Designprozesses fokussiert zu bleiben.

Hier ist ein Beispiel: 

Ich erstelle eine Website für einen Friseursalon, auf der Benutzer Termine bei Stylisten buchen, Dienstleistungen und Preise vergleichen, Kundenbewertungen lesen und verfassen sowie unsere Frisurengalerie durchsehen können – alles direkt von der Startseite aus.

2. Skizzieren Sie das Endprodukt von Hand. 

Beginnen Sie auf Basis Ihrer schriftlichen Beschreibung mit einer handgezeichneten Skizze der Benutzeroberfläche der Website oder App. Das Skizzieren eines Wireframes von Hand ist eine schnelle und kostengünstige Methode, die nur minimalen Aufwand erfordert. Zudem kann eine solche Skizze als Grundlage für die Erstellung eines digitalen Wireframes dienen, insbesondere wenn Sie zum ersten Mal mit Wireframe-Software arbeiten.

Ihre Handskizze kann Bereiche für Navigationsmenüs, Bildfelder, Call-to-Action-Buttons (CTA) sowie horizontale Linien für Text und Überschriften enthalten. Dabei sollten Sie auch die Abmessungen verschiedener Geräte und Bildschirmgrößen berücksichtigen. Wichtig ist, sich nicht zu sehr auf die Ästhetik der Skizze zu konzentrieren, da diese Details in einem späteren Stadium des Wireframing- und Designprozesses verfeinert werden. Stattdessen sollten Sie den Fokus auf das Gesamtlayout der Benutzeroberfläche legen.

3. Wählen Sie eine Wireframe-Software aus

Wenn Sie Ihre Skizze in ein digitales Wireframe umwandeln möchten, wählen Sie eine Wireframe-Software, die Ihre Ziele bestmöglich unterstützt. Berücksichtigen Sie dabei die Kosten, Funktionen und Benutzerfreundlichkeit der verschiedenen Tools (siehe obenstehende Tabelle). Nutzen Sie Supportdokumente oder Tutorials, um sich mit den Programmen vertraut zu machen, die Sie interessieren. Bevor Sie eine kostenpflichtige Version erwerben, empfiehlt es sich, kostenlose Testversionen auszuprobieren. So können Sie eine fundierte Entscheidung auf Basis Ihrer eigenen Erfahrungen treffen.

4. Erstellen Sie Ihr Wireframe

Im nächsten Schritt erstellen Sie Ihr Wireframe mithilfe einer Software und Ihrer Handskizze. Es kann hilfreich sein, sich beim Erstellen Ihres Wireframes Wireframe-Beispiele anzuschauen. Achten Sie darauf, das Layout aller Seitenelemente und Hinweise zur Funktionsweise der Elemente anzugeben, ohne den eigentlichen Inhalt oder übermäßige Designdetails zu erwähnen. 

5. Bitten Sie andere um Feedback

Feedback von anderen ist ein wichtiger Schritt bei der Erstellung von Wireframes, die zu benutzerfreundlichen Websites und Apps führen. Wenn Sie ein Wireframe für ein persönliches Projekt erstellen, holen Sie sich die Hilfe von Personen aus Ihrem Netzwerk. Wenn Sie ein Wireframe für professionelle Projekte erstellen, bitten Sie Stakeholder und Mitarbeiter um Feedback. 

Sie könnten unter anderem folgende Fragen stellen:

• „Wie einfach wäre die Nutzung dieser Website oder App?“ 

• „Wie intuitiv ist das Layout?“

• „Gibt es Bereiche, die verwirrend oder überladen sind?“

• „Welche Änderungen empfehlen Sie?“ 

6. Setzen Sie das Feedback um

Sobald Sie Feedback gesammelt haben, besteht der nächste Schritt darin, es in Ihr Wireframe zu implementieren. Möglicherweise müssen Sie das Layout komplett ändern, ein Low- oder Mid-Fidelity-Wireframe in ein High-Fidelity-Wireframe umwandeln oder mehrere Feedback- und Implementierungsrunden durchlaufen. Mit einem fertigen Wireframe können Sie mit der Erstellung Ihrer Website oder App beginnen.

Erste Schritte mit Wireframe-UX-Design auf Coursera

Online-Kurse bieten eine hervorragende Möglichkeit, Wireframing-Techniken, UX-Design und Programmierkenntnisse zu erlernen, um digitale Erlebnisse zu schaffen, die Nutzer begeistern. Sehen Sie sich die folgenden Optionen an: