Lesson 011 · Design Principles 101 · 4 min
Where do I look first?
Principle: Visual hierarchy tells people what matters.
1 · The crime
What goes wrong
A tailor's homepage shouts five words in capitals, "ELEGANCE. CRAFT. TRADITION. EXCELLENCE. LUXURY.", next to a wall of justified text. Visitors still don't know what the shop makes, where it is or what it costs.
2 · The law
Visual hierarchy tells people what matters.
- Size, colour, contrast and space guide the eye: the most important thing should be the most noticeable.
- Say what you do in plain words; slogans don't replace information.
- Whitespace and short paragraphs make pages easier to scan. All caps and justified text slow reading.
3 · The tool
Check it yourself, for free
- The 5-second test: show your page to someone for five seconds, then ask what you do.
- A greyscale screenshot to check the hierarchy without colour.
- Your own eyes, a day later, with fresh attention.
4 · The fix
Step by step
- Write a headline that says what you offer and for whom.
- Use sentence case, left-aligned text and short paragraphs.
- Give sections clear headings and generous space.
- Limit yourself to two fonts and one accent colour.
5 · Homework
Run the 5-second test with a friend on your homepage. Write down exactly what they said you do.