Visual Flow
The path the eye follows through a design, guided by size, contrast, position, and space.
Plain English
Visual flow is the story the eye tells itself as it moves through a design. Every element's size, weight, colour, and position contributes to directing that path. The goal: the eye should naturally move from the most important thing (hero headline) to the second most important (value proposition) to the third (CTA) — without the user having to work to find the reading order. The Z-pattern works for sparse pages; the F-pattern for dense content. Without intentional flow, the eye bounces randomly and users disengage.
Technical
Visual flow is created by varying the visual weight, size, and contrast of elements to create a clear hierarchy. Key patterns: Z-pattern (top-left to top-right, diagonal to bottom-left, to bottom-right) — works for low-content marketing pages; F-pattern (left-to-right, left-to-right, left scan) — works for text-heavy content and feeds. Tools: vary font size, font weight, whitespace, colour, and position. Eyetracking studies confirm: users first look at the top-left, then sweep right, then drop down.
Live Demo
Visual Flow
❌ No clear flow
Inconsistent sizes — where to look?
✓ Z-pattern flow
Design for the eye's natural path: Z-pattern for marketing, F-pattern for content.
Usage
✓ Good usage
Place the hero headline at maximum visual weight top-centre, the subheadline below it, and the CTA at the bottom of the Z-pattern — the eye naturally follows to the action.
✗ Bad usage
Placing the primary CTA in the top-right corner with the same visual weight as navigation items — users must hunt for the primary action.
Recommended values
- Starting point: top-left (logo or most important thing)
- Primary: highest visual weight element above the fold
- Secondary: 2nd most important, positioned to receive the eye after primary
- CTA: placed at the natural end of the visual flow, not randomly
- Z-pattern: horizontal top → diagonal → horizontal bottom (sparse layouts)
- F-pattern: left-heavy, scannable, consistent left alignment (content lists)
Common mistakes
- CTA placed at the bottom of a long scroll without any above-the-fold signal.
- Equal visual weight across all elements — no obvious entry point for the eye.
- Conflicting focal points — two elements at maximum visual weight compete.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Design for a Z-pattern flow: logo and nav top-left, headline top-centre (maximum weight), supporting text middle, CTA bottom-centre. Each element's visual weight decreases as the eye moves through the Z. No competing focal points.