What is a mockup in UX?
A mockup in UX is a static, high-fidelity picture of a screen that shows the final look, including colors, type, images and layout, but not how it works.
also calledmock-up · visual comp · high-fidelity design · design comp
If a wireframe is the architect's floor plan, a mockup is the rendering you pin on the wall to see what the finished house will look like. It has the real colors, the real fonts and the real photos. You can judge it, but you cannot walk through the door yet.
- A mockup shows the final look of a screen but does not yet behave.
- It sits between wireframes, which fix structure, and prototypes, which add interaction.
- Use realistic content and include key states, not only the happy path.
- Settle structure first, because polished visuals attract feedback about surface details.
Where a mockup fits in the process
A typical path goes from sketches to wireframes to mockups to prototypes. Wireframes settle structure: what goes where. Mockups answer what it looks like: the brand colors, the typography, the icon style, the spacing. Prototypes then add behavior so you can click through.
The order is not sacred. Some teams skip wireframes for small changes, and others never produce a polished mockup for an internal tool. But the mockup stage is where the visual identity meets the structure, and where stakeholders usually have the strongest opinions.
What a good mockup contains
A good mockup looks like the real thing, so people judge it as the real thing. That means:
- Real, or at least realistic, content. Lorem ipsum hides problems like long names and awkward headlines.
- The actual type styles, color palette and components from your style guide or design system.
- Several states where they matter: empty, loading, error, filled.
- More than one screen size, so you know how the layout adapts.
Static does not mean careless. Designers often annotate the file with notes about spacing, behavior and edge cases that will not be obvious to the developer.
Mockup, wireframe and prototype: how to tell them apart
The words get mixed up constantly, so a quick rule helps. A wireframe is low-detail and about structure. A mockup is high-detail and about appearance, but static. A prototype is interactive and about behavior, and can be low or high fidelity.
In practice, tools blur the lines. In Figma you may design a mockup and link its screens into a clickable prototype in the same file. What matters is that your team shares the same vocabulary, or you will find yourself asking for a mockup and receiving a clickable demo.
Mistakes that waste a lot of time
The first is polishing too early. A beautiful mockup of the wrong flow is still the wrong flow, and it is harder to throw away because everybody has fallen for the look. Validate the structure before you make it pretty.
The second is feedback that gets stuck on surface details. Show a polished screen and people will talk about the shade of blue rather than whether the layout helps users. Frame the review: say what kind of feedback you want.
The third is handing over only the happy path, so developers meet missing states and invent their own.
When you need one and when you do not
Make mockups when you need approval on a visual direction, when developers need to build precisely, or when you want to test how a design feels with users. Skip or shrink them when you are still exploring, or when a design system already contains the components and you can assemble screens directly in a prototype.
Mockup: your questions, answered
What is a mockup in UX design?
It is a static, detailed visual representation of an interface. It uses final colors, typography, images and layout so stakeholders and developers can see what the finished product should look like, even though nothing is clickable yet.
What is the difference between a wireframe and a mockup?
A wireframe shows structure and content placement with little styling, usually in grey. A mockup adds the visual design: colors, fonts, imagery and spacing. Wireframes answer where things go, mockups answer how they look.
What is the difference between a mockup and a prototype?
A mockup is a static picture. A prototype lets you click or tap through screens to simulate how the product works. A mockup can become the visual basis of a prototype once screens are linked.
Which tools are used to make mockups?
Designers commonly use Figma and Sketch. Other tools exist, and the best choice depends on your team's platform, collaboration needs and the handoff process with developers.
Do I need a mockup for every screen?
Not necessarily. Mock up the key screens, unusual states and anything with new components. Once a design system exists, repetitive screens can be assembled from existing parts without a separate polished mockup.
More quick answers
What is a high-fidelity mockup?
It is a mockup that closely matches the final visual design, with real colors, type, images and content. It contrasts with low-fidelity sketches and wireframes.
Can you test a mockup with users?
Yes, but a static image limits what you learn. It works for first impressions and visual comprehension. For behavior and flow, link screens into a prototype.
What comes after a mockup?
Usually a prototype for testing, and then handoff to developers with specs, assets and notes.
Is a mockup the same as a design comp?
Largely, yes. "Comp" is short for composite and is the older print and web term for a visual draft shown to a client for approval.
How long does it take to make a mockup?
It depends on the complexity and how much of a design system already exists. A single screen can take a few hours, while a full set of states and sizes can take days.
A wireframe in UX is a simple, low-detail blueprint of a screen that shows layout, content placement and functionality before any visual styling is added.
A prototype in UX is an early, interactive model of a product that lets you test how it works and feels before spending time building the real thing.
Fidelity in UX describes how closely a design artifact, such as a sketch, wireframe or prototype, resembles the finished product in looks, detail and behavior.
Visual design in UX is the craft of shaping how a product looks, using color, type, imagery, layout and spacing to make it clear, usable and appealing.
Figma is a browser-based design tool where teams create interfaces, build prototypes and collaborate on the same file in real time.
A style guide in UX is a reference document that sets the visual and writing rules for a product, such as colors, fonts, spacing and tone of voice.
Found this useful? A GitHub star helps other designers find it.