NETPROFIT Werbeagentur Logo NETPROFIT Werbeagentur Logo
MNÜ

Lexikon Mockup

Was ist ein Mockup? Definition Mockup

Ein Mockup im Webdesign ist eine statische visuelle Darstellung einer Webseite oder App, die verwendet wird, um das Gesamtlayout, die Struktur und die Benutzeroberfläche vor der vollständigen Entwicklung zu präsentieren. Mockups sind für Webdesigner, Entwickler und Kunden unverzichtbar, da so Designideen, Nutzererfahrungen und Funktionalität der Webseite vorab visualisiert und diskutiert werden kann.

Ein Mockup ist ein High-Fidelity-Prototyp, also eine realistische Darstellung des visuellen Designs, Layouts und Inhalts einer Webseite oder mobilen App. Es wird in der Regel mit Grafikdesign-Software wie Adobe Photoshop, Sketch oder Figma erstellt und enthält statische Bilder jeder Seite oder jedes Bildschirms der Webseite oder App.

Inhaltsübersicht
/files/dateien/bilder/lexikon/mockup/mockup-visuelle-darstellung.png

Beispiele Mockup

Mockups können viele verschiedene Formen annehmen, darunter Wireframes, visuelle Designs, interaktive Prototypen und Usability-Tests.

  • Wireframes sind Low-Fidelity-Modelle, die das grundlegende Layout und die Inhaltsstruktur einer Webseite oder App zeigen.
  • Visuelle Designs sind High-Fidelity-Modelle, die das Farbschema, die Typografie und die visuellen Elemente der Webseite oder App enthalten.
  • Interaktive Prototypen ermöglichen es Benutzern, mit der Webseite oder App auf eine Weise zu interagieren, die deren Funktionalität simuliert.
/files/dateien/bilder/lexikon/onpage/responsive-design.png
Beispiel für ein Mockup NETPROFIT-Seite

Best Practice für effektive Mockups Mockup

1
Anforderungen und Bedürfnisse der Kunden

Vor der Erstellung von Mockups ist es wichtig, ein klares Verständnis der Kundenziele, der Zielgruppe und der funktionalen Anforderungen zu haben.

2
Low-Fidelity-Wireframes

Wenn Sie mit Low-Fidelity-Wireframes beginnen, können Sie sicherstellen, dass das grundlegende Layout und die Struktur der Webseite oder App korrekt sind, bevor Sie mit detaillierteren Designarbeiten fortfahren.

3
Konsistentes Designsystem

Die Verwendung eines konsistenten Designsystems, z. B. eines Rasters oder einer Stilanleitung, kann dazu beitragen, dass alle visuellen Elemente der Webseite oder App konsistent und kohärent sind.

4
Echte Inhalte verwenden

Die Verwendung realer Inhalte anstelle von Platzhaltertext oder Bildern kann dazu beitragen, ein realistischeres Bild davon zu erhalten, wie die Webseite oder App aussehen und sich anfühlen wird.

5
Testen und Iterieren

Das Testen und Iterieren von Mockups mit echten Benutzern kann helfen, Usability-Probleme zu identifizieren und sicherzustellen, dass die Webseite oder App die Ziele und Benutzeranforderungen des Clients erfüllt.

Der Begriff „Mockup“ stammt aus dem Englischen und bedeutet so viel wie „Modell“ oder „Attrappe“. In der Produktentwicklung wird er auch außerhalb des Webdesigns verwendet, zum Beispiel für Prototypen von physischen Produkten.

Vorteile Mockup

Die Verwendung von Mockups im Designprozess bringt einige Vorteile mit sich:

  • Mockups ermöglichen es Designern, Entwicklern und Kunden, die Designideen und die Funktionalität einer Webseite oder mobilen App zu visualisieren und zu diskutieren, bevor sie vollständig entwickelt ist.

  • Sie können außerdem helfen, Usability-Probleme früh im Designprozess zu erkennen, was Zeit und Ressourcen spart.

  • Ein weiterer zentraler Vorteil der Verwendung von Mockups ist, dass sie sicherstellen, dass die Webseite oder App die Ziele und Bedürfnisse des Kunden erfüllt.

Nachteile Mockup

Doch es gibt, neben den oben genannten Vorteilen, auch einige negative Punkte, die beachtet werden sollten:

  • Ihre Erstellung kann zeitaufwendig und kostspielig sein, insbesondere wenn mehrere Iterationen erforderlich sind.

  • Mockups repräsentieren möglicherweise nicht vollständig die Funktionalität der Webseite oder App, was zu Missverständnissen zwischen Designern, Entwicklern und Kunden führen kann.

  • Außerdem können sie die Kreativität und Innovation einschränken, indem sie Designer zu vorgefassten Vorstellungen über das Aussehen und die Funktionsweise der Webseite oder App zwingen.

FAQ Häufige Fragen zu Mockups

Was genau ist ein Mockup?

Ein Mockup (dt. Nachbildung) ist eine statisch visuelle Darstellung einer Webseite bzw. ein digital gestalteter Entwurf einer Webseite. Ein Mockup wird dazu verwendet, um die Funktionen, das Layout und das Design einer Webseite in der Konzeptionsphase zu präsentieren.

Warum braucht man ein Mockup?

Ein Mockup im Bereich Webdesign wird vor allem zu Testzwecken verwendet bzw. um den Kunden eine Vorstellung der fertigen Seite zu liefern.

Quellen, weiterführende Links

Suche
Home
Anrufen
Kontakt
nach oben
insert coin
Katzen YouTube Thumbnail

Mit dem Aufruf des Videos erklären Sie sich einverstanden, dass Ihre Daten an YouTube übermittelt werden und Sie die Datenschutzerklärung akzeptieren.