Alignment and proximity
Two invisible things make a page look put together: lines nobody draws and gaps that carry meaning. Learn to line things up on one edge and to group what belongs together.
IDEA ONE
Alignment: invisible lines
When several things start at the same edge, your eye draws an invisible line along that edge. A few strong lines make a page feel organised. Many weak ones make it feel scattered. The rule: nothing is placed at random. Every element lines up with at least one other element.
A business card with the name top left, the phone bottom right and the email centred has three unrelated lines. Put all three on one left edge and the card suddenly looks designed.
The same flyer, twice
Four edges
Title centred. Paragraph left-aligned. Phone number pushed to the right. Logo dropped wherever there was room. Your eye zigzags and finds no structure, even though every piece is fine on its own.
One edge
Title, paragraph, phone and logo all start on the same left edge, with the same margin. One strong invisible line runs down the page. It looks calm, and you didn't change a single word.
Check yourself
Omid's slide has a centred title, a bullet list that starts a few centimetres in from the left, a centred caption, and a footer on the right. What single change helps most?
- Make the title bigger so it clearly leads the slide
- Start the title, list, caption and footer on one shared left edge
- Put a box around each element so the eye can tell the parts apart
- Centre the bullet list and the footer as well, so at least everything on the slide is centred together
Show the answer
Start the title, list, caption and footer on one shared left edge
Yes. One shared edge replaces four competing lines with one strong one. It is the cheapest fix in design.
IDEA TWO
Proximity: closeness means related
The eye reads things that sit close together as one group, before reading a single word. So put related things close and unrelated things clearly apart. Recipe: the gap between groups should be at least twice the gap inside a group.
A caption 8 units under its photo and 32 units above the next photo clearly belongs to the first one. A caption floating halfway between two photos belongs to neither.
BEFORE: every gap is the same
Design Talk
Monday 6pm
Room 12
Photo Walk
Saturday 8am
City Park
AFTER: small gaps inside, a big gap between
Design Talk
Monday 6pm · Room 12
Photo Walk
Saturday 8am · City ParkBefore: six loose lines. Is 'Room 12' for the talk or the walk?
After: two events, and you see that before reading a word.No lines, no boxes, no colours were added. Only the gaps changed.
Check yourself
Omid can make a long form easier to read without adding a single line, box or colour, only by moving each label closer to its own field and further from the field above.
Show the answer
True
True. Proximity is a real signal: things that sit close together are read as one thing. Roughly 24 units of space above a label and 8 below it tells the eye which field that label belongs to, before anyone reads a word. Spacing does the job most people try to do with borders.
Recipes you can use today
- Pick one main edge per page and start almost everything on it. A second edge is fine; a fifth is not.
- Headings: more space above, less below. Roughly 3 to 1.
- Labels hug their fields, captions hug their photos, prices hug their dishes.
- Before you draw a line or a box to separate things, try more space. It usually works better and looks lighter.
- In a column of numbers, line up the digits on the same side so they can be compared.
Check yourself
Is this an alignment problem or a proximity problem?
- A caption sits midway between two photos
- Three text blocks each start at a slightly different left position
- A form label is closer to the field above it than to its own field
- The logo's edge is a few millimetres off the text edge below it
- Phone, address and email are scattered in three corners of a card
- Prices in a column are centred, so the digits don't line up
Show the answer
Alignment: Three text blocks each start at a slightly different left position, The logo's edge is a few millimetres off the text edge below it, Prices in a column are centred, so the digits don't line up
Proximity: A caption sits midway between two photos, A form label is closer to the field above it than to its own field, Phone, address and email are scattered in three corners of a card
Check yourself
Match each problem to its fix
Show the answer
- Title centred, text on the left, footer on the right → Pick one edge and start everything on it
- A heading floats equally between two paragraphs → Move it closer to the paragraph it introduces
- Every line on a card has the same gap → Tighten related lines, widen the gap between groups
- A box is drawn around every section → Remove the boxes and let space separate them
Check yourself
Negar's CV lists three jobs. Every line has the same spacing, and the dates are sometimes after the job title, sometimes on their own line. Which fix is best?
- Tight gaps inside each job, a bigger gap between jobs, dates on one line
- Draw a thin rule under every line of text so the reader can see where each one ends
- Centre the whole CV so it looks balanced on the page
- Give each job its own colour so they are easy to tell apart
Show the answer
Tight gaps inside each job, a bigger gap between jobs, dates on one line
Right. Proximity turns twelve loose lines into three jobs, and alignment lets a recruiter run an eye down one line to read all the dates.
Lesson recap
- Every element should line up with something. A few strong invisible lines beat many weak ones.
- Centre only short things. Align long text to the side where reading starts: left in English, right in Persian.
- Close together means related. Make the gap between groups at least twice the gap inside them.
- A heading sits closer to the text it introduces than to the text before it.
- Try space before lines and boxes.