Homepage wireframe: plan the page before the design

Key takeaways

A homepage wireframe is a plain grey layout showing what goes on the page and in what order, with no colours, fonts or photos. Wireframing a homepage fixes the structure and places your real words, so visual design starts from an agreed plan instead of a series of opinions.

• Use greys only so the talk stays on structure.
• Put your real draft copy in, not placeholder text.
• Show both phone and desktop versions.
• Approve the wireframe before visual design begins.

What is a homepage wireframe for?

A homepage wireframe is for agreeing structure cheaply. It answers what appears, in what order and how much space it takes. Because it looks unfinished, people comment on the content and flow rather than on whether they like the colour blue, which is exactly the conversation you need at this stage.

• How to create a high-converting homepage for an SME
• Sketch your homepage on paper in 30 minutes
• Homepage message hierarchy: one main point, three supports

What should a homepage wireframe include?

Include every section with real headings and draft text, the main and secondary buttons, image positions with a note on what each should show, and the navigation. Mark what is proof, what is an action and what is explanation. Note any behaviour, such as which link goes where.

• Header with logo, menu and primary action.
• Hero with headline, subheadline, button and image note.
• Proof, services, process and closing sections.
• Link destinations for each button.
• Separate phone and desktop layouts.

• Homepage structure for a small business website
• Which homepage sections can you leave out?

What tool should you use?

Use whichever tool you already have. Figma is the common choice for designers and has a free tier, but a slide deck or a page in your website builder works too. The tool matters far less than keeping it plain. Avoid adding branding, because it restarts the conversation about taste.

• Mock up a homepage in Canva or Figma

How do you get a wireframe approved quickly?

Walk the decision-maker through it from a buyer's view, section by section, instead of emailing a file for comments. Ask three questions: does the order match what buyers ask, is anything missing and can anything go? Record the approval in writing, so that design does not reopen the structure later.

• Get a homepage signed off without a committee

When can you skip the wireframe?

You can skip it for a template build where you are keeping the section order, because the template is effectively your wireframe. Replace its demo text with real copy and treat that as the review. Keep the wireframe for custom designs, where structural changes later become costly.

• How to choose a homepage template that can convert

What does this look like in practice?

A pattern we see in design reviews: a stakeholder questions a section's place on the page only after seeing polished artwork, and a day of design work is redone. The same comment on a grey wireframe would have taken a minute to accommodate.

• See client work
• Website Design & Development for UK businesses

Homepage wireframe checklist

• Keep everything greyscale.
• Use real draft copy throughout.
• Show image intent in a short note.
• Mark where each button leads.
• Include a phone layout.
• Review it from the buyer's point of view.
• Record the approval in writing.

• Sketch your homepage on paper in 30 minutes
• How long does it take to create a homepage?

Next step

Take your sketch and turn it into a one-page grey wireframe with your draft words in place. If a section looks thin, you have found where your message needs more work.