Von Franziska Becker publiziert am 14. Oktober 2016

Wireframes, Prototypes, Mockups – Wo liegt eigentlich der Unterschied?

Immer wieder zeigt sich, dass teilweise selbst Entwickler, Projektmanager oder Designer Wireframes, Prototypes und Mockups nicht unterscheiden können. Oft werden die Begriffe wild durcheinandergeworfen oder geglaubt, diese drei Dinge seien dasselbe – graue, gezeichnete, einfach gehaltene Boxen, die geniale Ideen darstellen und visualisieren.

Haben Sie zum Beispiel schon einmal von „klickbaren Wireframes“ gehört? Dies wäre nach der Bedeutung des Begriffes gleichzeitig ein Bauplan und ein Musterhaus. Während man in einem fertigen Musterhaus jedoch bereits herumlaufen kann, ist der Bauplan nur ein einfaches Blatt Papier mit Zahlen, Linien und Buchstaben. Eine Zusammenführung dieser ist also unmöglich.

Dieses Beispiel zeigt auf, wie wichtig es ist, die unterschiedlichen Bedeutungen der Begriffe zu verstehen. Sie sehen nicht nur verschieden aus, sondern dienen auch unterschiedlichen Zwecken.

Im Folgenden werden Ihnen die Begriffe erläutert, damit Sie diese drei Darstellungsformen in Zukunft hoffentlich besser unterscheiden können.

 

 

 wireframe.png

Was ist ein Wireframe?

Ein Wireframe ist ein sehr einfaches Abbild eines Designs. Es beinhaltet die Themenblöcke einer jeden Webseite (welcher Inhalt?), die Struktur von Informationen (wo wird etwas abgebildet?) sowie eine Beschreibung der User Interaction (wie funktioniert es?)

Wireframes sind also keine bedeutungslosen grauen Boxen. Sie sind eher eine Art Rückgrat des Designs und damit ein wichtiger Part des fertigen Produktes. Sie sollen helfen, die richtige Balance zwischen Designansprüchen und Schnelligkeit zu finden. Man kann und soll sich nicht an Details festbeißen, sondern einen soliden Grundstein für das spätere Design setzen. Es ist zentral, sich Gedanken über Struktur, Sinnhaftigkeit von Elementen und Anordnung zu machen. Wireframes können rasch erstellt werde, was aber nicht heißt, dass es hässlich sein muss – es darf und soll aber einfach gestaltet sein. Schwarz, grau und weiß bilden die Hauptfarben und Inhalte, Bilder, Icons oder bunte Farben sind fehl am Platz. Ein Wireframe stellt also die Basis der gesamten weiteren Arbeit dar und erleichtert Projektleitern, Kunden und Entwicklern die Logik und Struktur einer Webseite zu erfassen.

Vergleichen lässt sich ein Wireframe mit der Aufbauanleitung eines Ikea-Regals. Man weiß zwar dank der Anleitung, wie es später einmal aussehen soll, aber es wird nicht gezeigt, wie schön das Ganze am Ende tatsächlich in der Wohnung und mit Dekoration wirken kann.

 

Wann kommen Wireframes zum Einsatz?

Wireframes werden als Dokumentation eines Projektes genutzt. Da sie keine Interaktionen besitzen, sollten sie mit kurzen Notizen versehen werden. Diese sollen beschreiben, was wie funktionieren soll. Bei komplexeren Projekten ist auch eine technische Dokumentation hilfreich. Sie gewährleistet einen einfacheren und schnelleren Austausch zwischen Entwicklern und Projekt-Managern, wenn es beispielsweise um komplexere Abläufe bestimmter Prozesse geht.

Gute Wireframes zeichnen sich dadurch aus, dass sie effektiv die Inhalte und Platzierungen darstellen sowie das weitere Vorgehen und die Struktur klar aufzeigen.

 

 

 prototype.png

Was ist ein Prototype?

Ein Prototype ist eine nahezu fertige Abbildung des Produkts, welches das User-Interface und die Interaktion darstellt. Der User kann das Interface also bedienen und testen sowie die User Experience erleben.

