Ask five people on a product team what a “mockup” is and you may get five different answers. The words wireframe, mockup and prototype get used interchangeably in meetings, which causes real problems: a stakeholder expects a clickable demo and receives a grey box sketch, or a developer receives a beautiful screen and has no idea what happens when a button is tapped.
These three artifacts are not stages of polish on the same thing. Each one exists to answer a different question. Once you see it that way, choosing between them becomes straightforward.
The quick version
| Artifact | Question it answers | Fidelity | Interactive? |
|---|---|---|---|
| Wireframe | What goes on this screen, and how is it arranged? | Low | No |
| Mockup | What does it look like? | High (visual) | No |
| Prototype | How does it behave when someone uses it? | Varies | Yes |
Wireframes: structure before decoration
A wireframe is a deliberately plain layout. Grey boxes, placeholder rectangles where images go, simple lines for text, no brand colours, no photography, often no real typeface. That plainness is the point.
Wireframes exist to force conversations about hierarchy and content. Which element gets the most visual weight? What does someone need to see first? Is the primary action reachable without scrolling? Does this screen have three competing calls to action?
Stripping out colour and imagery is what makes these questions answerable. When a screen is already styled, feedback drifts toward surface details — “can that blue be darker?” — and away from whether the layout works at all. A wireframe keeps attention on the skeleton.
- Use a wireframe when: you are exploring several layout options, aligning on what belongs on a page, or discussing information architecture.
- Typical tools: pen and paper, a whiteboard, or any design tool used with a restricted grey palette.
- Common mistake: spending hours perfecting a wireframe. If it takes long enough to feel precious, you will resist throwing it away — and wireframes are meant to be disposable.
Mockups: the visual answer
A mockup is a static, high-fidelity representation of the final interface. Real colours, real typography, real spacing, real icons, ideally real content rather than placeholder text. It looks like a screenshot of something that does not exist yet.
The job of a mockup is to settle visual design decisions: brand expression, contrast, type scale, the visual weight of a primary versus secondary button, how dense the layout feels. It is also the artifact developers usually work from when building a screen, because it specifies the details a wireframe intentionally omits.
One caution: a mockup is persuasive precisely because it looks finished. Presenting one too early can shut down structural conversations that were not yet resolved. If layout is still genuinely open, share a wireframe first.
Prototypes: behaviour, not appearance
A prototype is the only one of the three that responds to input. You tap something and something happens. It links screens together into a flow, and that is where its value lies.
Certain problems are effectively invisible in a static image and obvious the moment someone tries to use the thing:
- A flow that takes seven steps when users expected three.
- A screen with no visible way back.
- A form that only reveals a critical requirement after submission.
- Navigation that makes perfect sense to its author and to nobody else.
Importantly, fidelity and interactivity are independent. A stack of paper sketches that a facilitator swaps by hand as a participant “taps” them is a legitimate prototype — a paper prototype — and it can expose flow problems on day one of a project. At the other extreme, a clickable prototype built from finished mockups can feel almost indistinguishable from a real app.
How they fit together in practice
A common sequence looks like this, though real projects loop backwards constantly:
- Sketch the flow. Map the screens a person passes through to complete a task, before drawing any single screen in detail.
- Wireframe the key screens. Agree on structure and content priority. Iterate cheaply.
- Build a low-fidelity prototype. Link the wireframes and put them in front of a few people. Fix flow problems while they are still cheap to fix.
- Design the mockups. Apply the visual system once the structure has stopped moving.
- Assemble a high-fidelity prototype. Validate the polished experience and hand it to engineering as a behavioural reference.
The economic logic behind this order is simple: changes get more expensive the further along you go. Moving a section in a wireframe costs a minute. Moving it in a mockup costs an hour of visual rework. Moving it in shipped code costs days.
Choosing the right one
When you are unsure which artifact to produce, ask what decision you are trying to unblock.
| If you need to… | Produce a… |
|---|---|
| Compare two layout ideas quickly | Wireframe |
| Get sign-off on brand and visual style | Mockup |
| Test whether people can complete a task | Prototype |
| Hand precise visual specs to developers | Mockup |
| Demonstrate an idea to stakeholders convincingly | High-fidelity prototype |
| Decide what content belongs on a page | Wireframe |
A note on communication
Whichever you share, state its fidelity out loud. “This is a wireframe — colours and copy are placeholders, I want your feedback on the layout” prevents an enormous amount of misdirected criticism. Equally, “this prototype only supports the happy path; error states are not built yet” saves a reviewer from reporting a bug that does not exist.
Design artifacts are communication tools first. Their value is measured by the quality of the decisions they enable, not by how impressive they look.
Conclusion
Wireframes answer what goes where. Mockups answer what it looks like. Prototypes answer how it behaves. Using the right one at the right moment saves rework, sharpens feedback and keeps teams arguing about the thing that actually matters at that stage.
If you would like to practise these skills with structured guidance, Cursa offers free courses in UX and UI design and graphic design that walk through the full process, from first sketch to interactive prototype.
