Beautiful on paper, unusable on screen

I was looking at a possible holiday a little while back. Nothing complicated. I wanted to see what was included, what it cost, and how to book it.

I left without doing any of those three things. Not because the company was wrong for me. Because I couldn’t read the page.

The site was lovely, in the way a brochure is lovely. Sand colours, a nice wordmark, big airy photography. Somebody had spent real money on that identity. And nearly everything that made the identity work on paper was making the website harder to use.

The colours came from a paint chart, not a screen

The body text was a warm grey on a warm cream. Printed, with ink on decent stock, that pairing probably looks expensive. On a backlit screen, in a room with the sun behind me, it looked like text that had been left out in the weather.

I didn’t measure the contrast. I didn’t need to. My eyes did the measuring for me, and they were doing it the whole time I was there.

Brand palettes get signed off in a meeting, on a big calibrated screen, with the blinds half down. Websites get read on a phone, on a train, at nine at night, by somebody who is tired and mildly impatient. Those are not the same conditions, and the same two colours do not behave the same way in both.

The logo typeface was doing a job it was never drawn for

Whoever made that identity picked a display face. High stroke contrast, tight spacing, a properly nice lowercase g. As a wordmark it was genuinely good work.

They then used it for the body copy. And the menu. And the prices.

A face like that is drawn to be seen once, big. It isn’t drawn to be read for four hundred words at 16 pixels on a phone. The thin strokes thin out further, the tight spacing closes the words up, and reading stops being automatic and starts being effort. I did read it. Slowly. And I noticed I was reading it, which is the part that matters.

When everything is brand colour, nothing is a button

This is the one that actually cost them the booking.

The buttons were the same sand tone as the panel behind them, with a hairline border and letterspaced small caps inside. They looked like captions. Very handsome captions.

Nothing on the page said “this is the bit you press”. No weight, no fill, no colour that turned up on actions and nowhere else. I moved the cursor over three things that turned out to be headings before I found the one that took me anywhere.

A button doesn’t have to shout. It does have to be different from the things around it. If your action colour is also your heading colour, your section tint and your icon colour, it has stopped being an action colour. It’s just the brand again.

The brand book wasn’t wrong, it was unfinished

I don’t think anyone here was lazy. The identity was made for signage, packaging and print, and for that work it was strong.

Then it got handed over as a set of rules and poured straight onto a website, with nobody in between adjusting it. No one said, out loud, that those two colours can’t sit as text and background, that the display face is for headings only, and that one colour needs holding back for actions and nothing else.

That translation step is the missing piece. It isn’t a big job. It’s a couple of hours and a bit of nerve. Without it the site follows the identity perfectly and does its actual job badly.

What I want to see in a brand book now

When I’m working inside somebody else’s identity, this is what I ask for. If it doesn’t exist, I write it and get it signed off.

  • A set of text colours that pass contrast against each background they’re allowed to sit on, rather than the master palette and good luck
  • A reading face chosen to sit under the display face, with the pairing shown at body size, not at poster size
  • Minimum sizes and line lengths for body copy on a phone
  • One action colour, held back for buttons and links and used for nothing decorative
  • The hierarchy shown at 320 pixels wide, because that’s where it breaks first

None of that damages the identity. The wordmark stays. The photography stays. The feeling of the thing stays. What changes is that somebody can read it and buy something.

The uncomfortable part is ours

We’re the ones who let this through. A brand book turns up, it’s beautifully made, it cost somebody a lot of money, and it is far easier to apply it than to argue with it. So we apply it, and the site looks like the deck, and everyone in the sign-off meeting is pleased.

But the brand book has never tried to book a holiday at half nine at night on a phone with twelve percent battery. We have.

An identity exists to be recognised. A website exists to be used. Most of the time those two pull in the same direction. When they don’t, the website has to win, because the website is where the money changes hands.

I gave up on that one. Not in a huff. Quietly, the way everybody does, which is the problem. They’ll never know I was there.

If you read this and a question came up, I am happy to talk it through. Everyone is coming from a different angle, but I offer a chat about your project with no obligation. You do not have to have a brief ready. Most people just want to know if what they have in mind is achievable and what it might cost. Let's talk about your project.

¶ Andrew.

Andrew Backhouse in a park, wearing a yellow checked shirt and a blue cardigan

Andrew Backhouse

Freelance web designer

Hi, I'm Andrew. I build WordPress websites for small businesses, charities, and entrepreneurs.

My websites load fast, read well, and turn visitors into customers. Fixed prices, no surprises, and I pick up the phone.