When someone opens a screen, they do not read it from top-left to bottom-right like a book. Their eyes jump to whatever stands out most, then scan for what they need. Visual hierarchy is the arrangement of elements so that their order of importance is obvious at a glance. In the previous lesson you built a working flow; now you will make each screen in it easy to scan.
Why visual hierarchy matters
Users on a phone often glance rather than read. If everything looks equally important, nothing is. A clear hierarchy answers three questions within a second or two: Where am I? What is the main thing here? What should I do next?
The tools of hierarchy
| Tool | How it creates importance | Example |
|---|---|---|
| Size | Bigger elements are noticed first | Order total in a large font on the cart screen |
| Colour and contrast | Strong contrast stands out against muted surroundings | One filled brand-colour button; others outlined |
| Weight | Bold text draws more attention than regular | Dish name bold, description regular |
| Spacing | Empty space around an element isolates and emphasises it | Extra space above a section heading |
| Position | Top and left areas are usually seen first in left-to-right languages | Search bar at the top of the home screen |
| Proximity and grouping | Items close together are read as related | Price placed right next to its dish, not across the card |
| Similarity | Items that look alike are read as the same type | All tappable links in the same colour |
Tip: The last two rows come from the Gestalt principles of perception. Proximity and similarity are the ones you will use every day: they tell users what belongs together without any lines or boxes.
One primary action per screen
Most screens have one action that matters most. Give it the strongest treatment – a filled button in your primary colour – and make secondary actions quieter (outlined or text buttons). On a food-delivery cart, “Place order” is primary; “Add more items” and “Apply coupon” are secondary. Two equally loud buttons make users hesitate.
| Level | Style | Use for |
|---|---|---|
| Primary | Filled, brand colour, high contrast | The main next step |
| Secondary | Outlined or tinted | Useful alternatives |
| Tertiary | Text link style | Low-priority actions such as “Skip” |
| Destructive | Red text or outline, often with confirmation | Delete, cancel booking |
Scanning patterns
Eye-tracking research by Nielsen Norman Group found that on text-heavy pages many people scan in an F-shaped pattern: across the top, then a shorter line lower down, then down the left side. This is a sign of a page that does not support scanning well, not a layout to aim for. Help people by front-loading headings and links with the important words, using clear subheadings and keeping paragraphs short.
Spacing creates structure
Using the 8-point system from the wireframing lesson, make spacing inside a group smaller than spacing between groups. For example, 8 between a dish name and its price, 16 inside the card, 24 between cards, 32 or more between sections. This rule alone fixes many cluttered screens. In code, these values become margin, padding and gap – see the CSS box model.
The squint test
Step back from your screen and squint, or apply a strong blur to a screenshot. The details disappear and only the big shapes remain. Ask: what do I see first, second and third? If the first thing is a decorative banner and not the main task, adjust size, contrast or position until the order matches your priorities.
Watch out: Do not use too many levels of emphasis. If you have five font sizes, four colours and three weights on one card, the hierarchy becomes noise. Fewer, clearer differences work better.
Worked example: a restaurant card
- First: the restaurant photo and name (largest, boldest).
- Second: rating, delivery time and price for two – grouped on one line with small icons.
- Third: cuisine tags in a smaller, muted grey that still meets contrast rules.
- Accent: an offer badge in a contrasting colour, used sparingly so it keeps its power.
Checklist
- Can I name the single most important element on this screen?
- Is there only one primary button?
- Is spacing inside groups smaller than spacing between groups?
- Do headings and links start with the words users scan for?
- Does the squint test show the order I intended?
Colour is one of the strongest hierarchy tools, and also the easiest to misuse. That is the focus of the next lesson.