Visual Hierarchy & Composition
What Do People See First?
Visual hierarchy is the order in which the eye notices elements on a screen. Every design has a hierarchy, whether you planned it or not. Your job is to make sure the most important thing is noticed first, the second most important second, and so on.
On a transfer screen, the amount and the "Send" button should win. On a product page, the product photo, name and price should win. If a promo banner or a decorative illustration wins instead, the design has failed, however beautiful it is.
The Tools of Hierarchy
You already met several of these in the typography, colour and spacing lessons. Here they are together:
- Size: larger elements attract attention first.
- Colour and contrast: a saturated orange button on a neutral screen stands out. Low-contrast grey recedes.
- Weight: bold text beats regular text of the same size.
- Position: top and left get seen first by readers of left-to-right languages.
- Whitespace: an element surrounded by space gets more attention.
- Imagery and faces: photos, especially of people, draw the eye strongly.
- Motion: anything animating demands attention, so use it sparingly.
The key is contrast between levels. If everything is bold, nothing is.
Reading Patterns
Eye-tracking research from the Nielsen Norman Group and others shows that people scan screens in predictable patterns.
F-pattern
On text-heavy pages (search results, articles, settings, transaction lists) people read across the top, then a shorter line across, then scan down the left side. The result looks like the letter F.
Design for it: put key information in the first words of headings and list items. Front-load labels: "Airtime: MTN ₦500" beats "You bought ₦500 MTN airtime".
Z-pattern
On simple, visual pages (landing pages, onboarding screens, ads) the eye moves top-left → top-right → diagonally down → bottom-left → bottom-right, forming a Z.
Design for it: logo top-left, navigation or sign-in top-right, a strong visual in the middle, and the main call to action at the bottom right, where the Z ends.
Right-to-left languages
For Arabic and Hausa written in Ajami script, the patterns mirror. If you design for markets across northern Nigeria, North Africa or the Middle East, flip the layout.
Focal Points and Composition
A focal point is the one element you want people to see first. Every screen should have exactly one.
- Rule of thirds: place key elements where lines dividing the screen into thirds intersect, rather than dead centre.
- Visual weight and balance: a large dark element on one side can be balanced by several smaller elements on the other.
- Directional cues: a photo of a person looking towards the button pulls the viewer's eye to it too.
- Grouping: related items boxed or spaced together read as one unit, reducing clutter.
The Squint Test
A quick way to check hierarchy: squint at your design (or blur it). Details disappear and only the big shapes remain. Can you still tell what the most important element is? If three things compete, simplify.
Designers at companies from Paystack to Airbnb run this test daily. It takes five seconds and catches most hierarchy problems.
Try It in the Lab
The lab shows a checkout screen with a hierarchy problem. Use the sliders to adjust size, weight and colour for each element. Turn on squint mode to blur the screen, and overlay the F or Z pattern. The hierarchy meter ranks what the eye sees first. Make the price and "Pay now" button win.
Try it yourself
Key Takeaways
- Visual hierarchy is the order in which the eye notices elements. Design it on purpose so the most important thing wins.
- Size, colour, contrast, weight, position, whitespace and imagery all create hierarchy, but only through contrast between levels.
- People scan text-heavy screens in an F-pattern and simple visual screens in a Z-pattern. Mirror layouts for right-to-left languages.
- Every screen should have one clear focal point, supported by grouping, balance and directional cues.
- The squint test (blurring the design) is a five-second check that the right elements stand out.
Quick Quiz
1.Which reading pattern do people typically use on a text-heavy screen like a transaction list?
2.What is the 'squint test' used for?
3.A designer makes the promo banner, title, price and button all large, bold and brightly coloured. What is the likely result?
Ready to go further?
CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.
Join CareerEx