Sketch your homepage on paper in 30 minutes

Key takeaways

To sketch a homepage layout, draw a tall phone-shaped column on paper and add one box per section, in the order buyers ask their questions. It takes about 30 minutes, costs nothing and shows whether your plan makes sense before you open a tool or pay for design time.

• Start with paper: 30 minutes and no design skill needed.
• Draw the phone version first, as a single column.
• One box per section, labelled with its job.
• Try three different orders before choosing one.

Why sketch a homepage before using any software?

Sketching is fast and easy to throw away, which is the point. People defend polished work but happily scribble over a paper sketch. It keeps attention on what appears and in what order, rather than on fonts and colours, and it lets non-designers join in without feeling they need any skill.

• How to create a high-converting homepage for an SME
• Homepage wireframe: plan the page before the design

What should you draw first?

Draw the top section first, because it carries the most attention. Add a box for the headline, one for the subheadline, one for the button and one for the image. Then ask what a visitor's next question would be, and draw the box that answers it. Repeat until no question is left.

• Homepage hero section: the five parts that convert
• The five questions every homepage visitor needs answered

Why draw the phone layout first?

Drawing in one column forces you to decide what comes first. On a desktop, you can place things side by side and avoid the choice. On a phone, everything is stacked, and many SME sites get most of their visits from phones. A sequence that works there will usually adapt to desktop easily.

• Should the mobile homepage show less than desktop?

How do you test a sketch?

Show it to someone outside the business and ask them to talk through what they expect each box to say and do. If they cannot predict the next step, the order has a gap. This takes minutes, and it catches sequence problems before anyone has spent money on the page.

• First-click testing: is the first step the right one?
• Test a new homepage on real buyers before launch

When is sketching a waste of time?

Skip it when you are using a template whose section order you already plan to keep, or when your changes are small. It also fails if you have no draft words, because boxes labelled 'text here' hide the real questions. Rough headline wording in each box makes the sketch far more useful.

• Why lorem ipsum ruins a homepage design

What does this look like in practice?

A pattern worth trying: give three people the same section list and ask each to sketch the order alone. Where the sketches agree, you have your structure. Where they differ, you have found the disagreement that would otherwise surface during design rounds.

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

Homepage sketch checklist

• Use a pen so you cannot fuss over details.
• Draw one narrow column for a phone.
• Label each box with its job.
• Add rough words, not 'text here'.
• Try at least three orders.
• Ask an outsider to talk it through.

• Research your buyers before you draft a homepage
• Homepage wireframe: plan the page before the design

Next step

Set a 30-minute timer, draw your homepage and photograph the result. That photo is a better design brief than a list of websites you like.