Was ist ein Mockup?

Erklärung

Ein Mockup ist ein konzeptionelles Hilfsmittel bei der Erstellung von Websites. Mit Hilfe eines Mockups werden die verschiedenen Elemente und Inhalte einer Website geplant und häufig bereits mit Farben, Bildern und typografischen Elementen recht detailliert ausgestaltet. Ein Mockup ähnelt somit stark dem fertigen Produkt, weshalb es zu den Middle- bis High Fidelity-Protypen gezählt wird und gerne in Präsentationen eingesetzt wird.

Häufig wird das gestaltete Produkt direkt im späteren Nutzungskontext gezeigt. Das Layout einer Website wird beispielsweise auf dem Bildschirm eines Computers oder Smartphones präsentiert. Zu diesem Zweck existieren zahlreiche sog. Mockup Templates.

Mockup vs. Wireframe vs. Clickdummy …

Für gewöhnlich ist ein Mockup statisch und nicht responsiv. Wenn die einzelnen Screens eines Mockups miteinander verknüpft werden, entsteht ein Clickdummy bzw. ein visueller Prototyp.

Mockups sind eng verwandt mit Wireframes. Beide Begriffe werden oft synonym verwendet, was jedoch nicht korrekt ist. Der Wireframe ist deutlich reduzierter als das Mockup und zählt daher zu den Low Fidelity-Prototypen. Im Webdesign-Workflow wird für gewöhnlich ein Mockup später als ein Wireframe erstellt.  Darüber hinaus sind sowohl Mockup als auch Wireframe klassische konzeptionelle Hilfsmittel. Clickdummies und visuelle Prototypen hingegen brechen die Grenze zwischen Konzeption und User Experience auf.