--- title: "Mockup" url: "https://www.insideuxdesign.com/en/glossar/mockup" language: "en" description: "What is a mockup? A plain-language guide to mockups vs. wireframes and prototypes, with an example and tips. Learn when a mockup makes sense in a project." published: "2026-10-14T15:20:26+02:00" updated: "2026-10-14T15:20:26+02:00" --- # Mockup A mockup is a static, visually detailed design of a website or app. It shows what the finished product should look like, but you can’t interact with it yet. - **Buchstabe:** M - **Englischer Begriff:** Mockup UX glossary · engl. Mockup # Mockup A mockup is a static, visually detailed design of a website or app. It shows what the finished product should look like, but you can’t interact with it yet. Imagine a bakery getting its website redesigned. After two weeks, the owner receives a file showing the homepage with the real logo, the brand colors, photos of fresh rolls and a big “Pre-order now” label. She loves it and clicks the button. Nothing happens. It isn’t a bug: she’s looking at a mockup. ## Explained simply A mockup is a static design that shows what a website or app will look like later. Colors, fonts, images, spacing and copy are largely decided. But you can’t use it. It’s a picture of the product, not the product itself. Think of buying a new kitchen. You often get a photorealistic view of it, with the fronts and handles you picked. You can see how everything looks together, but you can’t open a drawer yet. That’s what a mockup does. In design jargon, a mockup has high visual *fidelity*, meaning a high level of detail. Tool makers such as Figma and Sketch describe it accordingly as a polished, high-fidelity representation of the final product. ## Wireframe, mockup, prototype: the difference The three terms often get mixed up. A simple rule of thumb helps: - **A [wireframe](https://www.insideuxdesign.com/en/glossar/wireframe) shows structure.** What goes where, and how do the pages connect? Usually in shades of gray, with no real visual design. - **A mockup shows appearance.** How does the page look with colors, fonts and images? Static, with no interaction. - **A [prototype](https://www.insideuxdesign.com/en/glossar/prototype) shows behavior.** What happens when you click, tap or swipe? You can try it out, whether it’s rough or detailed. In practice, the lines blur. In tools like [Figma](https://www.insideuxdesign.com/en/ressourcen/figma), a mockup quickly turns into a clickable prototype with a few links. So the label matters less than the question you want the design to answer. To keep mockups consistent across many screens, a [design system](https://www.insideuxdesign.com/en/glossar/design-system) pays off. You can read more in [Design Systems for Small Teams: When They Pay Off and How to Start Small](https://www.insideuxdesign.com/en/blog/design-systems-for-small-teams). ## An example Back to the bakery. Before: the agency sends mockups right away. Only during the review does anyone notice that pre-ordering is buried three pages deep. Every design has to be redone. After: on the next project, the agency first agrees on a wireframe that puts pre-ordering front and center on the homepage. Then the mockup is created, and the discussion is only about colors, photos and copy. For the ordering flow, the team also builds a small prototype and asks three regular customers to place an order with it. ## In practice - **Structure first, looks second.** Settle layout and flows in the wireframe. Otherwise the team argues about colors while the navigation still isn’t sorted. - **Say clearly what it is.** Note that a mockup isn’t clickable. That avoids confusion for clients and stakeholders. - **Use real content.** Placeholder text and perfect stock photos are misleading. With real copy and images, you see early whether headlines are too long or photos too dark. ## Related terms [Wireframe](https://www.insideuxdesign.com/en/glossar/wireframe), [Prototype](https://www.insideuxdesign.com/en/glossar/prototype), [Design System](https://www.insideuxdesign.com/en/glossar/design-system) ## Sources - [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/) ## More terms [ ### A/B Testing An A/B test is an experiment that shows two versions of a page or element at the same time to randomly split groups of visitors. It lets you decide with real data which version works better. ](https://www.insideuxdesign.com/en/glossar/a-b-testing) [ ### ARIA ARIA is a W3C standard that adds roles, states and properties to HTML. It tells screen readers what an element is and how it currently behaves. ](https://www.insideuxdesign.com/en/glossar/aria) [ ### Accessibility Accessibility means designing websites, apps and digital documents so that everyone can use them, including people with visual, hearing, motor or cognitive disabilities. ](https://www.insideuxdesign.com/en/glossar/accessibility) [ ### Affordance An affordance describes what action an object makes possible and whether people can recognize it: a button invites you to press it, a handle invites you to pull. ](https://www.insideuxdesign.com/en/glossar/affordance) [ ### Alt Text Alt text is a short text version of an image, stored in the HTML alt attribute. Screen readers read it aloud so people who can’t see the image get the same information. ](https://www.insideuxdesign.com/en/glossar/alt-text) [ ### Atomic Design Atomic Design is a method for building user interfaces from small, reusable building blocks, from single elements like buttons all the way up to complete pages. ](https://www.insideuxdesign.com/en/glossar/atomic-design) [ ### BFSG The BFSG, Germany’s Accessibility Strengthening Act, has required many companies since 28 June 2025 to make certain products and digital services, such as online shops, accessible. ](https://www.insideuxdesign.com/en/glossar/bfsg) [ ### Card Sorting Card sorting is a research method in which people sort terms written on cards into groups. It shows you how they mentally organize content, so you can plan navigation that makes sense to them. ](https://www.insideuxdesign.com/en/glossar/card-sorting) [ ### Cognitive Load Cognitive load is the mental effort it takes to understand and use an interface. The less unnecessary thinking a design demands, the easier the actual task becomes. ](https://www.insideuxdesign.com/en/glossar/cognitive-load) [ ### Color Vision Deficiency A color vision deficiency means someone has a harder time telling certain colors apart than most people. The most common type is red-green deficiency. ](https://www.insideuxdesign.com/en/glossar/color-vision-deficiency) [ ### Contextual Inquiry Contextual inquiry is a research method where you observe and interview people in their real work environment. It shows you how they actually get tasks done, not just how they describe it. ](https://www.insideuxdesign.com/en/glossar/contextual-inquiry) [ ### Contrast Ratio The contrast ratio describes how much two colors differ in brightness, such as text and background. WCAG requires at least 4.5:1 for normal text. ](https://www.insideuxdesign.com/en/glossar/contrast-ratio)