DesignDojo
1.1-first-principles · 01-eye-has-a-path

Estimated time: 8 min

Z-PatternF-Pattern
Z and F scan paths

Where The Eye Enters

You usually get one strong first look near the upper left. Put the main promise there and remove competing noise.

Two Fast Scans

Landing pages

Z scan: headline -> proof -> CTA

Content-heavy pages

F scan: heading rail -> first lines -> section jumps

Z patterns work when content is sparse and directional. F patterns win when people skim blocks of information.

Why Pages Feel Lost

Equal-size blocks and scattered CTAs split attention into too many first stops.

If everything shouts, nothing leads. You fix confusion by creating one obvious first stop and one clear second stop.

Hero headline is largest, supporting proof sits below it, and CTA appears on the scan line end.

Exercise

Pick your app's current homepage and mark the first three gaze stops in order.

Scan Path

The order your eye follows while deciding what matters first, second, and third.

Entry Point

The first visual anchor that earns attention and starts the rest of the layout story.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Proximity = Relationship