Grids and balance
A grid answers 'where does this go?' before you ask. Learn to set columns, margins and gutters, and to balance a page either symmetrically or with a counterweight.
THE MAIN IDEA
A grid is a set of invisible columns
Divide the page into a few equal columns. Leave a margin around the outside and a gutter, a fixed gap, between columns. Then one rule: every element starts and ends on a column line. A photo is one, two or three columns wide, never two and a bit. This is lesson 3's alignment, planned in advance.
A newspaper page looks orderly with dozens of stories on it because every story, photo and ad is a whole number of columns wide.
Poster grid: 4 columns, margin 32, gutter 16
Row 1 title columns 1 to 4
Row 2 photo columns 1 to 2
text columns 3 to 4
Row 3 four small info boxes one column each
Row 4 sign-up line columns 1 to 4Every left and right edge falls on one of five lines.
Nothing is 'about here'.Margin and gutter come from your spacing ladder in lesson 4. Two, three or four columns are plenty for posters and slides. A phone screen is usually one column with a side margin.
Check yourself
In Negar's 12-slide deck, the text starts at a different spot on every slide and the titles jump up and down as she clicks through. What fixes this best?
- Nudge each slide by eye until it looks right, since every slide has slightly different content anyway
- Set one grid on the template slide and place everything on it
- Centre all the text on every slide, so at least the starting point is the same each time
- Add a coloured bar at the top of each slide to hide the jumping
Show the answer
Set one grid on the template slide and place everything on it
Yes. One grid, set once, keeps every slide in the same skeleton. The jumping stops and the deck feels like one piece.
Grid recipes
- Choose 2, 3 or 4 columns. More columns give more options, and more ways to go wrong.
- Keep the margins equal on both sides, and take the gutter from your spacing ladder: 16 or 24.
- Every element is a whole number of columns wide.
- Use the same grid on every page of a deck, a menu or a report.
- Break the grid once, on purpose, for the one thing that should stand out: a photo that runs off the edge, a title across all columns.
Check yourself
- Page A: three photos at 37%, 52% and 45% of the page width. It looks messy.
- Page B: three photos that are 1, 2 and 3 columns wide. It looks ordered.
What explains the difference?
- Photos should all be the same size
- Widths picked from a few shared sizes look organised; widths picked by eye look random
- Smaller photos always look tidier
- Pages should have exactly three photos
Show the answer
Widths picked from a few shared sizes look organised; widths picked by eye look random
Right. Page B's photos are different sizes too, but their edges land on shared lines, so the variety reads as a plan.
IDEA TWO
Balance and visual weight
Every element has visual weight: how strongly it pulls the eye. Big, dark, saturated, dense or detailed things are heavy. Small, pale, plain things are light. A page feels balanced when the weight on one side is answered by weight on the other. When it isn't, the page feels as if it is tipping over.
A large dark photo and a dark logo both on the left, with two thin lines of grey text on the right: the page leans left, and the right half looks forgotten.
Two ways to balance
Symmetric
Both halves mirror each other around a centre line. Centred title, centred text, centred seal. It feels formal, calm and stable. Good for invitations, certificates and title slides. Its risk is being static.
Asymmetric
The halves are different but equal in weight. A big photo on one side is answered by a bold title and a block of text on the other, or by a small bright accent far from it. It feels lively and modern. Good for posters, posts and most slides.
A seesaw
Two children of the same weight balance at equal distances: that is symmetry. A heavy child near the middle is balanced by a light child far out at the end: that is asymmetry. On a page, a small bright button far from a large grey photo can hold its own in the same way. Where the analogy breaks: a page has no real gravity. Weight is judged by eye, and it works up and down as well as side to side.
Check yourself
Symmetric or asymmetric balance?
- A wedding invitation with every line centred
- A poster with a large photo on one side and a text block on the other
- A certificate with the seal in the middle at the bottom
- A slide with a huge number on one side and a short label far across from it
- A login screen: logo, two fields and a button stacked down the centre
- A magazine page that is two-thirds photo and one-third text column
Show the answer
Symmetric: A wedding invitation with every line centred, A certificate with the seal in the middle at the bottom, A login screen: logo, two fields and a button stacked down the centre
Asymmetric: A poster with a large photo on one side and a text block on the other, A slide with a huge number on one side and a short label far across from it, A magazine page that is two-thirds photo and one-third text column
Check yourself
Negar's poster puts the photo across the two left columns and all the text in the right column, with nothing centred. That layout leans on the grid harder than a centred one would.
Show the answer
True
True. A centred layout has the centre line holding it together. Take that away and the only thing keeping a lively layout from looking scattered is the shared column lines both sides start on. Different sides, same skeleton.
Check yourself
Omid's poster has a large dark photo at the top on one side and a dark logo below it on the same side. The other side holds two thin lines of grey text. It feels as if it is tipping over. What is the best fix?
- Move a heavy element, such as a big bold title, to the light side
- Make the grey text even smaller so it doesn't compete with the photo
- Add a second dark photo under the first one so that side looks deliberate
- Draw a border around the whole poster to hold the two sides together
Show the answer
Move a heavy element, such as a big bold title, to the light side
Yes. All the weight was stacked on one side. A bold title on the other side answers the photo, and the poster stands up straight while staying lively.
Lesson recap
- A grid is a few equal columns with margins and gutters. Every element starts and ends on a column line.
- Use 2–4 columns, the same grid on every page, and break it once on purpose.
- Visual weight comes from size, darkness, colour strength and density.
- Symmetric balance is formal and calm; asymmetric balance uses a counterweight and feels lively. Asymmetry needs the grid most.
- In right-to-left layouts the grid mirrors: column 1 is on the right.