Flow
Eyes follow a path. Design decides the order in which people read.
Learn
People do not look at a page in random order. Their eyes follow a path, like a slide at the playground, and designers decide where that slide goes.
The Z-path
Posters and ads read in a Z: across the top, down the diagonal, across the bottom.
Long pages read in an F: two sweeps at the top, then down the left side.
The gaze trick
Right: the face looks at the words, so you look at the words too.
Wrong: the face looks away, and your eyes drift off the page with it.
Two more tips: make it obvious whether something reads across or down, and if your layout must flow an unusual way, reveal things one at a time.
The Z-path on a real ad
Follow the numbers: 1 the logo starts the journey, 2 the menu ends the top sweep, 3 the headline waits on the diagonal, 4 the button catches you at the end. That is why nearly every ad puts its button bottom-right.
The F-path on a real article
Long pages read like an F: 1 across the headline, 2 across the first line, then 3 and 4 scanning DOWN the left edge. That is why writers put important words at the START of each line: the right side barely gets seen.
Wrong vs right
Seen in the wild
Travel sites arrange their home page along the Z-path your eyes already take.
Where will summer take you?
Hand-picked trips for curious families, from fjords to deserts.
- 1The logo sits top-left: the exact spot where the Z-path begins. Nearly every website does this.
- 2The menu ends the first sweep at the top-right corner.
- 3The headline waits along the diagonal, where your eye crosses the page.
- 4The action button sits bottom-right: the natural end of the journey, right when you're ready to act.
Practice
Drag the pieces into place