# What is Wireframe?

> A wireframe is a simple black-and-white sketch of a web page's layout, showing where everything goes before any colours, photos or final wording are added.

- Source: https://nerdsharks.com/glossary/wireframe
- Publisher: Nerdsharks (Exeter, Devon, UK)
- Updated: 2026-09-26

Also called: mock-up, mockup, layout sketch, low-fidelity design.

Before designing how a website looks, designers often plan how it is organised. A wireframe is a skeleton: boxes for images, lines for text, rough buttons, all in grey.

It keeps the conversation on the important questions, such as what comes first, where the phone number sits and what the page is trying to get the visitor to do, without getting distracted by colours and fonts.

Some agencies show wireframes to clients for sign-off; others go straight to a full design. Either is fine, as long as the structure has been thought through.

## Why it matters for a small business

Changing a wireframe is quick and cheap. Changing a finished, coded website is slower and often costs extra. If you get to see a layout plan early, that is the moment to say ‘customers always ask about prices first, put that higher’.

**Example:** A wireframe for a roofer's homepage shows: headline and Call button, three service boxes, a strip of reviews, a map of areas covered and a quote form, all as grey boxes.