UX6: Visual design: type, colour, space and motion
Hierarchy, icons and images
🎯You'll be able to
Combine size, weight, colour and space into a clear hierarchy, and use icons and images that help instead of decorate.
🏠The everyday picture
At a railway station, the platform number is huge, the train name is large, and the coach order is smaller. You find what you need in the order you need it.
📘What it really is
- Hierarchy tools: size, weight, colour and contrast, position (top and left are seen first in left-to-right languages) and space.
- One focal point per screen: usually the main heading or the main action.
- The squint test: blur your eyes (or the screenshot); the most important things should still stand out.
- Icons:
- work best with a word next to them; few icons are understood by everyone;
- should look like a family (same style, stroke and size);
-
decorative icons are hidden from screen readers (
aria-hidden="true"), meaningful ones have a text alternative. -
Images: use them when they help the task (a clinic's entrance so people recognise it); give meaningful images alt text; keep them small so pages load on slow connections.
-
Cards group related information (a clinic with its doctor, date and button) and make lists scannable.
📝A worked example
Input: the reference search results.
| Element | Hierarchy | Why |
|---|---|---|
| Clinic name | Large, bold | What people scan for |
| Doctor and next free day | Body text | Details to compare |
| "Open on Sunday" tag | Small, with a coloured background and words | Quick to spot, not colour alone |
| "Choose a time" button | Secondary style, full tap size | The action for each card |
Expected output: a squint test shows clinic names first and buttons second. Each button's accessible name includes the area ("Choose a time at Aliganj"), so a list of six identical "Choose a time" buttons makes sense to a screen reader.
🌍Where it's used
- Product listings in shops, with image, name, price and button in a set order.
- Dashboards, where the most important number is the largest.
- Public signage and kiosks, where icons come with words.
📝Case scenario
A health app used a heart icon for "Favourites", "Health records" and "Donate". Users tapped the wrong one constantly. Distinct icons with labels underneath ended the confusion.
🖱️Try it
Do a squint test on three screens of an app. Write what stands out first on each, and whether it's the most important thing. Success: at least one screen where the wrong thing stands out, with a suggestion.
⚠️Common mistakes
- Icons without words. Sign: people guess what an icon means. Fix: add a label.
- Everything bold. Sign: nothing stands out. Fix: one focal point; bold only for key items.
- Decorative images that slow pages. Sign: large photos on every screen. Fix: use images only when they help.
🛠️For your project
Project 2's reference cards add a hidden at <area> label to each button; axe checks names, and test 7 checks the buttons' size.
✅Quick check
What is the squint test?
Show the answer
Blurring your view of a screen to see what stands out most.
Why add words next to icons?
Show the answer
Because few icons are understood by everyone, and words remove the guesswork.