Wireframe vs mockup vs prototype: what is the difference?
A wireframe is a low-detail layout showing structure and content placement. A mockup is a static, high-fidelity visual showing how the design will look. A prototype is an interactive model showing how the design will work. Teams typically move from wireframes to mockups to prototypes, though prototypes can be built at any fidelity.
Why the difference matters
Designers, product managers, developers and clients often use the words wireframe, mockup and prototype interchangeably. That causes confusion: a client expecting polished visuals may be disappointed by grey boxes, while a developer handed a static mockup may have to guess how interactions should work. Understanding what each artefact is for helps teams choose the right one at each stage, set clear expectations and avoid wasted effort.
All three are tools for thinking and communicating, not ends in themselves. The goal is to answer questions as quickly and cheaply as possible before investing in development. Our post on UX deliverables covers these and other artefacts in the wider process.
At a glance
| Wireframe | Mockup | Prototype | |
|---|---|---|---|
| Main question | How is it structured? | How will it look? | How will it work? |
| Fidelity | Low | High | Low to high |
| Interactive | No | No | Yes |
| Typical time | Minutes to hours | Hours to days | Hours to days |
| Best for | Layout, content, flow decisions | Visual design and brand review | Testing and handoff |
| Main audience | Design and product team | Stakeholders and brand owners | Users, stakeholders and developers |
Wireframes
A wireframe is a simplified outline of a screen or page. It shows where content and controls go, how information is grouped and what the hierarchy is, usually using greys, boxes and placeholder text. Wireframes deliberately leave out colour, imagery and detailed typography so discussion stays focused on structure and content. They are quick to create and change, which makes them ideal early in a project.
- Decide what content and actions each screen needs
- Explore different layout options quickly
- Agree navigation and information hierarchy
- Discuss structure without debating colours
- Plan responsive layouts for different screens
Mockups
A mockup is a static, high-fidelity representation of how a screen will look. It includes real or realistic content, colours, typography, imagery and icons, often using components from a design system. Mockups help stakeholders evaluate the visual direction and brand fit, and they give developers precise visual specifications. Because they are static, they do not show how the design behaves. Our modern UI design guide covers the visual principles involved.
Prototypes
A prototype is an interactive model that lets people click, tap or navigate through a design. Prototypes can be low fidelity, linking wireframes together, or high fidelity, linking polished mockups with realistic transitions. They are essential for usability testing, because people can attempt real tasks, and for handoff, because developers can see intended behaviour. Our guides to prototype design and prototype usability testing go deeper.
A worked example
Imagine a team designing a doctor booking feature. They start with wireframes of three screens: choose a doctor, pick a time and confirm. Reviewing the wireframes, they realise patients want to see the next available slot before choosing a doctor, so they change the layout in minutes. Next, they link the wireframes into a low-fidelity prototype and test it with five patients, who struggle to find how to change the date. After fixing that, they create mockups with the clinic’s brand colours, photography and Arabic and English text. Finally, a high-fidelity prototype with realistic transitions is tested again and shared with developers, who can see exactly how each step should behave.
Each artefact answered a different question at the right time, and most problems were solved before any code was written.
How they fit together
- Sketch: Quick ideas on paper or a whiteboard.
- Wireframe: Agree structure, content and flow.
- Low-fidelity prototype: Test the flow with users early.
- Mockup: Apply visual design and brand.
- High-fidelity prototype: Test details and prepare for handoff.
- Build: Developers implement the design.
This sequence is common but not rigid. Some teams go straight from wireframes to high-fidelity prototypes using a design system; others prototype in code. The key is to match the artefact to the question you need answered.
Typical tools
- Paper and whiteboards: Fastest for early sketches and workshops.
- Figma, Sketch, Penpot: Wireframes, mockups and prototypes in one tool.
- Specialist prototyping tools: Complex interactions and device features.
- Code: Realistic prototypes with real data.
Most teams now create all three in a single design tool such as Figma, which reduces handoff between stages. Our Figma basics guide explains how.
Choosing the right artefact for your audience
| Audience | Usually most useful |
|---|---|
| Design and product team | Wireframes and low-fidelity prototypes |
| Executives and brand owners | Mockups and high-fidelity prototypes |
| Users in testing | Prototypes at the right fidelity |
| Developers | High-fidelity prototypes plus design system specs |
Showing the right artefact to the right people keeps feedback focused. Executives shown grey wireframes may comment on missing colour; users shown static mockups cannot attempt real tasks.
AI design tools blur these stages by producing interactive prototypes straight from a description. Our guide to Claude Design explains how one of them works.
Common mistakes
- Showing polished mockups too early, before structure is agreed
- Calling a static mockup a prototype
- Skipping user testing because mockups look finished
- Spending days on wireframes that only need minutes
- Handing static designs to developers without explaining interactions
Frequently asked questions
Is a wireframe the same as a mockup?
No. A wireframe shows structure with little visual detail; a mockup shows the final visual design.
Can a prototype be low fidelity?
Yes. Linking simple wireframes together creates a low-fidelity prototype, useful for early testing.
Do we always need all three?
Not always. Small projects may skip some steps, but structure, visuals and interaction all need to be thought through.
Which should we show to clients first?
Usually wireframes or low-fidelity prototypes to agree structure, followed by mockups for visual direction.
How long does it take to make each one?
Wireframes can take minutes to hours, mockups hours to days, and prototypes from hours to several days depending on fidelity.
Can developers build from wireframes?
Only for very simple screens. Most teams hand off high-fidelity designs or prototypes with a design system for accuracy.