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 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 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, 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 pays off. You can read more in Design Systems for Small Teams: When They Pay Off and How to Start Small.
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, Prototype, Design System