Wireframes: why a website starts in grey boxes
Before colours and photos, a website gets its structure: simple grey layouts that show what goes where. What wireframes are, why they come first, and how they turn into the finished design.
Request an AI summary
The first thing clients see of their new website often surprises them: grey boxes, crossed-out placeholders where images will go, lines where text will be. No colours, no photos, no fonts. That’s on purpose.
These are wireframes, the floor plan of a website. They settle what goes where before anyone talks about how it looks.
1. Wireframes: what they are
A wireframe is a simplified sketch of a page. It shows:
- Which elements a page has: navigation, headline, text, images, buttons, forms.
- Their order and size: what comes first, what gets the most space.
- How pages connect: where each button and link leads.
It deliberately leaves out everything visual. A box with a cross means “an image goes here”. A few lines mean “a paragraph of text goes here”.
2. Grey: why no colours yet
Leaving out the design keeps the conversation on content and structure:
- Is everything there that visitors need? And is there anything nobody needs?
- Is the order right? Does the most important thing come first?
- Is the path clear? Can a visitor get from arriving to the goal, such as an enquiry, without getting lost?
As soon as colours and photos appear, the discussion naturally shifts to taste: “I’d prefer a different blue”. Those are important questions too, but they come later and work better on a solid structure.
3. Content: the structure follows it
Wireframes work best with real content, or at least realistic content. A headline that’s three words long in the sketch and twelve words in reality changes the layout. Planning content together with the wireframes, even as rough drafts, means the design is built around what will actually be on the page.
4. Mobile: the smallest screen first
Most wireframes start with the phone. A narrow screen forces decisions: there’s room for one column, so the order of elements has to be clear. The larger layouts for tablet and desktop then grow from that order, instead of squeezing a desktop page onto a phone afterwards.
5. Fidelity: from sketch to clickable
Wireframes come in different levels of detail:
- Low fidelity: quick sketches, on paper or as simple boxes, for exploring options.
- Mid fidelity: clean grey layouts with real headings and the actual page structure.
- Clickable prototypes: wireframes linked together in a design tool, so the flow can be tried out on a real phone before anything is built.
Which level is needed depends on the project. A simple landing page may go from a sketch straight to design; a web app with many screens benefits from a clickable prototype.
6. Feedback: changes while they’re still sketches
Feedback on wireframes is especially valuable. At this stage, moving a section, adding a page or changing the order of steps changes a sketch. The same change later touches the finished design and the code as well. That’s why this step gets time and attention, and why it’s worth involving everyone who has a say.
7. Design: from grey to finished
Once the structure is agreed, the design gives it a face: colours, typography, images, icons, spacing, motion. Because the structure is settled, the design can focus on mood and brand, and the finished pages keep the clarity the wireframes established.
The short version
- Wireframes are the floor plan of a website: what goes where, and how pages connect.
- Grey on purpose: the conversation stays on content and structure.
- Real content shapes the layout from the start.
- Mobile first: the narrowest screen sets the order.
- Fidelity ranges from sketches to clickable prototypes.
- Feedback is most valuable while it’s still boxes.
If you’d like to plan a website or app step by step, get in touch.