What is the difference between a wireframe, a mockup and a prototype?
A wireframe is a plain sketch of a page's layout, a mockup shows the real look, and a prototype is a clickable version. Each stage settles different decisions.
When a website is designed, it usually moves through stages, from rough to finished. Each stage asks you to decide different things. Knowing which stage you are looking at helps you give the right feedback at the right time.
The three stages
| Stage | What it looks like | What it settles |
|---|---|---|
| Wireframe | A plain gray sketch with boxes and lines. Little or no color, and often placeholder text. | What goes on each page and in what order. |
| Mockup | A still picture of the finished design, with your colors, fonts, photos and real words where possible. | How the site looks and feels. |
| Prototype | A clickable version you can move through, with working menus and buttons. It may not be connected to real data yet. | How the site works and how people get around it. |
Not every project uses all three. A small change may go straight to a mockup or a preview on a staging site.
What feedback helps at each stage
At the wireframe stage, focus on content and order:
- Is anything missing that customers need?
- Is the most important thing near the top?
- Are the pages in the menu the right ones?
Try not to worry about colors or photos yet. They come next.
At the mockup stage, focus on look and words:
- Does it feel like your business?
- Are the photos right? Are names, prices and hours correct?
- Can you read everything comfortably?
At the prototype or preview stage, focus on use:
- Can you find things in two or three taps?
- Does the form or booking button go where you expect?
- Does it work on your phone?
Why the order matters
A change is quick on a wireframe and slower later. Moving a whole section after a design is finished can mean redoing several pages. Saying "this section should come first" early saves time for everyone.
We can do this for you. When you review a stage, reply in your client portal with the page name and what should change. Our team will update it and show you the next version.
Common problems
- If a wireframe looks bland, that is on purpose. It is about layout, not looks.
- If you cannot tell which stage you are looking at, ask us. We will tell you what kind of feedback helps most.
- If you have feedback from several people, gather it into one reply. Conflicting notes slow things down.
Related articles
More in Your website
Still need help?
Ask our team