Web Design Principles
Hierarchy, contrast, proximity, consistency and restraint. Five ideas that decide whether a page works, none of which depend on what is currently fashionable.
Five principles carry almost all of the load: hierarchy, contrast, proximity, alignment and restraint. None of them are fashionable, none of them expire, and a page that gets all five right will outlive whatever visual style is current when it launched.
Hierarchy: decide what gets noticed first
Every page teaches the eye an order. Your only real choice is whether that order is the one you intended.
Hierarchy is built from four tools, and they compound:
- Size. Larger reads as more important — but only in relation to what is next to it. A 24px heading is large beside 16px text and small beside 48px.
- Weight. Bold separates without changing the shape of the layout, which makes it the cheapest tool of the four.
- Colour. The strongest signal and the easiest to overuse. One accent colour, spent on the thing that matters.
- Space. Isolation is emphasis. An element with room around it reads as important without being bigger or louder.
The test takes ten seconds: blur your eyes at the page. Whatever you still notice is what the page emphasises.
Contrast: it is measurable, so measure it
Contrast is not a matter of taste when it comes to text. Body text needs a ratio of at least 4.5:1 against its background; large text and interface components need at least 3:1.
Grey text on a white background is the most common failure, and it is almost always a designer's screen at full brightness deceiving them. On a phone outdoors, #999999 on white is not styling — it is text nobody can read. The palette side of this is covered in choosing an accessible colour palette.
Contrast also does non-textual work: it is how a primary button announces itself, and how a disabled control announces that it is disabled.
Proximity: space is the grouping mechanism
Things placed close together are read as related. This happens before anyone reads a word, and it overrides what the words actually say.
The rule that resolves most cluttered pages: the space inside a group must be smaller than the space around it. A caption equidistant from its own image and the next paragraph belongs to neither.
Spacing is easiest to keep honest when it comes from a scale rather than from judgement — 4, 8, 12, 16, 24, 32, 48, 64. In a block theme those steps are what the spacing and layout settings exist to standardise.
Alignment: fewer edges, calmer page
Every element should line up with something else. Most pages feel untidy not because anything is wrong individually but because there are eleven different left edges.
Pick a grid and stay in it. Prefer left alignment for anything longer than two lines — centred text forces the eye to hunt for the start of each line, which is why centred paragraphs read slower even when they look balanced.
Consistency: the same thing should look the same
A button that is blue and rounded on one page and green and square on another is two things as far as the visitor is concerned. Consistency is not conformity; it is the reason people can learn your interface once instead of continuously.
This is what a style guide is for — writing the decisions down so the tenth page matches the first without anyone having to remember.
Restraint: the discipline that separates amateur from professional
Every element on a page competes with every other element for attention. Adding is easy and always feels productive; removing is what makes the remaining things work.
Concretely: two typefaces, one accent colour, one shadow depth, one border radius, one spacing scale. Constraint is not a limitation on creativity. It is what makes the exceptions meaningful — a third colour signals something precisely because there were only two.
Where the principles collide
They will conflict, and the resolution is the design decision.
A hero image with the highest visual weight competes with the call to action for first notice. A dense product table breaks proximity because everything must be equally close. In both cases, the question is the same: what is this page's job? The principle that serves the job wins, and the other one bends.
Common mistakes
- Adding a colour to fix a hierarchy problem. If the order is wrong, colour makes it louder, not clearer.
- Using more than one accent colour. Two accents mean neither is the accent.
- Reducing contrast because it looks more refined. It looks refined on your screen and is unreadable on a phone in daylight.
- Centring body text. Fine for a single line, costly beyond two.
- Inconsistent spacing. The most reliable sign of a page assembled rather than designed.
- Designing without real content. Every principle above is tested by the longest title and the emptiest list.
Verify
Print the page in greyscale at thumbnail size: hierarchy that survives the loss of colour and detail is real hierarchy. Check every text colour against its background for the 4.5:1 threshold. Count your typefaces, accent colours and spacing values — if any count is above the number you decided on, that is where to start.
The structural counterpart to these principles is layout design, and the type decisions sit in choosing fonts.
Frequently asked
- No, but you do need a small number of rules applied consistently. Most amateur-looking sites break the same three: no clear hierarchy, inconsistent spacing, and too many typefaces or colours.
- It is the order in which the eye notices things, controlled through size, weight, colour and space. If the most important element on the page is not the most noticeable one, the hierarchy is working against you.
- Two typefaces and one accent colour cover almost every site. Constraint is what makes a design feel intentional; each additional choice has to earn its place by doing a job the existing ones cannot.