Designer wie Entwickler sollten den Unterschied kennen

Wireframes und Prototypes – was ist der Unterschied?
Kommentare

Wireframes und Prototypen sind nicht die gleiche Sache, und das sieht man eigentlich auf den ersten Blick – wenn man sich denn schon einmal damit befasst hat. Wo also liegen die wesentlichen Unterschiede? Wann erstelle ich einen Wireframe und wozu dient dann der Prototype? Marcin Treder hat auf sixrevisions.com einmal herausgestellt, was die wesentlichen Merkmale bzw. Unterschiede zwischen einem Wireframe und einem Prototype sind.

Wireframes – das Rückrad eines Produkts

Ein Wireframe ist eine heruntergedampfte Repräsentation eines Produktdesigns, die im wesentliche drei Dinge wiedergibt: Die Hauptgruppen an Informationen, das Layout bzw die Struktur dieser Informationen und die Kernvisualisierung und Beschreibung der Userface-Interaktionen. Man könnte ein Wireframe etwa mit der Blaupause eines Hauses vergleichen, es sagt nicht mehr und nicht weniger aus, als was wohin gehört.

Visuell gesehen sind Wireframes sehr beschränkt, im Wesentlichen wird auf Boxen, Linien und Platzhaltern für Bilder, Videos etc. in Grauabstufung zurückgegriffen. Die Graustufen verdeutlichen dabei die visuelle Hierarchie der Designelemente. Eine Schippe drauflegen kann man mit interaktiven oder klickbaren Wireframes, die bereits Funktionalitäten veranschaulichen, wie etwa, was passiert wenn man einen Button klickt. Das macht sich besonders in Präsentationen des Designs vorm Kunden gut.

Vorteile und Nachteile von Wireframes

Wireframes sind einfach und schnell zu erstellen, besonders wenn man entsprechende Software zur Hand nimmt, und ermöglichen so schnelles Feedback in der frühesten Erstellungsphase.

Gerade weil sie so minimalistisch gehalten sind und Ästhetik zu diesem Zeitpunkt noch keine Rolle spielt, kann der Fokus auf Funktionalität, Informationsarchitektur, User Experience, Usability etc. gehalten werden. Änderungen können hier noch gemacht werden, bevor eine Zeile Code geschrieben wurde.

Wireframes können für Laien aber mitunter schwer deutbar bzw. nicht anschaulich genug sein, da sie im Grunde erstmal nichts über das finale Design aussagen. Ausführliche Erläuterungen werden nötig.

Prototypen – der Interface-Klon

Prototypes sind mittel bis hochaufgelöste Repräsentationen des finalen User Interfaces, die darauf ausgelegt sind, die Interaktion zwischen User und Interface zu simulieren. Hier liegen Interaktion und Klickbarkeit an erster Stelle: Wenn etwas geklickt wird, muss die geplante Aktion ausgeführt werden, um so den Erfahrungswert eines fertigen Produkts nachzustellen.

Im Gegensatz zu Wireframes sind Prototypes ästethisch gesehen bereits sehr nah am Endprodukt angelehnt. Ihnen fehlt im Grunde noch die Infrastruktur hinter dem Interface, aber das Farbschema, der Hauptcontent, die Typografie, die Informationsarchitektur etc. sind bereits in einem relativ finalen Maß präsent.

Vorteile des Prototype

Prototypes eignen sich für Tests am Enduser. Indem der User die grundlegenden Use Cases durchspielt, kann ermittelt werden, ob ein Interface verstanden wird, und ob es sich logisch erschließt. So kann Zeit und Geld gespart werden, wenn man bereits vor der Entwicklung Fehlkonstruktionen im Interface ermittelt.

Prototypes können ebenfalls von Designern erstellt werden, auch hier wird also keine Zeile Code erforderlich.

Tipps:

  • Wiederverwendbare und bearbeitbare Elemente im Wireframe-Prozess können später im Prototyping-Prozess wieder genutzt werden. Viele Softwareangebote dienen sowohl für Wireframes als auch Prototypes.
  • Das Wireframe sollte immer den aktuellsten Entwicklungs- bzw. Feedbackstand wiedergeben.
  • Software kann nur zu eurem Vorteil sein.

Im ausführlichen Blogpost Wireframes vs. Prototypes: What’s the Difference? von Marcin Treder findet ihr noch eine Auflistung verfügbarer Software zum Erstellen von Wireframes und Prototypes.

 

Aufmacherbild: Flat design modern vector illustration concept of search von Shutterstock / Urheberrecht:bloomua

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -