Composition and the focal point
Every page needs one winner and a path for the eye to follow after it. Learn to pick a single hero, place it off-centre, and lay the rest along the way people actually look.
THE MAIN IDEA
The focal point
The focal point is the one element that wins the first look. Every page gets exactly one. Two focal points is the same as none: the eye bounces between them and settles on neither. Choosing one is hard, because it means everything else has to step back. That stepping back is the work.
A food advert with a huge photo of the dish and, in the opposite corner, a '50% off' badge just as big. Two seconds later you remember neither the food nor the number.
The same café post, twice
Two heroes
The dish photo fills the square. A bright red 'NEW' sits across the bottom at the same visual weight, and the logo is large in the corner. The eye ping-pongs between three loud things. Nobody reads any of them properly.
One hero
The photo stays big and keeps the space around it. 'NEW' drops to a quarter of the size in one corner of the photo, the logo becomes a small grey mark. Eye order: the dish, then the word, then the café. One second, in the right order.
Check yourself
Sara is posting about her café's new breakfast. She puts the dish photo across the whole square, the café logo large in one corner and 'NEW' in big letters along the bottom. Friends say the post feels busy. What should she change first?
- Add a coloured panel behind the text so it stands out from the photo
- Move the logo to the opposite corner
- Make the photo smaller so there is room for everything
- Shrink the logo and 'NEW' clearly, so the dish alone wins the first look
Show the answer
Shrink the logo and 'NEW' clearly, so the dish alone wins the first look
Yes. She had three things competing at the same strength. One hero, and the rest quiet, and the post stops feeling busy without losing anything.
WHERE TO PUT IT
The rule of thirds
Divide the page into three equal columns and three equal rows. You get four lines, and four points where they cross. Put your focal point on or near a crossing point rather than in the dead centre. Off-centre feels alive and leaves an empty area that gives the hero room. It's a habit borrowed from photography and painting, not a law, and dead centre is still right for formal, still things.
In almost any portrait you've seen, the eyes sit near the upper third line, not halfway down the frame. Photographers do it without thinking.
Imagine a 3 x 3 board over your poster.
[ 1 ][ 2 ][ 3 ]
[ 4 ][ 5 ][ 6 ]
[ 7 ][ 8 ][ 9 ]
The four crossing points are the inner corners
of cells 1, 3, 7 and 9, where the lines meet.
Pottery poster:
title cells 1-2, starting at the first crossing
date and place cells 7-8
cells 3, 6, 9 left emptyHero off-centre. One third of the page breathing. Details along the bottom.
Cell 5, the dead centre, stays empty.On a Persian page the board mirrors: cell 1 is the top right, and the empty third moves to the left.
Check yourself
Putting the main headline exactly in the middle of the page is the safest choice, because the middle is where people look first.
Show the answer
False
People look at the top, and at whatever is loudest. Dead centre is right for a few formal, still pieces such as an invitation or a title slide. Elsewhere it makes a page feel stuck, and it uses up the space the headline needs around it. Nudge the headline onto a thirds crossing and leave a third of the page empty.
Two paths the eye takes
- The Z path, for sparse pages: posters, ads, title slides. The eye crosses the top, cuts diagonally down, then crosses the bottom. Put the hero at the start and the thing you want done at the end.
- The F path, for pages full of text: articles, long web pages, a CV. The eye reads the first line, drops to a shorter second line, then scans down the starting edge.
- What the F path costs you: only the first two or three words of each heading and each line get read. Front-load them. 'Opening hours' beats 'Information about when we are open'.
- Neither is a law. A strong hierarchy beats both: something loud enough pulls the eye wherever it sits. The paths tell you where the eye goes when nothing is pulling it.
Check yourself
Match each page to the path its reader most likely follows
Show the answer
- A poster with one photo, six words and a phone number → Z path: hero at the start, the action at the end
- A long article with headings and paragraphs → F path: the first words of every heading do the work
- A wedding invitation → Centred and symmetric: formal and still
- A Persian shop sign → The same paths, mirrored: the eye starts top right
Check yourself
Does this help the focal point or fight it?
- Extra empty space kept around the headline
- A bright logo the same size as the headline
- Everything grey except the hero, which is in the brand colour
- Three photos of equal size across the top
- The hero placed a third in from the edge
- A thick coloured border around the whole page
Show the answer
Helps the hero win: Extra empty space kept around the headline, Everything grey except the hero, which is in the brand colour, The hero placed a third in from the edge
Fights the hero: A bright logo the same size as the headline, Three photos of equal size across the top, A thick coloured border around the whole page
Check yourself
Omid's poster for a charity run has the photo at the top, the date in the middle, and 'Register at the sports hall' in small grey type squeezed into the starting corner. Runners say they never found out where to sign up. What is the best fix?
- Make every line the same size so nothing gets missed
- Add arrows pointing at the sign-up line so nobody can miss where it is
- Put the sign-up line at the end of the reading path at level 2
- Put the sign-up line in the dead centre, over the photo
Show the answer
Put the sign-up line at the end of the reading path at level 2
Right. The path ends at the far bottom corner, and that is where the thing you want people to do belongs. Small grey text at the start of the path is read last, if at all.
Lesson recap
- Pick one focal point per page. Two heroes means no hero.
- Place it on a thirds crossing rather than dead centre, and leave a third of the page empty.
- Sparse pages follow a Z: hero at the start, the action you want at the end.
- Text-heavy pages follow an F: only the first few words of each heading and line get read, so front-load them.
- In Persian both paths mirror: the eye starts top right and the action lands bottom left.