Layout is deciding what matters most.
You now have colours and fonts. Layout is where you put them: what's big, what's small, what goes first, and how much space each thing gets to breathe.
Same five pieces. Four moves.
- Random placementEverything floats at odd angles. It feels amateur even if each piece is nice.
- Add a gridSix invisible columns. Professionals set these up before placing anything.
- Snap to itEvery edge now lines up with a column. Alignment = instant order (the A in C.R.A.P.).
- Hierarchy + spaceOne big title, less text, more breathing room. Space makes it feel premium.
- The squint testBlur it. Can you still tell what matters most? The title still wins, so ship it.
Designer Robin Williams packed basic layout into four principles in The Non-Designer's Design Book. The acronym is silly on purpose so you never forget it.
Contrast
If two things aren't the same, make them very different. Big vs small, bold vs light. Timid differences look like mistakes.
Repetition
Reuse the same colours, fonts, shapes and spacing. Repetition creates a system, and a system feels professional.
Alignment
Nothing goes on the page randomly. Every element lines up with something else. Invisible lines create order.
Proximity
Group related things together and separate unrelated ones. (That's Gestalt from Chapter 02, put to work.)
Think of a school line-up. Teachers stand out (contrast), everyone wears the same uniform (repetition), kids stand in straight lines (alignment), and each class stands together (proximity). That's a layout!
Same words. Totally different poster.
Visual hierarchy is the order the eye reads things in. Without it, everything shouts at the same volume, which means nothing gets heard. Toggle it:
Hierarchy tools, from strongest to weakest: size → colour/contrast → weight → position → space around it → style.
Squint (or blur the design) until you can't read the words. What do you still see first? If it's the right thing, your hierarchy works. Designers do this constantly.
Saturday 14 November · 7 PM
Night Market
Street food, live music and local makers under the lights.
Old Mill Courtyard, Pune
Free entry →
The invisible skeleton of every page
Swiss designer Josef Müller-Brockmann wrote the bible on this, Grid Systems in Graphic Design (1981). A grid is a set of invisible columns and rows. It makes alignment automatic and lets many pages feel like one family.
Single column
Books, blog posts, simple mobile screens. One block of text. Calm and focused.
Column grid (6 or 12)
Websites and magazines. 12 columns can be split into halves, thirds, quarters and sixths, which makes it super flexible.
Modular grid
Columns and rows make a field of boxes. Posters, dashboards and photo-heavy layouts. Elements span several modules.
Most product teams size and space everything in multiples of 8 (8, 16, 24, 32, 48, 64...). It divides cleanly on most screens and kills the endless "13px or 14px?" debate. Google's Material Design uses an 8dp grid with 4dp for small details.
Where things sit changes how they feel
Same four shapes, three arrangements. Watch them move.
- Centred / symmetrical: stable, formal, calm, but can feel dull.
- Rule of thirds: put focal points where the third-lines cross. Natural and balanced, borrowed from photography.
- Asymmetric: tension, energy, movement. Elements bleeding off the edge feel modern and confident.
About the golden ratio (1.618): it's a nice proportion, but claims that famous logos are "built on it" are mostly drawn on after the fact. Use it as a tool, not a religion.
Empty space isn't wasted space
Whitespace (or "negative space") is any empty area, whatever its colour. Beginners fear it and fill every gap. Professionals use it on purpose.
Cramped: feels cheap, urgent, discount-store.
Spacious: feels calm, premium, confident.
Space signals price. Compare a discount supermarket flyer with an Apple product page. Luxury brands "waste" space to show they can afford to.
A fancy restaurant puts one tiny beautiful thing in the middle of a big white plate. A cafeteria piles everything on. The empty plate is what makes it feel special.
Homework
Find the grid
Screenshot 3 websites you like. In Figma, draw lines over every edge things align to. You'll uncover the grid.
Three-poster drill
Take one event (title, date, place, image) and make three posters: centred, rule-of-thirds and asymmetric.
Redesign a bad flyer
Find a cluttered local flyer or menu. Redesign it using C.R.A.P. Put the before and after side by side, because that's portfolio gold.
Squint everything
For one week, squint at every design you make before calling it done.