1.0 KiB
1.0 KiB
z-pattern
Eye movement follows a Z path: top-left → top-right → bottom-left → bottom-right.
Structure
- Key elements placed at the four corners of the Z path
- Top horizontal: title and primary hook
- Diagonal: supporting visual or transition element
- Bottom horizontal: CTA or conclusion
- Leverages natural Western reading eye movement
Best For
- Landing page style infographics
- Marketing and promotional content
- Content with a clear call to action
- Two-column layouts with diagonal flow
Visual Elements
- Strong anchor elements at Z corners
- Diagonal visual element (image, arrow, or line) connecting mid-points
- Clear visual hierarchy along the Z path
- Negative space guiding the eye
Text Placement
- Headline at top-left
- Supporting info at top-right
- Key visual or transition at center diagonal
- CTA or summary at bottom-right
Recommended Pairings
corporate-memphis: Marketing layoutshigh-contrast-ad: High-impact promotional designsui-wireframe: Landing page wireframes