Static mock-ups are wonderful at showing what a page looks like. They are terrible at showing what it feels like to use — how it loads, how it moves, how it reflows on a phone held sideways on a train.
For the Tessel Architects website we stopped drawing pages after the second week and built a rough prototype instead. Within a day we learned more about the project index than a month of mock-ups would have told us.
What a prototype tells you that a picture can’t
- How long a real project title is, in four languages.
- Whether the images feel slow on a real connection.
- Where the keyboard focus goes after you filter a list.
- What happens when a client uploads a portrait photo into a landscape slot.
We still design in a drawing tool for typography, composition and art direction. But as soon as a layout has to respond to content, time or interaction, we move it into the browser.
The web is not a canvas. It is a material, and materials have properties you only learn by working with them.
Noor Haddad, developer at Northfield
The result is fewer surprises late in the project — and clients who have been clicking through their website for weeks before it launches.