By A10 Digital. Published .
A wireframe is a simple outline of a web page that shows what goes where, without colour, photography or finished wording. It is to a website what a floor plan is to a house: the layout is agreed before anyone chooses the paint.
What does a wireframe show?
- The order of the sections on the page.
- Where the heading, text, images and buttons sit.
- What the visitor is asked to do, and where.
- How the layout changes on a phone.
What is the difference between a wireframe, a mockup and a prototype?
| Wireframe | Mockup | Prototype | |
|---|---|---|---|
| Shows | Layout and order | The finished look | How it behaves when used |
| Detail | Boxes and labels | Colour, type and images | Clickable pages |
| Answers | Is everything in the right place? | Does it look like us? | Does it work? |
Why do web designers use wireframes?
Because moving a box is quick and rebuilding a finished page is not. A wireframe lets everyone agree what a page needs to do before time is spent on how it looks. It also keeps attention on the visitor’s route to an enquiry, which is the concern of conversion rate optimisation.
Does every website need wireframes?
The more pages do different jobs, the more they help. A five-page site may need only one or two. A shop or a site with a booking system benefits from planning every step.
What comes after the wireframe?
Design, then build. When the wireframes are for a rebuild of an existing site, the page plan behind them also shows which old pages are moving, and each of those needs a 301 redirect.
Related service: web design agency from A10 Digital.