--- title: "Mockup" url: "https://www.insideuxdesign.com/de/glossar/mockup" language: "de" description: "Was ist ein Mockup? Einfach erklärt mit Abgrenzung zu Wireframe und Prototyp, Beispiel und Praxistipps. Lies, wann ein Mockup im Projekt sinnvoll ist." published: "2026-10-14T15:20:23+02:00" updated: "2026-10-14T15:20:23+02:00" --- # Mockup Ein Mockup ist ein statischer, visuell detaillierter Entwurf einer Website oder App. Es zeigt, wie das fertige Produkt aussehen soll, lässt sich aber noch nicht bedienen. - **Buchstabe:** M - **Englischer Begriff:** Mockup UX-Glossar · engl. Mockup # Mockup Ein Mockup ist ein statischer, visuell detaillierter Entwurf einer Website oder App. Es zeigt, wie das fertige Produkt aussehen soll, lässt sich aber noch nicht bedienen. Stell dir vor, eine Bäckerei lässt ihre Website neu gestalten. Nach zwei Wochen bekommt die Inhaberin eine Datei: Die Startseite ist darauf zu sehen, mit dem echten Logo, den Hausfarben, Fotos von Brötchen und dem Schriftzug „Jetzt vorbestellen“. Sie ist begeistert und klickt auf den Button. Nichts passiert. Kein Fehler: Sie schaut auf ein Mockup. ## Einfach erklärt Ein Mockup ist ein statischer Entwurf, der zeigt, wie eine Website oder App später aussehen soll. Farben, Schriften, Bilder, Abstände und Texte sind weitgehend festgelegt. Bedienen lässt es sich aber nicht. Es ist ein Bild des Produkts, nicht das Produkt. Ein Vergleich aus dem Alltag: Beim Küchenkauf bekommst du oft eine fotorealistische Ansicht deiner neuen Küche, mit den gewählten Fronten und Griffen. Du siehst, wie alles wirkt, kannst aber noch keine Schublade öffnen. Genau das leistet ein Mockup. Im Fachjargon heißt es, ein Mockup hat eine hohe visuelle *Fidelity*, also Detailtreue. Hersteller wie Figma und Sketch beschreiben es entsprechend als ausgearbeitete, hochaufgelöste Darstellung des späteren Produkts. ## Wireframe, Mockup, Prototyp: der Unterschied Die drei Begriffe werden oft durcheinandergeworfen. Eine einfache Faustregel hilft: - **Ein [Wireframe](https://www.insideuxdesign.com/de/glossar/wireframe) zeigt die Struktur.** Wo steht was, wie hängen die Seiten zusammen? Meist in Grautönen, ohne echte Gestaltung. - **Ein Mockup zeigt das Aussehen.** Wie wirkt die Seite mit Farben, Schriften und Bildern? Statisch, ohne Interaktion. - **Ein [Prototyp](https://www.insideuxdesign.com/de/glossar/prototyp) zeigt das Verhalten.** Was passiert beim Klicken, Tippen oder Wischen? Er lässt sich ausprobieren, grob oder detailliert. In der Praxis sind die Grenzen fließend. In Tools wie [Figma](https://www.insideuxdesign.com/de/ressourcen/figma) wird aus einem Mockup mit ein paar Verknüpfungen schnell ein klickbarer Prototyp. Wichtig ist deshalb weniger der Name als die Frage, was du mit dem Entwurf prüfen willst. Damit Mockups über viele Screens einheitlich bleiben, lohnt sich ein [Design System](https://www.insideuxdesign.com/de/glossar/design-system). Mehr dazu im Artikel [Design Systems für kleine Teams: Wann es sich lohnt und wie du klein anfängst](https://www.insideuxdesign.com/de/blog/design-systems-fuer-kleine-teams). ## Ein Beispiel Zurück zur Bäckerei. Vorher: Die Agentur schickt direkt Mockups. Erst beim Durchsehen fällt auf, dass die Vorbestellung drei Seiten tief versteckt ist. Alle Entwürfe müssen neu gestaltet werden. Nachher: Beim nächsten Projekt stimmt die Agentur zuerst ein Wireframe ab, auf dem die Vorbestellung prominent auf der Startseite liegt. Danach entsteht das Mockup, über das nur noch Farben, Fotos und Texte besprochen werden. Für den Bestellablauf baut das Team zusätzlich einen kleinen Prototyp und lässt drei Menschen aus der Stammkundschaft damit bestellen. ## In der Praxis - **Erst Struktur, dann Optik.** Kläre Aufbau und Abläufe im Wireframe. Sonst diskutiert das Team über Farben, obwohl die Navigation noch nicht steht. - **Sag klar, was es ist.** Schreib dazu, dass ein Mockup nicht klickbar ist. So vermeidest du Verwirrung bei Kundschaft und Auftraggebenden. - **Nutze echte Inhalte.** Platzhaltertexte und perfekte Stockfotos täuschen. Mit echten Texten und Bildern siehst du früh, ob Überschriften zu lang oder Fotos zu dunkel sind. ## Verwandte Begriffe [Wireframe](https://www.insideuxdesign.com/de/glossar/wireframe), [Prototyp](https://www.insideuxdesign.com/de/glossar/prototyp), [Design System](https://www.insideuxdesign.com/de/glossar/design-system) ## Quellen - [Figma: Wireframe vs. mock-up: what’s the difference? Figma Resource Library](https://www.figma.com/resource-library/wireframe-vs-mockup/) - [Sketch: Wireframe vs mockup vs prototype: What’s the difference? Sketch Blog, 2022](https://go.sketch.com/blog/wireframe-vs-mockup-vs-prototype/) - [Kara Pernice: UX Prototypes: Low Fidelity vs. High Fidelity. Nielsen Norman Group, 2016](https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/) ## Weitere Begriffe [ ### A/B-Test Ein A/B-Test ist ein Experiment, bei dem zwei Varianten einer Seite oder eines Elements gleichzeitig an zufällig aufgeteilte Besuchende ausgespielt werden. So entscheidest du anhand echter Daten, welche Variante besser funktioniert. ](https://www.insideuxdesign.com/de/glossar/a-b-test) [ ### ARIA ARIA ist ein W3C-Standard, der HTML um Rollen, Zustände und Eigenschaften ergänzt. So erfahren Screenreader, was ein Element ist und wie es sich gerade verhält. ](https://www.insideuxdesign.com/de/glossar/aria) [ ### Affordance Eine Affordance beschreibt, welche Handlung ein Objekt möglich macht und ob Menschen das erkennen: Ein Button lädt zum Drücken ein, ein Griff zum Ziehen. ](https://www.insideuxdesign.com/de/glossar/affordance) [ ### Alternativtext Ein Alternativtext ist eine kurze Textfassung eines Bildes im HTML-Attribut alt. Screenreader lesen ihn vor, damit Menschen, die das Bild nicht sehen, dieselbe Information bekommen. ](https://www.insideuxdesign.com/de/glossar/alternativtext) [ ### Arbeitsgedächtnis Das Arbeitsgedächtnis hält Informationen für kurze Zeit fest, damit du mit ihnen arbeiten kannst. Es fasst nur wenig, deshalb sollten Interfaces möglichst wenig Merkarbeit verlangen. ](https://www.insideuxdesign.com/de/glossar/arbeitsgedaechtnis) [ ### Atomic Design Atomic Design ist eine Methode, Benutzeroberflächen aus kleinen, wiederverwendbaren Bausteinen aufzubauen: von einzelnen Elementen wie Buttons bis zu ganzen Seiten. ](https://www.insideuxdesign.com/de/glossar/atomic-design) [ ### BFSG Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet seit dem 28. Juni 2025 viele Unternehmen, bestimmte Produkte und digitale Dienstleistungen wie Onlineshops barrierefrei zu gestalten. ](https://www.insideuxdesign.com/de/glossar/bfsg) [ ### Barrierefreiheit Barrierefreiheit bedeutet, dass Websites, Apps und digitale Dokumente so gestaltet sind, dass alle Menschen sie nutzen können, auch mit einer Seh-, Hör-, motorischen oder kognitiven Behinderung. ](https://www.insideuxdesign.com/de/glossar/barrierefreiheit) [ ### Card Sorting Card Sorting ist eine Research-Methode, bei der Menschen Begriffe auf Karten in Gruppen sortieren. So siehst du, wie sie Inhalte gedanklich ordnen, und kannst eine verständliche Navigation planen. ](https://www.insideuxdesign.com/de/glossar/card-sorting) [ ### Cognitive Load Cognitive Load ist die geistige Anstrengung, die nötig ist, um eine Oberfläche zu verstehen und zu bedienen. Je weniger unnötige Denkarbeit ein Design verlangt, desto leichter fällt die eigentliche Aufgabe. ](https://www.insideuxdesign.com/de/glossar/cognitive-load) [ ### Contextual Inquiry Contextual Inquiry ist eine Research-Methode, bei der du Menschen in ihrem echten Arbeitsumfeld beobachtest und befragst. So siehst du, wie sie Aufgaben tatsächlich erledigen, nicht nur, wie sie davon erzählen. ](https://www.insideuxdesign.com/de/glossar/contextual-inquiry) [ ### Conversion Eine Conversion ist eine gewünschte Aktion auf einer Website oder in einer App, etwa ein Kauf oder eine Anmeldung. Die Conversion Rate zeigt, welcher Anteil der Besuche dazu führt. ](https://www.insideuxdesign.com/de/glossar/conversion)