In der Erstellung von Software durchlaufen wir unterschiedliche Phasen. Eine davon ist die Konzeptionsphase. Diese kann sich ebenfalls in kleinere Phasen unterteilen, in denen verschiedene Ergebnisse erzielt werden sollen. Zwei dieser Ergebnisse können Wireframes und Mockups sein. Leider werden diese beiden Begriffe häufig missverstanden oder als Synonyme verwendet. In diesem Artikel möchte ich Klarheit bezüglich der Unterschiede und Anwendungsgebiete geben.
Vom Wireframe zum Mockup
Um den Unterschied zwischen Wireframe und Mockup zu verstehen, beginnen wir am Besten mit der Reihenfolge in der sie erstellt werden. Ein Wireframe wird in der Konzeptionsphase vor einem Mockup erstellt, Mockups hingegen basieren auf Wireframes.
Was ist ein Wireframe?
Wireframes werden genutzt um eine Idee grob zu visualisieren. Das Äquivalent dazu könnte bei Developern ein UML Diagramm sein.
Um ein Wireframe zu erstellen, kann man entweder Papier und Stift verwenden oder gleich von passende Tools wie Figma gebrauch machen. In der Erstellung ist zu berücksichtigen, dass wir erstmal keine Beispieltexte benötigen, sondern uns auf die nötigen Elemente und ihrer Positionierung konzentrieren. Design Elemente wie Bilder und Farben spielen hierbei noch keine Rolle.
Wireframes werden i.d.R. von UX Designern auf Basis von zuvor getätigten Recherchen und Auswertungen erstellt. An dieser Stelle stehen die Zielsetzung und die optimale User Experience im Vordergrund. Da Wireframes sehr abstrakt sind, empfiehlt es sich diese durch Anmerkungen an entsprechenden Stellen zu ergänzen.
Wir sehen also, Wireframes sollten so früh wie möglich zum Einsatz kommen, da sie ein gutes Fundament für den weiteren Design- und Development Prozess darstellen.
Was ist ein Mockup?
Ein Mockup wird nach einem Wireframe erstellt und basiert auf Informationen und Entscheidungen des UX Designers.
Ein Mockup könnte zum Beispiel wie im nachfolgenden Screenshot aussehen. Das Resultat sollte dabei selbsterklärend sein, sodass wir auf Anmerkungen verzichten können.
In dieser Phase kann es auch hilfreich sein UI Designer mit einzubinden, da wir dann den richtigen Einsatz von Design Tokens wie Abständen, Farben, Typographie usw. gewährleisten.
Mockups sind also eine statische Darstellung eines User Interfaces mit mehr Details und weniger Abstraktion als es noch bei Wireframes der Fall war.
Wann nutze ich was?
Es gibt einige allgemeine Probleme, die entweder mit einem Wireframe oder einem Mockup gelöst werden können. Schauen wir uns aber mal an was wir konkret mit den jeweiligen Methoden lösen können.
Nutze Wireframes für
- die grobe Visualisierung von Ideen
- die Erstellung von Userflows
- das Zeigen von page layouts
- die Neuanordnung von Seitenelementen
Nutze Mockups für
- die Entscheidung eines Farbschemas
- die Verwendung der Corporate Identity
- das ausprobieren neuer Layouts
- das Zeigen von statischen User Interfaces
Wird immer beides benötigt?
Da sowohl Wireframes als auch Mockups unterschiedliche Ziele erfüllen und ihren Mehrwert in unterschiedlichen Bereichen bringen, ist es zu empfehlen beides zu erstellen.
Beide Methoden bieten sich außerdem sehr gut dazu an, um Lösungsansätze und Ideen durch Stakeholder evaluieren zu lassen. Somit ersparen wir uns dann vorab das Pixelschubsen eines perfekt ausgearbeiteten Layouts, falls es Änderungen gibt.
Das Validieren von Ideen und Lösungsansätzen sollte vor dem Schreiben der ersten Zeile Code passieren, da das Anpassen von Code meistens zeitintensiver ist, als kurz ein Wireframe oder Mockup anzupassen.
Von daher sage ich: Ja, wir sollten beides erstellen, immer auf dem aktuellsten Stand halten und vorab ausreichend Zeit in die Konzeption stecken um nicht erst in der Stakeholder Review zu erfahren, dass etwas falsch umgesetzt wurde.