Wireframe, Mockup und Co: Vom Strich auf dem Papier zum High-Fidelity Prototyp
Sie planen eine Website oder App? Scribbles, Wireframes und Mockups helfen Ihnen, Ideen effizient zu visualisieren, zu testen und weiterzuentwickeln. Wir haben für Sie den idealtypischen Prozess skizziert: Von ersten Skizzen bis zum klickbaren Prototypen.
Sie wollen eine Website, eine App oder eine andere digitale Anwendung erstellen und fragen sich, wie Sie schnell und kostengünstig eine erste Gesprächsgrundlage mit Entwickler*innen, Kund*innen oder Stakeholdern schaffen können? Dann ist es Zeit, Ihre Ideen auf Papier zu bringen! Ja, auch im digitalen Zeitalter ist dieses Medium nicht zu unterschätzen. Und der Vorteil ist: jeder und jede kann mitmachen! Denn es geht nicht darum, gut zeichnen oder ein Tool bedienen zu können, sondern zu kritzeln – und kritzeln oder scribbeln, wie es im Englischen heißt, kann tatsächlich jede*r. So können vielfältige Ideen im Team ohne großen Aufwand gesammelt und diskutiert werden. Erst im Anschluss bedienen sich die UX-Designer dann verschiedener Tools, um Wireframes zu erstellen. Diese werden iterativ dann so weit verfeinert, bis man sie Mockups nennt. Aber fangen wir doch einfach von vorne an.
Was ist der Unterschied zwischen Scribble, Wireframe und Mockup?
Wir stellen immer wieder fest, dass Begriffe unterschiedlich aufgefasst und benutzt werden. So kommt es auch zu verschiedenen Erwartungen von Designern, Projektleiter*innen und Kund*innen in Projekten, wenn von bestimmten Dingen die Rede ist. Lassen Sie uns deshalb die wichtigen Begriffe Scribble, Wireframe und Mockup klar definieren und voneinander abgrenzen. Denn diese drei hängen zwar eng miteinander zusammen, sollten aber nicht synonym verwendet werden, da sie einen Prozess beschreiben und aufeinander aufbauen.
Scribble, Wireframe und Mockup können nicht synonym verwendet werden, denn sie beschreiben den Prozess und bauen aufeinander auf. Der Prozess ist dabei die Evolution von einfach gezeichneten Scribbles (bzw. Sketches oder auch Skizzen) über Wireframes bis hin zum Mockup, dessen Interfacedesign bereits der endgültigen Gestaltung nahe kommt. Man startet also abstrakt und wird immer konkreter. Gleichzeitig bewegt sich das Stadium des Prototyps von low-fidelity hin zu high-fidelity.
UX-Prozesse verstehen:
Mehr Klarheit in Ihrem Design-Projekt
Lassen Sie uns gemeinsam Ihre Designprozesse strukturieren und Missverständnisse vermeiden.
Scribbles: Die kreative Grundlage
Scribbles sind einfache, von Hand gezeichnete Skizzen, die erste Ideen für Benutzeroberflächen schnell und unkompliziert visualisieren. Sie werden in der frühen Phase des UX Designs eingesetzt, um Konzepte festzuhalten, zu diskutieren und weiterzuentwickeln, noch bevor digitale Tools oder detailliertes Design zum Einsatz kommen.
Typische Merkmale von Scribbles:
- Handgezeichnet, meist auf Papier oder Whiteboard
- Fokus auf Struktur und Inhalte statt auf visuelle Details
- Schnell erstellt und leicht veränderbar
- Fördern Diskussion und Ideenaustausch im Team
- Ermöglichen bereits einfache Tests mit Nutzenden, um erste Reaktionen und Feedback einzuholen
Handgezeichnete Scribbles für User Interfaces, auch Skizzen oder Sketches genannt, spielen eine entscheidende Rolle im Entwicklungsprozess von Designs. Sie werden oft in der frühen Phase eines Projekts erstellt, um spontane Ideen festzuhalten und grundlegende Konzepte zu kommunizieren. Diese schnellen Skizzen dienen dazu, ein Verständnis zu entwickeln und die zentralen Herausforderungen zu identifizieren. Dabei ist Perfektion unwichtig. Vielmehr steht der kreative Prozess im Vordergrund.
Grundlage von Scribbles sollten Informationen zu Anforderungen und Nutzungsszenarien, aber auch zu Informationsarchitektur, Moodboards oder Personas sein, die idealerweise schon vorab gesammelt wurden.
Es empfiehlt sich, schnell und unbeschwert zu beginnen, idealerweise mit Bleistift und Papier, um Flexibilität zu wahren und alle Teilnehmenden mit einzubeziehen. Software-Tools sollten vorerst vermieden werden, um den Prozess nicht zu verlangsamen.
Scribbles zeigen, welche Elemente auf einer Seite platziert werden können, ohne sich auf Details wie Größen, Abstände oder visuelles Design zu konzentrieren. Mithilfe der gewonnenen Varianten werden verschiedene Möglichkeiten erkundet, um die sinnvollsten Optionen auszuwählen. So bilden Scribbles die Grundlage für weitere Entwicklungen.
Nach der Brainstorming-Sitzung werden die Scribble-Ergebnisse ins Reine gebracht und können als Low-Fidelity-Papierprototyp auch an Abwesende weitergegeben werden (siehe Abb. 1). Scribbles eignen sich nicht nur zur internen Diskussion, sondern auch für einfache frühe Nutzertests, um Feedback zu Struktur, Navigation und Verständlichkeit einzuholen.
Warum Scribbles nutzen?
- Schneller Ideenstart
Mit Stift und Papier lassen sich Konzepte ohne technische Hürden sofort festhalten.
- Vielfalt fördern
Mehrere Varianten entstehen schnell, was kreative Diskussionen im Team erleichtert.
- Geringes Risiko
Frühe Ideen sind günstig zu verwerfen oder anzupassen.
- Einfacher Austausch
Scribbles sind leicht zu teilen und zu verstehen – auch ohne Design-Expertise.
Wireframes: Struktur und Funktion
Wireframes sind schematische Darstellungen einer Benutzeroberfläche, die den strukturellen Aufbau und die Anordnung von Inhalten visualisieren. Sie zeigen, wo welche Elemente platziert werden, ohne dass Farben oder detailliertes Design im Vordergrund stehen.
Typische Merkmale von Wireframes:
- Darstellung von Layout, Navigation und Inhaltsbereichen
- Fokus auf Funktionalität und Nutzerführung
- Unterschiedliche Detailtiefe (von groben Skizzen bis zu detaillierten High-Fidelity-Wireframes)
- Statisch oder interaktiv als „Wireframe-Prototype“ nutzbar
- Grundlage für Feedback, Teamkommunikation und frühe Usability-Tests
Während Scribbles handgezeichnete Entwürfe sind, werden Wireframes mit Hilfe einer Software erstellt. Ein Wireframe ist technischer und detaillierter als ein Scribble und somit dessen Weiterentwicklung. Wireframes nähern sich dem fertigen Produkt weiter an, indem sie die Anordnung, Position sowie Größe der Elemente genauer festlegen. Es handelt sich um schematische Darstellungen von Webseiteninhalten, bei denen Platzhalter für Bilder und Texte verwendet werden (siehe Abb. 2).2
Wireframes können in unterschiedlicher Detailtiefe erstellt werden – von groben Low-Fidelity-Skizzen mit einfachen Platzhaltern bis hin zu realitätsnahen High-Fidelity-Wireframes, die auch als Mockups bezeichnet werden. Mid-Fidelity-Wireframes liegen dazwischen. Darüber hinaus gibt es statische und dynamische Wireframes: Während statische Varianten den grundlegenden Aufbau einer Seite zeigen (z. B. Logo, Header, Fußzeile, Inhaltsbereich, Text- und Bildelemente), verknüpfen dynamische Wireframes mehrere Seiten zu einem interaktiven Prototyp (Wireflow). Damit lassen sich frühe Nutzertests durchführen, die Feedback zu Navigation, Interaktion und Informationsarchitektur ermöglichen.
Warum Wireframes nutzen?
- Klare Struktur
Inhalte und Layout festlegen, bevor visuelles Design startet
- Fokus auf Funktionalität
Abläufe und Navigation früh erproben
- Frühes Feedback
Stakeholder*innen und Testpersonen verstehen die Logik hinter dem Aufbau.
- Flexibilität
Änderungen schnell und kostengünstig umsetzen
Während Scribbles handgezeichnete Entwürfe sind, werden Wireframes mit Hilfe einer Software erstellt. Ein Wireframe ist technischer und detaillierter als ein Scribble und somit dessen Weiterentwicklung. Wireframes nähern sich dem fertigen Produkt weiter an, indem sie die Anordnung, Position sowie Größe der Elemente genauer festlegen. Es handelt sich um schematische Darstellungen von Webseiteninhalten, bei denen Platzhalter für Bilder und Texte verwendet werden (siehe Abb. 2).2
Es gibt verschiedene Arten von Wireframes, darunter statische und dynamische. Statische Wireframes zeigen grundlegende Elemente auf einer Seite (wie Logo, Header, Fußzeile, Inhaltsbereich sowie beispielhafte Text- und Bildelemente), während dynamische Wireframes einzelne Seiten zu einem interaktiven Prototyp zusammenfügen (auch Wireflow genannt). Hiermit können nun frühe Nutzertests durchgeführt werden, die es ermöglichen, Feedback zur Interaktion, Navigation oder Informationsarchitektur zu erhalten.
Für die Erstellung von Wireframes stehen verschiedene Tools zur Verfügung, darunter Balsamiq und Axure. Diese erlauben es UX Designern, ihre Entwürfe in klickbare Prototypen umzuwandeln.
Low-Fidelity-Wireframes bestehen aus grundlegenden Elementen und Platzhaltern, wohingegen Wireframes, auf denen die Elemente der späteren Umsetzung stark ähneln, High-Fidelity-Wireframes oder auch Mockups genannt werden. Mid-Fidelity-Wireframes liegen dazwischen.
Mockups: Detail und Design
Mockups sind detaillierte, visuell ausgearbeitete Entwürfe einer Benutzeroberfläche, die Farben, Typografie, Bilder und Layout im finalen Stil zeigen. Sie vermitteln den Look & Feel des fertigen Produkts und dienen als Vorlage für die Entwicklung.
Typische Merkmale von Mockups:
- Realistische Darstellung von Design und Branding
- Präzise Details wie Schriftgrößen, Abstände, Farben
- Grundlage für präzises Feedback von Stakeholder*innen
- Häufig Basis für High-Fidelity-Prototypen
- Visuelle Spezifikation unterstützen die Umsetzung durch klare Designvorgaben für Entwickler*innen
Wireframes bilden nun die Basis für die weitere Entwicklung und das Design. Bisher wurden visuelle Designaspekte wie Layout, Bilder, Farbe und Typografie nicht berücksichtigt, sondern lediglich Anordnung, Position und Größe der Elemente festgelegt. Nun kommen Farbe und Form ins Spiel. Bei der Erstellung von Mockups werden die Elemente entsprechend den Vorgaben (z. B. Corporate Design, Styleguides) designt (Abb. 3). Dabei geht es zum einen um die farbliche Ausgestaltung, z. B. der Bedienelemente, zum anderen auch um die Form der Elemente (z. B. vom „einfachen“ Rechteck zum Rechteck mit abgerundeten Ecken). Die detailliert ausgearbeiteten Screens können dabei täuschend echt wirken, wie ihr Name schon verrät: Mockup bedeutet im Englischen so viel wie Attrappe. Mockups dienen zudem als visuelle Spezifikation für Entwickler*innen, da sie die endgültigen Designvorgaben präzise festhalten.
Warum Mockups nutzen?
- Visueller Kontext
Markenelemente wie Farben, Schriften und Bildstil werden erlebbar.
- Gezieltes Feedback
Design-Details ermöglichen präzise Rückmeldungen statt vager Eindrücke.
- Entwicklungsgrundlage
Klare Vorgaben reduzieren Missverständnisse bei der Umsetzung.
- Realistische Wirkung
Realitätsnahe Entwürfe erleichtern Entscheidungen von Stakeholder*innen.
Prototypen: Interaktion erlebbar machen
Prototypen sind interaktive Modelle einer Benutzeroberfläche, mit denen Funktionen, Abläufe und Nutzererfahrungen getestet werden können. Sie reichen von einfachen Low-Fidelity-Versionen bis zu realitätsnahen High-Fidelity-Umsetzungen.
Typische Merkmale von Prototypen:
- Klickbare, interaktive Elemente
- Simulation von Nutzerflüssen und Interaktionen
- Früh einsetzbar für Tests und Feedback
- Variieren im Detailgrad von groben Wireframe-Prototypen bis zu fertigen Mockup-Prototypen
Um die Interaktionen sichtbar zu machen, die anhand der Scribbles, Wireframes oder Mockups bisher nur oberflächlich gezeigt werden konnten, braucht es nun einen Prototyp. Prototypen (oder auch Klickdummys genannt) stellen diese Interaktionsmöglichkeiten her. Letztlich kann in jeder der drei Entwicklungsstufen vom Scribble bis zum Mockup schon Interaktion hergestellt werden und somit auch getestet werden (siehe Abb. 4) .
Alles in allem ist es also wichtig, klarzumachen, welche Art und Grad an Ausgestaltung gemeint ist. Die Definition der einzelnen Detailstufen sollte immer deutlich an alle Projektbeteiligten kommuniziert werden, um Missverständnissen vorzubeugen. Denn, wer möchte schon einen Wireframe, wenn er ein Mockup erwartet?2
Low-Fidelity vs. High-Fidelity-Prototyp – der Unterschied auf einen Blick
Low-Fidelity- und High-Fidelity-Prototypen unterscheiden sich vor allem in Detailgrad, Einsatzphase und Zielsetzung. Die folgende Übersicht zeigt die wichtigsten Unterschiede und hilft, für jedes Projekt die passende Variante zu wählen.
Fazit: Prototypen unterscheiden sich in ihrem Detaillierungsgrad und Einsatzzweck. Während Low-Fidelity-Prototypen vor allem in frühen Konzeptphasen genutzt werden, um Ideen schnell zu visualisieren und Feedback einzuholen, dienen High-Fidelity-Prototypen in späteren Phasen der realitätsnahen Darstellung und finalen Abstimmung mit Stakeholder*innen.
Merkmal | Low-Fidelity | High-Fidelity |
|---|---|---|
Detailgrad | Grob, schematisch, ohne visuelles Feintuning | Sehr detailreich, nahe am finalen Design |
Darstellung | Papier-Scribbles, einfache Wireframes, klickbare Basisversionen | Voll ausgearbeitetes Layout mit Farben, Typografie und interaktiven Elementen |
Einsatzphase | Frühe Konzeptphase, schnelles Feedback | Späte Projektphase, finale Abstimmung |
Ziel | Ideen testen und schnell anpassen | Realitätsnahe Nutzererfahrung und Freigabe durch Stakeholder*innen |
Der Ablauf im Gestaltungsprozess
- Der idealtypische Gestaltungsprozess hat somit folgenden Ablauf:
- Scribbles (handgezeichnete Skizzen)
- Low-Fidelity-Wireframes → bilden Hauptelemente/Seitenstruktur/User-Interactions grob ab → Grobkonzept
- Mid/High-Fidelity-Wireframes → bilden Webseite schon sehr detailliert ab, nur ohne visuelles Design → Feinkonzept
- Prototyp → einzelne Wireframes werden zu einem interaktiven Klick-Dummy zusammengefügt → Wireflow
- Mockup-Prototyp mit Design (Vorabversion mit grundlegender Funktionalität und visuellem Design)
Wann starte ich mit Scribbling & Wireframing?
In ausgedehnten Design- und Konzeptionsprojekten sollte die Arbeit immer auf einer umfangreichen Recherche von Daten und Fakten zu potenziellen Nutzenden basieren (Research). Nur wenn bekannt ist, für welche Personen und Situationen gestaltet wird, kann gestartet und erste Ideen und Entwürfe entwickelt werden. Somit werden zuerst die Anforderungen der Nutzenden und verschiedenster Stakeholder definiert und Personas, Szenarien, Use Cases entwickelt, bevor die Konzeption beginnt. User Research bildet demnach eine entscheidende Ausgangsbasis für das gesamte Designprojekt.
Fazit
Bevor Sie also eine Website neugestalten oder eine App entwickeln, nutzen Sie Scribbles und Wireframes, um ein grundlegendes Layout zu entwerfen. Ein früher Usability Test deckt schnell auf, ob die Funktionen den Erwartungen der Nutzenden entsprechen. Daraus resultierende Optimierungen lassen sich daraufhin effizient umsetzen. Der iterative Prozess schärft Ihr Konzept, bevor Sie sich dem visuellen Design und der Programmierung widmen. Letztlich kann ein solcher methodischer Ansatz dazu führen, dass die Leistungsindikatoren (KPIs) Ihre Erwartungen sogar übertreffen.
Textquellen
Dieser Artikel basiert teilweise auf Informationen aus früheren Beiträgen des usabilityblog.de. Einige der ursprünglichen Artikel sind möglicherweise nicht mehr zugänglich.
1Sketching und Wireframing. Wie beginne ich richtig in Konzeptionsprojekten? | Robin Nagel (2022) | usabilityblog.de
2Wireframe, Mockup & Co: Vom Strich auf dem Papier zum high-fidelity Screendesign | Joanna Oeding (2016) | usabilityblog.de
