Skip to content
Website glossary· Planning and building a site

What is a wireframe?

A wireframe is a simple, usually black-and-white sketch of a page’s layout that shows what goes where, before any visual design.

Why it matters for a small business site

It lets you agree on the content and its order (what the page must say, and in what sequence) cheaply, before time goes into colours, photos and code.

How to check yours

  1. List the questions a visitor arrives with, and check the wireframe answers them in that order.
  2. Make sure it has real headings and rough real text, not lorem ipsum.
  3. Sketch the phone layout too, not just the desktop one.

What good looks like

Boxes and labels for each section, real draft headlines, the main button marked, and a note on what each image should show.

Common mistakes

  • Debating colours and fonts at the wireframe stage.
  • Placeholder text everywhere, so nobody notices the words don’t exist yet.
  • Wireframing only the desktop layout.
  • Skipping it on a big site and finding missing pages during the build.
Put it into practice

Try it on a design of your own

SketchXFlow goes from a written brief straight to a full design, so you can judge the structure with real colours, fonts and words in place, then change sections by asking.

Try:
Not a page?LogoEmailVideo
Designs shared by the communitySee what people made — with the prompt behind each one →Featured onThe Design Tools