Designing in the browser, not in the mockup

A mockup is a photograph of one moment: one width, one language, one state, taken on a fast machine with the fonts already loaded. Almost everything difficult about a website happens outside that moment.

We still sketch. The sketch stays a sketch — twenty minutes on paper, deliberately too rough to fall in love with. The first thing that gets built is markup.

What changes when you build first

• You find out on day one how a headline breaks at 320 pixels.
• You see the German version at the same time as the English one.
• You stop designing states that cannot happen and start designing the ones that always do: empty, loading, too long, and failed.

The cost is that early work looks less finished. A client who expects a poster is handed something that scrolls, jumps, and has one grey box in it. We say so in the first meeting, and we present in a real browser window rather than a screenshot of one.

If a decision cannot survive a real browser, it was never a decision. It was a preference.

What we still draw

Type scale, colour and spacing get decided once, in one place. Every screen after that is assembled from the same small set of decisions, which is also why the site stays coherent after we hand it over to somebody else.

The other thing worth drawing is the thing that does not exist yet: the flow. Boxes and arrows on a wall, no pixels, no type. It takes an hour and it prevents the expensive kind of mistake, which is not an ugly button but a screen nobody needed.

The result is less impressive in week one and considerably more finished in week four.