Mockup

Was bedeutet Mockup?

Als Mockup wird gemeinhin ein Prototyp bezeichnet. Dieser wird in aller Regel zu Testzwecken genutzt und bietet beispielsweise die Möglichkeit, neue Designs oder Funktionen eines Produktes zu testen, ehe dieses in die Produktion geht. Es handelt sich bei einem Mockup somit um eine visuelle Darstellung einer Sache, die vielfach schwierig zu visualisieren ist. Vielfach kommen Mockups zum Einsatz, um Kund:innen einen Überblick zu bieten oder Ideen und Konzepte vorzustellen. Ebenso haben Designer:innen damit die Gelegenheit, nachzuvollziehen, wie ein später fertiges Produkt aussehen kann.

Mockups kommen üblicherweise in der Softwareentwicklung zum Einsatz, ebenso aber auch in der Zahntechnik oder bei Architekt:innen. Doch auch bei der Erstellung und Gestaltung von Webseiten und Landingpages können Mockups nützlich sein.

Mockups für die Erstellung von Webseiten

Für die Gestaltung von Webseiten mit einer hohen Usability sind Mockups in vielen Fällen unerlässlich. Alleine in Hinsicht auf die UX und die Conversion Optimierung sind Mockups hilfreich und werden im Rahmen der Webseite-Erstellung vielfach von Agenturen erstellt, die mit dem Webdesign betraut sind. Als Vorstufe gelten oftmals Wireframes.

Mockup und Wireframe: Was ist der Unterschied?

Während es sich bei einem Mockup um eine visuelle Darstellung des Zustands handelt, sind Wireframes simpler aufgebaut und eher modellhaft zu verstehen. Mithilfe von Kästchen zeigen Wireframes an, an welchen Stellen Elemente einer Webseite ihren Platz finden sollen. Somit werden Mockups vornehmlich für die Gestaltung von Webseiten genutzt, Wireframes hingegen für die Gestaltung von mobilen Apps.

Zudem gibt ein Wireframe vornehmlich Auskunft über die Struktur einer Webseite oder Landingpage sowie App, während ein Mockup dabei auch Design-Elemente mit einbezieht.
Mockups bieten somit einen detaillierten Überblick über die Entwicklung einer Webseite oder auch App und bieten im Vergleich zu Wireframes oder auch dem Prototyping klare Vorteile. Kund:innen und Webmaster:innen haben damit die Gelegenheit, die Funktionalität einer Webseite vorab zu testen, ehe es zum Coding kommt.

Software für Mockup-Erstellung

Es gibt eine Vielzahl an Softwares und Tools, mit deren Hilfe Mockups erstellt werden können. Dazu zählen beispielsweise diese hier:

  • PowerPoint
  • Sketch
  • Axure
  • Adobe Photoshop
  • Figma
  • invision Studio
  • Omnigraffle

Vorteile, die Mockups bieten

  1. Mockups bieten direkt verschiedene Vorteile. Diese Aspekte zählen auf jeden Fall dazu:
  2. Mit Mockups lässt sich im Designprozess Zeit sparen – und damit auch Geld
  3. Mockups bieten eine ideale Lösung, um Webseiten und Apps zu visualisieren
  4. Mit Mockups lassen sich Fehler und Probleme vor der Erstellung von Prototypen erkennen