39 lines
1.0 KiB
Markdown
39 lines
1.0 KiB
Markdown
# 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 layouts
|
|
- `high-contrast-ad`: High-impact promotional designs
|
|
- `ui-wireframe`: Landing page wireframes
|