Website mockups: the cheapest hour you will ever spend

Here is how it usually goes. You open a builder, pick a template, start dropping in text — and forty minutes later you are moving a button around for the fifth time, wondering why the page still feels wrong. Nothing is broken. The problem is that you started arranging a page before deciding what it had to say.

A mockup fixes that, and it takes about an hour. Often less.

Wireframe, mockup, prototype — three words, three stages

People use them interchangeably and then talk past each other. The difference is simply how much has been decided.

• A wireframe is boxes and labels. No colours, no fonts, no real text. It answers one question: what goes where, and in what order.
• A mockup adds the real look — colours, typography, actual headlines, actual photos. It answers: what will this feel like to a visitor.
• A prototype adds behaviour — clicks, hovers, transitions between screens. It answers: does the flow make sense.

For a one-page site you almost never need the third one. You need the first, and it takes twenty minutes on paper.

Why the layout decides more than the design

Visitors do not read a page. They scan it in a rough F shape: across the top, down the left edge, across again wherever something catches the eye. That behaviour is not a preference you can design around — it is what people do on every site, including yours.

So the layout is really a decision about order of attention. Whatever sits top-left gets read. Whatever sits three screens down, next to something louder, does not. If your price list is beautifully designed and placed below a large photo of your office, the photo won and the price lost.

The one-hour version, no software required

You can do this on the back of an envelope, and the envelope version works better than most digital attempts, because you cannot get distracted by fonts.

• Write down the one action you want from a visitor. One. Write it at the top of the page.
• List the questions someone must have answered before they will take that action. Usually five to seven of them.
• Turn each question into a box, in the order the questions arise. That is your layout.
• Now mark the boxes a hurried person must see even if they read nothing else. There should be two or three, not eight.
• Sketch the page on one sheet, sized so the important boxes land near the top.

When you open the builder afterwards, the whole exercise becomes filling in known slots. The forty minutes of moving a button around never happen.

Squeeze pages and lead capture: the shortest page that works

Four layout mistakes that survive into launch

• The hero that says nothing. A giant photo, a slogan, and no clue what the company does. Cover the picture: if the remaining words do not explain the business, the first screen is empty.
• The wall. Six paragraphs with no headings. Scanning has nothing to catch on, so the visitor scrolls past all of it.
• The buried price. Placed at the bottom because it feels awkward. It is the second thing people look for, and hiding it does not make it smaller.
• The five equal buttons. Call, write, download, subscribe, book. Every one of them competes with the other four, and the visitor resolves the tie by leaving.

How to know your layout works

Two checks, both free. Show the sketch to someone who does not know your business, give them five seconds, take it away, and ask what the page was offering. If they cannot say, the top of the layout is wrong — not the wording, the layout.

Then squint at it. Blur your eyes until the text becomes grey bars. The blocks that still stand out are what visitors actually notice first. If your call to action is not one of them, move it before you build anything.

Browse 20 ready-made layouts to sketch against

Skip the sketch: generate a page that already has the structure