Wireframe vs. MockUp

Was ist eigentlich der genaue Unterschied zwischen einem Wireframe und einem Mockup? Bei der Entwicklung von Websites stößt man in der Konzeptionsphase wahrscheinlich auf beide Begriffe. Oft werden sie allerdings verwechselt oder sollen das selbe meinen: grobe Skizzen, Entwürfe oder Vorformen einer Website zur Konzeption, Veranschaulichung und Abstimmung mit dem Kunden. Dennoch gibt es grundlegende Unterschiede zwischen beiden Instrumenten:

Wireframe – function & layout

definition-wireframe

Zum Thema Wireframes habe ich bei der Vorstellung einiger webbasierter Tools schon ein bisschen was geschrieben. Es gibt keine vorgeschrieben Richtlinien, was ein Wireframe beinhalten muss oder nicht darf, über die meisten Punkte herrscht allerdings weitgehend Einigkeit.
Ein Wireframe fällt in das Aufgabenfeld eines User Experience Designers und beinhaltet im Gegensatz zu einem Mockup noch keine Farben, Typography, Bilder oder Grafiken. Es handelt sich um eine skizzenähnliche Beschreibung und Darstellung (Gittermodell) von Funktionen und Layout und setzt den Rahmen für die spätere Ausarbeitung des Designs. Wireframes dienen zudem auch zu einer ersten Überprüfung der Machbarkeit, des Navigationskonzepts und der Usability.
Der Detailgrad kann sich dabei von Projekt zu Projekt stark unterscheiden. Es sollte nur das Nötigste dargestellt werden, um die oben genannten Punkte zu erfüllen.

Variation: Ab und zu findet man Wireframes auch in Verbindung mit so genannten Mood Boards. Ein Mood Board soll mit Farben und Fotos den Stil und das “Gefühl” des fertigen Endprodukts vermitteln. In Kombination mit einem Wireframe kann man so in einigen Fällen das Erstellen von Mockups überspringen. Wer mehr über Mood Boards lesen will, dem empfehle ich den Artikel von Jakub Linowski über Wireframe Mood Boards.

Tools zum Erstellen von Wireframes: Diagramm-Software, z.B. OmniGraffle oder verschiedene Online Tools

MockUp – form, design & visual

unterschied definition wireframe mockup

Ein Mockup ist in der Webentwicklung im Prinzip der nächste Schritt nach dem Wireframing und baut auf dessen Struktur auf. Hier ist nun der Designer an der Reihe und darf mit Farben, Typography, Bildern und Grafikelementen arbeiten und so ein vorläufiges Design mit einzelnen visualisierten Elementen entwickeln. Der Detailgrad ist um einiges höher als in Wireframes und das Mockup sollte im besten Fall schon look and feel der fertigen Website vermitteln, stellt aber noch nicht das finale Design dar.

Ein MockUp bietet sich daher meist besser für Kundenpräsentationen an, da ein Wireframe über look and feel (meistens sehr wichtig für den Kunden) so gut wie nichts aussagt. Trotzdem sollte man sich in Acht nehmen und gut kommunizieren in welcher Entwicklungsphase sich der Entwurf befindet, da ein Mockup vom Kunden leicht als fast fertiges Produkt interpretiert werden könnte und dann oft Diskussionen über kleinste Details und Formulierungen beginnen.

Tools zum Erstellen von Mockups: gängige Grafikprogramme, wie z.B. Photoshop oder Fireworks


Häufig wird bei kleineren Projekten nur eines dieser Instrumente genutzt. Auch bei 37signals hat man sich dazu entschieden, die Erstellung eines Mockups in Photoshop einfach zu überspringen und gleich einen HTML/CSS-Prototypen zu bauen.
Die Erstellung eines Prototypen (auch Click-Dummy genannt) wäre der nächste Schritt im Entwicklungsprozess. Er ermöglicht bereits Interaktion und macht die Entwürfe so navigierbar. Viele Tools bieten mittlerweile auch die automatische Generierung eines Prototypen aus den Wireframes oder Mockups an.

Posted by

Ich heiße Niclas Hellberg, komme aus Hamburg und arbeite momentan als Interaction Designer bei XING und Traumhaftes Italien. href="http://twitter.com">Twitter