Field Guide

A newspaper website

Almost everything you've learned is working on this one front page. Follow the pins.

1. 1Flow: the logo opens the Z-path top-left; the menu completes the first sweep.
2. 2Contrast + emphasis: the red LIVE strip is the page's only loud colour.
3. 3Hierarchy: photo, headline, story, writer's name: each step down in size is a step down in importance. The caption stays glued to its photo.
4. 4Proximity: the sidebar keeps the popular links close together in one tidy left-aligned group.
5. 5Unity: the three smaller stories repeat one exact recipe: photo, headline, two lines. Learn one, you've learned them all.
6. 6Flow again: the 'All stories' button waits at the bottom-right, the end of the reading path.

A school handout

A humble photocopied handout uses the same rules as a design studio.

1. 1Hierarchy: title first and biggest, the when-and-where smaller beneath it.
2. 2Alignment: both columns hang from the same top line, and every bullet shares its column's left edge.
3. 3Proximity: arrival steps stay under one heading, visiting tips under another. Two groups, one glance.
4. 4Alignment again: in the schedule, times make one column and events another. Your eye can run straight down either.
5. 5Framing: the dashed border says 'cut here' without a single word of instruction.

A roadside billboard

Drivers get three seconds. Billboards survive on whitespace, contrast and one big idea.

1. 1Emphasis + typography: one enormous word carries the whole message. Readable at 90 km/h.
2. 2Whitespace: the empty sky around the word is what makes it land in three seconds.
3. 3Hierarchy: brand name smaller and last. You remember the joke first, the dairy second. That's on purpose.
4. 4The web address is the only tiny thing, because nobody writes down a URL at high speed. Every size here was a decision.

A weather app screen

Small screen, strict rules. Apps live or die by hierarchy and unity.

1. 1Hierarchy + emphasis: the temperature is the one number people open the app for, so it dwarfs everything.
2. 2Unity: the hour strip repeats one tiny pattern five times; the day rows repeat another.
3. 3Unity again: icon, day, condition, temperature: every forecast row is built from the same recipe.
4. 4Alignment: temperatures make their own right edge, days their own left edge. Two clean columns you scan in a blink.
5. 5Consistent placement: the tab bar lives at the bottom of every screen, so your thumb always knows where to go.

A school yearbook page

Every yearbook page is a grid working overtime. You could check it with a ruler.

1. 1Unity: every photo is the same size in the same grid. One student per box, no exceptions.
2. 2Proximity: each name sits right under its own face. Move a name two centimetres and chaos begins.
3. 3Alignment + hierarchy: the class name leads from the top-left edge; the page number stays small and out of the way.
4. 4Framing: one framed box makes the Star of the Term feel special. Only one student gets a frame.
5. 5Whitespace: the quote gets its own breathing room instead of squeezing between photos.

A comic book page

Comics steer your eyes with panels, gaps and bursts, and you never even notice.

1. 1Flow: the panels read in a Z, row by row. Comics taught the world this path.
2. 2Whitespace: the white gaps between panels (artists call them gutters) tell your brain that time passes.
3. 3Emphasis + typography: the KA-POW burst breaks the grid on purpose. Big, tilted, loud: the page's one explosion.
4. 4Unity: same border on every panel, same bubble style throughout. That's why six panels feel like one story.
5. 5Hierarchy: the tiny 'to be continued' whispers at the end; the title shouted at the start.

A kids' menu

Restaurant kids' menus are little masterclasses in grouping and playful type.

1. 1Proximity: foods live under Big bites, drinks under Sips, desserts under Sweet endings. Three groups, zero confusion.
2. 2Alignment: dotted lines connect each dish to its price, and all prices share one right edge.
3. 3Framing: the Tuesday deal sits in its own box so parents can't miss it.
4. 4Typography: one playful face for the title, one calm face for everything else. Fun, but only two voices.
5. 5Whitespace: the colouring box is mostly empty on purpose. Empty space can be an invitation.

A movie poster

The movie poster formula hasn't changed in fifty years, because its ranking works.

1. 1Hierarchy: tiny opening line, giant title, medium star names, small date, microscopic credits. Five sizes tell you what to read first.
2. 2Emphasis: one hero figure alone against the sky. Nothing competes with the star.
3. 3Contrast: pale title on a dark poster reads across a cinema lobby.
4. 4Typography: the squeezed credits block is its own famous type style. Present, but whispering.
5. 5Unity: the little studio badges at the bottom look the same on every poster in the lobby, so you know where to find them.

A cereal box

Cereal boxes fight a shelf war every morning. Every choice on the front is a weapon.

1. 1Hierarchy: the cereal name dwarfs the maker's name. On a shelf you spot CHOCO ROCKS first.
2. 2Flow: the mascot looks toward the name, pointing your eyes at it. The gaze trick again!
3. 3Framing + contrast: the FREE burst is the box's one framed shout. It's why kids grab this box.
4. 4Colour: hot orange feels energetic and grabs attention across the whole aisle.
5. 5Alignment: even here, the boring-but-required parts (nutrition, barcode) line up neatly at the bottom, out of the way.

The school concert flyer

Same information on both flyers. One respects the rules; one breaks four at once.

The news article

One of these pages respects its readers. The other makes them work for every sentence.

The music app screen

Two versions of the same screen. One feels like one product; the other feels like five.