The three words get used interchangeably, and they’re not the same. Mixing them up is the most common reason website projects drag on: the client approves something believing they approved something else.
Wireframe: structure, no styling
A wireframe is the floor plan: gray boxes, placeholder text, no colors and no fonts. It only answers what goes on the page and in what order.
It’s made on paper, in Figma or on a whiteboard, and it’s made fast on purpose: if it looks pretty, the conversation drifts to colors while you still need to decide whether pricing goes before or after reviews.
What gets approved here: the order of information and which sections exist.
Mockup: how it will look
A website mockup is the wireframe dressed up: real colors, type, photos, spacing. It looks so much like the final site that many people think it’s done.
Nothing is clickable: it’s an image. That’s why it’s quick to change. Moving a block takes minutes; moving it once it’s coded takes hours.
What gets approved here: the visual identity and the final look.
Prototype: how it will feel
A website prototype is the mockups linked together: click “Services” and you land on the services screen. It’s still not a real site (no code, no database), but you can walk through it.
It catches what no document catches: a missing way back, a form three clicks from where it should be, a menu that makes no sense once you use it.
What gets approved here: the full journey, before any code.
The order, and why it matters
- Wireframe → decide what’s said and in what order.
- Mockup → decide how it looks.
- Prototype → check how it flows.
- Code → build it.
Each step costs more than the last. Swapping two sections in a wireframe takes five minutes; in a mockup, half an hour; once coded, half a day. That’s why the stages exist: they’re not bureaucracy, they’re the cheapest way to be wrong.
What happens if you skip one
No wireframe: the first meeting is spent on button colors before anyone decided whether the page needs that button.
No mockup: the client sees the design for the first time already coded, and any real change hurts in hours and money.
No prototype: navigation mistakes surface after launch, and those are the ones that cost customers.
When it can be shortened
For a one-to-five page site with a familiar structure (a service business, one page per service), the wireframe can be settled on a call and the prototype skipped. For a project with a catalog, filters, a dashboard or several languages, skipping the prototype is how projects run a month late. How the page structure itself gets decided is covered in website architecture and UX.
What I ask for before starting
You don’t need to bring any of this ready. What does save weeks: a list of your services in the order you want to sell them, the ten questions customers ask most on the phone, your real photos and, if you have them, links to two or three sites you like, saying what you like about each.
Here’s how a full project runs, from the first call to launch, with dates per stage and published prices.