A wireframe is a structural drawing of a page: blocks, order, and labels, with little or no brand styling. A mockup is a static picture of how the page will look. A prototype is an interactive model that can be clicked to test a path. Web design uses them in that sequence so the offer and the path are agreed before colour is debated.
This is a process distinction, not a software review. UI vs UX is about the live site. Information architecture is the map these drawings implement.
What each artefact is for
| Artefact | Shows | Does not show | Use it to agree |
|---|---|---|---|
| Wireframe | Sections, headings, actions, and page order | Final type, colour, or photography | What the page must contain |
| Mockup | Visual hierarchy, brand, and imagery | Real behaviour or every screen width | How the page should look |
| Prototype | Clicks, menus, and a path through screens | Production performance or CMS behaviour | Whether the task can be completed |
A wireframe can be paper or a simple digital grid. Grey boxes are a feature. If the wireframe is already a polished poster, you skipped the structure conversation.
A mockup is still a picture. Approving a desktop mockup does not prove the homepage or a service page works on a phone.
A prototype can be low fidelity (clickable wireframes) or high fidelity (clickable mockups). It is not the website. Forms will not email a sales queue unless someone wired that.
Using the three artefacts in order
- List pages and tasks from the information architecture
- Wireframe the homepage and one key service path
- Agree labels and the primary action before styling
- Apply brand in mockups once the structure holds
- Prototype the enquiry path on a phone and walk it without help
What goes wrong when they are mixed
Starting in a visual tool produces mockups that look finished and still miss a contact path. Clients then argue about a blue they were never asked to confirm, while the page map is empty.
Treating a prototype as a specification without notes leaves developers guessing hover states, empty lists, and error text. Write the exceptions. The artefact is a conversation, not a contract by itself.
Skipping wireframes on a five-page site can be fine if the page list is written and the first mockup is still checked against tasks. Skipping them on a site with many services usually means the header is invented in pixels and then will not fit.
A practical example
A team presents three full-colour homepage options in the first workshop. The client picks a photograph. Two weeks later nobody can find the quotation path on a phone. The recovery is a one-page wireframe of heading, proof, and action, a click-through of Home to Service to Form, then a single mockup that reuses the chosen photograph. The unused visual options are archived.
Key takeaways
- Wireframe = structure. Mockup = appearance. Prototype = behaviour.
- Agree content and path before polish.
- A picture is not a phone test.
- A prototype is not the CMS, the form inbox, or the live site.
FAQ
Do small sites need all three?
They need the thinking. A sketched wireframe and a clickable mockup are enough when the site is short and the path is one enquiry.
Who signs off each stage?
Someone who owns the offer signs the wireframe (content and path). Someone who owns the brand signs the mockup. Someone who will use the site walks the prototype.
Is a Figma file a prototype?
It is a prototype when links between frames can be walked as a task. A single artboard exported as a PNG is a mockup.