Design
10 Design Rules
They are not laws: they are the ten things that show immediately when they are missing. From content before form to judgement in the real world, in the words of those who said them better than we could.
Design rules have a bad reputation, because every good piece of work breaks at least one. But there is a difference between breaking them and not knowing them, and you can see it at a glance: work that breaks a rule does so in a precise place and for a reason; work that does not know the rule breaks it everywhere without meaning to. These ten are not laws. They are the things you notice immediately when they are missing: in a website, a menu, a poster, an app. We collected them over time, working, and checked them against the people who said them better than we could.
1. Content comes first
Jeffrey Zeldman, one of the founders of web design as a profession, wrote it in 2008 in a line worth an entire course: content precedes design; design in the absence of content is not design, it is decoration. A layout made with dummy text always works and is good for nothing, because real text has lengths, rhythms and priorities that dummy text does not. First the texts, then the photographs, then the structure, then the form. Always in that order.
2. One thing at a time
Every screen, every page, every poster should answer one question: what should the viewer see first? Then second, then third. That is hierarchy, and it is the rule most often missing: when everything is big, nothing is big; when three buttons ask for the same attention, none gets it. One headline, one action, one image: the rest comes after, smaller, lighter, further away.
3. Align everything to a grid
Josef Müller-Brockmann, who wrote the definitive book on grids in 1981, described it as a tool of order and freedom at once: it decides where things go, so that the designer can decide what they are. A grid cannot be seen, but it can be felt: it is the reason some pages look “right” without anyone being able to say why. On screen the grid is the columns, the margins, the vertical rhythms. When it is missing, the eye knows before the head does.
4. Typography is ninety-five per cent
In 2006 Oliver Reichenstein, founder of the studio iA, wrote that web design is ninety-five per cent typography, because ninety-five per cent of the information on the web is written text. Almost twenty years later, with video and images everywhere, the proportion has changed less than it seems: people still read. A well-chosen typeface, a line length between fifty and seventy-five characters, leading that breathes, a type scale decided once: they do more than any effect.
5. White space works
Empty space is not wasted space: it is what allows everything else to be seen. The margin around a headline makes it important; the air between two sections says they are two different things; the white on a page is the pause in a sentence. Those who fear emptiness fill it, and by filling it lower the value of everything that was there. The most expensive pages in the world, those of museums, fashion houses, brands that do not need to shout, are almost empty.
6. Contrast is accessibility
Light grey on white is elegant on the designer's screen and illegible on everyone else's phone, in the sun, with dirty glasses. The web accessibility guidelines ask for a contrast ratio of at least 4.5 to 1 for normal text, and it is not a bureaucratic rule: about one man in twelve has some form of colour blindness, everyone ages, and everyone sooner or later reads in terrible conditions. Contrast is the simplest form of respect for the reader, and it can be measured with a free tool.
7. A system, not pages
A site with a hundred pages designed one by one is a hundred chances to get it wrong. A site with ten rules and a hundred pages that apply them is a single one. The system is the colours decided beforehand, the type sizes decided beforehand, the spacing decided beforehand, the components that repeat identically. Consistency is not boredom: it is what allows whoever uses a thing to learn how it works only once. And a system extends, while a page gets redone.
8. Motion has a purpose
An animation says where something went, where it came from, that something happened. When it says none of these, it is a delay. Good motion guides, like a line on the floor leading to a door; bad motion entertains for a second and tires forever. And it respects those who do not want it: operating systems let people ask for less motion, and a well-made page listens to that request.
9. Less, but better
Dieter Rams, who designed for Braun the objects today's phones still imitate, condensed his work into ten principles, and the last one sums them all up: good design is as little design as possible. Weniger, aber besser: less, but better. It is not minimalism as a style; it is the discipline of removing everything that is not needed, until what remains has to be there. An Eames chair, the Bauhaus building, an interface you understand without instructions: they are the same idea in different materials.
10. Design is judged in the world
Not on the calibrated monitor in the studio, but on the phone of a person in the sun, on a slow connection, looking for opening hours. A menu is judged in a restaurant with low light, a sign is judged by whoever has to find the way, a website is judged on the speed numbers that measure what people actually feel. Looking, testing on real devices, asking someone who knows nothing about the project: it is the only review that counts. Everything else is an opinion.
Before shipping
The ten rules become ten questions, to ask of every piece of work before it goes out:
- Is the real text in, and was the layout tested with it?
- What is seen first? And do other people see it first too?
- Do things sit on a grid, or wherever they happened to land?
- Does the text read well at length: typeface, size, line length, leading?
- Is there enough air, or was everything filled out of fear of emptiness?
- Does the contrast pass the measure, even for people who cannot tell colours apart?
- Are the rules written down and valid for every page, or does each page fend for itself?
- Does every movement say something, and does it stop for those who ask?
- What can still be removed?
- Was it tried on a real phone, by a person who knows nothing about the project?
What remains
Ten rules, and all of them can be broken. But first they are known. What remains, in the end, is a way of looking: content first, one thing at a time, the order underneath, the text above all, the air around, legibility for anyone, the rules before the pages, the motion that serves, the removing, and the world as the only judge. Whoever has this eye can break the rules whenever they like, because they know what they are breaking.
Photo credits: all images are under the Unsplash License. Photographers: Gérard Griffay (cover), Siora Photography, Brett Jordan, Daniel Hansen, Declan Sun, Parrish Freeman, Kelly Sikkema, Mika Baumeister, Julia Taubitz, Andres Jasso, ben benjamin, PJH, HYEWON HWANG.
