Three stages of a page design
| Stage | What it shows | What you approve |
|---|---|---|
| Wireframe | Boxes, labels and the order of sections | Structure and priorities |
| Mockup | Final colors, type, photos and copy | The look and the words |
| Prototype | Clickable screens that act like the site | How it behaves before anyone writes code |
What to check in a mockup
- Does the first screen say what you do, clearly?
- Do the photos show your real team and work?
- Is the main button the same color everywhere?
- Can you read the text against its background?
- Does the phone version keep the phone number visible?
A mockup is where brand and usability meet. It is also the last cheap moment to change your mind, since the next step is code.
Why the order matters
Jumping straight to mockups mixes two debates. People argue about colors while the page still lacks a pricing section. Settling structure in wireframes first keeps mockup reviews about the look.
Good example. A law firm approves wireframes for its home and practice area pages, then reviews mockups that only change style and wording.
Bad example. A law firm sees polished mockups first, decides it needs attorney profiles on every practice page and sends the design back to the start.
How mockups become a site
Most modern sites build mockups from a design system, a set of reusable components and styles. That keeps every page consistent and makes the build faster. Read what a design system is.
Our web design projects show you wireframes, then mockups for phone and desktop, before we write any code.