Der Prototype muss zwar nicht genauso aussehen wie die Webseite, die schließlich online gestellt wird, sollte dem Ganzen aber schon nahekommen. Die ausgestaltete interaktive Version jedoch dient lediglich dazu, die User Interaction darzustellen. Sie ist noch keine fertige Webseite, die Verbindung zwischen Front- und Backend fehlt und der Prototype muss nicht programmiert werden. Mit Tools wie Invision oder Adobe Experience Design können Verknüpfungen zwischen Elementen erstellt werden. Dadurch entsteht ein klickbares Interface ohne Programmierung. Das reduziert die Kosten und beschleunigt die Entwicklung eines Prototypes.

 

Wann kommen Prototypes zum Einsatz?

Prototypes sind eine Simulation einer Webseite. Aus dieser Simulation wird ersichtlich, wie das Endprodukt später ungefähr aussehen und funktionieren soll. Der Kunde kann sich also durch den Prototype durchklicken und schon einmal „fühlen“, wie das finale Produkt werden wird, noch bevor die eigentliche Entwicklung begonnen hat.

Prototypes bieten eine einfache und greifbare Möglichkeit, dem Kunden ein klickbares Design zu zeigen, ohne viele Ressourcen in die professionelle und saubere Programmierung stecken zu müssen. Der Kunde kann sich vorstellen, wie sich ein User auf seiner Webseite bewegen wird, was mit einem Wireframe beispielsweise nicht möglich ist.

 

 

 

mockup.png

Was ist ein Mockup/Layout?

Ein Mockup ist das Design einer Webseite. Oft werden Mockups mit Wireframes verwechselt. Mockups sind jedoch das, was Designer klassischerweise für das Layout und Design verwenden.

 

Wann kommen Mockups zum Einsatz?

Ein Mockup zeigt dem Kunden den visuellen Part einer Webseite und dient dem Grafiker dazu, ein schnelles Feedback zur allgemeinen Optik einzuholen. Bei Änderungswünschen, können am Mockup rein visuelle Veränderungen vorgenommen werden. Die Struktur und Logik einer Webseite werden hingegen nicht im Mockup deklariert, sondern in Prototypes oder Wireframes.

Mockups können generell mit weniger Zeitaufwand erstellt werden als Prototypes. Sie sind visuell ausgearbeiteter, aber nicht klickbar. Im Gegensatz zum Wireframe ist ein Mockup detaillierter. Die allgemeine Struktur der Webseite wird jedoch aus den Wireframes ersichtlich.

 

Zusammenfassung

 

 

Realitätsnähe

Kosten

Zweck

Eigenschaften

Mittel

Wireframe

wenig

Dokumentation, schnelle Kommunikation

Scribble, Schwarz/Weiß/Grau, einfache Darstellung des Interfaces, statisch

Photoshop, Illustrator, Sketch, Balsamiq, OmniGraffle usw.

Prototype

mittel bis sehr

€€€

User-Testing, Nutzbares Rückgrat des Interfaces

Klickbar, aber noch nicht visuell ausgereift

Invision, Adobe Experience Design, Draft (+Sketch), usw.

Mockup

sehr

€€

Schnelles Feedback der Visualisierung

Statische Visualisierung, finales Layout der Webseite

Photoshop, Illustrator, Sketch usw.

 

Werden in jedem Fall Wireframes, Prototypes und Mockups erstellt?

Um diese Frage beantworten zu können, ist es ratsam, zunächst eine passende Art und Weise zu finden, den Designprozess zu beginnen. Dazu sollte man:

 

  1. herausfinden, was das Problem ist, das gelöst werden soll,
  2. die Zielgruppe kennen,
  3. das Budget und die Zeit in Betracht ziehen und
  4. das Ziel stets vor Augen haben.

 

Anschließend gilt es, anhand dieser vier Punkte zu entscheiden, welche Darstellungsformen für das Endprodukt benötigt und für das Team nützlich sein werden. Brauchen Sie nur eine formale Dokumentation? Oder ist eine grundlegende Nutzerforschung nötig? Soll es schon zu einem frühen Zeitpunkt eine Präsentation vor den Stakeholdern geben?

Natürlich können, sollten oder müssen in gewissen Fällen alle drei Formen entwickelt werden. In jedem Fall führen Wireframes, Prototypes und Mockups bei korrekter Ausführung Schritt für Schritt zu einem gut durchdachten und für den Kunden schlüssigem Ziel.