Sketch it before you code it

Before I open an editor, I draw the page. Not a polished mockup: a fast, ugly sketch with boxes, arrows and a few words in the places where words will go.

The point is not the drawing. The point is that a sketch is cheap enough to throw away, so I actually throw it away when it is wrong.

What the sketch catches

• Hierarchy. If I can't tell what matters most from three scribbled boxes, a visitor won't either.
• Narrow screens. I draw the small-screen version first. A layout that only works at desktop size shows its cracks right away.
• Too many ideas. When the board fills up, it is usually a sign that the page is trying to do two things at once.

What it doesn't catch

Motion, timing and type rendering only show up in a real browser. So the sketch decides what goes where, and the browser decides how it feels. I switch to code as soon as the sketch stops arguing back.

That is also why the board on the home page is real. Draw on it. Being wrong there costs nothing.