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 Stakeholder*innen 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*innen 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 Designer*innen, 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.
Scribbles: Die kreative Grundlage
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 für die Ist-Situation 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 miteinzubeziehen. 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).
Wireframes: Struktur und Funktion
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 Nutzendentests 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 Designer*innen, 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
Wireframes bilden nun die Basis für die weitere Entwicklung und das Design.2 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).3 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.
Prototypen: Interaktion erlebbar machen
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
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 Website 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*innen 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
