Wireframes vs Mockups

Die Begriffe "Wireframe" und "Mockup" werden häufig synonym verwendet oder verwechselt, was manchmal nicht nur zu Missverständnissen, sondern auch zu deutlichem Mehraufwand führen kann.

Wireframe

Ein Wireframe ist, wie die deutsche Übersetzung "Drahtgittermodell" vermuten lässt, meist eine schwarz-weiße Linienzeichnung, die der Konzeption der Navigation, Formen und Größen dient. Mit Wireframes wird vorrangig die Machbarkeit der Konzepte (intern) geprüft.
Akteur: Wireframes werden vorrangig vom Usability Engineer und/oder Interaction Designer erstellt.
Erscheinungsform: Wireframes sind einfach gehalten, um schnell und in großer Variationsvielfalt für viele Ansichten erstellt werden zu können. Probleme werden früh sichtbar und Alternativen können verglichen werden.

Mockup

Ein Mockup (zu deutsch "Attrappe") ist ein meist stark ausgearbeiteter farbiger Entwurf mit ansehnlichen Grafiken, der das fertige Produkt imitiert. Es dient vor allem der Präsentation (extern) gegenüber den Auftraggebern und als konkrete Vorlage für die visuelle Umsetzung.
Akteur: Mockups werden vorrangig vom Designer erstellt. Erscheinungsform: Mockups sind meist wesentlich aufwendiger in der Erstellung und werden daher oft nur für die wichtigsten Ansichten in geringer Variationsvielfalt erstellt.

Fazit

Wireframes sind schnell erstellt und prüfen früh, ob das eigene Konzept und Verständnis stimmt. Denn Platzprobleme, Überfrachtung und fehlende Steuerelemente fallen meist erst im konkreten Entwurf auf. Solche Mängel können dank Wireframes sehr früh und mit wenig Aufwand erkannt und behoben werden.

Verwechselt man den Begriff der Wireframes mit Mockups, so kann schnell viel Aufwand entstehen und die gewünschte Variationsvielfalt bleibt dann meist aus.

Irreführende Namen der Wireframing-Tools (wie z.B. Balsamiq Mockups, das ich persönlich für ein gut gelungenes Produkt halte) nähren die Verwechslung leider nur mehr. Da hilft ein erklärender Sloagan dann auch nicht viel: "Meet Balsamiq Mockups, our Rapid Wireframing Tool".