Mockup

Inhaltsverzeichnis

Was ist ein Mockup?

Unter einem Mockup wird allgemein ein Vorführmodell verstanden, mit dessen Hilfe eine Produktentwicklung präsentiert wird. In den Bereichen Softwareentwicklung und Webdesign beschreibt der Fachbegriff ein digitales Modell eines Programms, einer Internetseite oder einer App für Smartphones oder Tablets.

Das englische Wort Mockup bedeutet in der deutschen Übersetzung Attrappe, Modell oder Nachbildung. Der in einer frühen Phase eines Webentwicklungsprojekts vorliegende Entwurf dient einer bereits recht detaillierten Visualisierung der späteren Website bzw. der neuen App. Das Aussehen entspricht bereits weitgehend dem fertigen Produkt. Unter Umständen sind jedoch noch nicht alle Funktionen lauffähig.

Abgrenzung eines Mockups zu einem Prototyp und Wireframe

Ein in Aussehen und Funktionsumfang nahezu in der Endversion vorliegendes Modell wird als Prototyp bezeichnet. Während ein Prototyp immer ein funktionstüchtiger Entwurf der Website oder der App ist, steht bei einem Mockup der Präsentationszweck im Vordergrund. Eine echte Funktionalität muss nicht zwingend vorhanden sein. Ein Prototyp erlaubt die Simulation einer Interaktion mit einem User. Der Auftraggeber des Entwicklungsprojekts erhält die Möglichkeit, sich auf der entstehenden Internetseite oder in der neu programmierten App wie ein späterer Benutzer zu bewegen und die User Experience zu testen.

Bei einem Wireframe handelt es sich um ein sehr einfach gehaltenes Abbild des Aufbaus eines Webprojekts. Ein Wireframe zeigt die Themenblöcke einer Internetseite, die Informationsstruktur und eine grobe Beschreibung der Nutzerinteraktionen. Er ist weitgehend in den Farben Schwarz, Weiß und Grau gehalten und beinhaltet keine Farbgrafiken oder Bilder. Mit einem Wireframe wird der logische Aufbau einer Website verdeutlicht. Über eingetragene Notizen kann das Projektvorhaben dokumentiert werden.

Welche Vorteile bietet ein Mockup?

Mockups helfen primär dabei, Missverständnisse über die genauen Projektdetails zwischen Auftraggeber und Auftragnehmer zu vermeiden. Bereits während der Auftragserteilung helfen die Modelle, verschiedene Ansätze und Ideen zu veranschaulichen. Sie helfen allen Projektbeteiligten, das Pflichtenheft präzise und vollständig zu erarbeiten.

Während der Umsetzungsphase unterstützt ein Mockup die Qualitätskontrolle eines Webdesign- oder App-Entwicklungsauftrags. Das Modell ermöglicht eine fundierte Abstimmung zwischen dem Auftraggeber und dem Umsetzungsteam. Der Auftraggeber erkennt, ob die Entwicklungsarbeit seinen Vorstellungen und Anforderungen entspricht. Webentwickler, Programmierer und Grafikdesigner erhalten klaren Input, an welchen Stellen noch Änderungen in der Gestaltung der Website oder der App nötig sind.

Die Modelle decken daher Schwierigkeiten in der Umsetzung und Abweichungen von den Anforderungen frühzeitig auf. Dadurch werden umfangreiche Änderungen in einer späten Projektphase verhindert, wodurch Entwicklungszeit und -kosten optimiert werden.

Wie wird ein Mockup erstellt?

Die genauen Spezifikationen eines Mockups werden zwischen Auftraggeber und Auftragnehmer abgesprochen. Es gibt keine standardisierte Norm, in welcher Form das Modell aufgebaut wird. Häufig werden Mockups ohne Programmcode und ohne Funktionalität erzeugt. Dafür werden sie rein über Bildbearbeitungs-Tools dargestellt.

Tipp

Für Präsentationszwecke eigenen sich beispielsweise .ppt-Slideshows oder auch bearbeitbare Grafiken als .png-Datei. Entwürfe können gezippt per E-Mail verschickt werden. Mithilfe spezieller Softwarelösungen (z.B. Moqups) können Mockups bereitgestellt werden, in die bereits bestimmte Funktionen des Endprodukts integriert sind.