first commit
This commit is contained in:
36
sn-infographic/references/layouts/f-pattern.md
Normal file
36
sn-infographic/references/layouts/f-pattern.md
Normal file
@@ -0,0 +1,36 @@
|
||||
# f-pattern
|
||||
|
||||
Eye scans the top and left side, forming an F shape.
|
||||
|
||||
## Structure
|
||||
|
||||
- Most important content in the top horizontal band
|
||||
- Second most important in a secondary horizontal band
|
||||
- Left-aligned content for the vertical scan
|
||||
- Right side less prominent, used for supporting details
|
||||
|
||||
## Best For
|
||||
|
||||
- Text-heavy infographics
|
||||
- Report or article-style layouts
|
||||
- Content where hierarchy matters most
|
||||
- Designs optimized for quick scanning
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Strong top banner with headline and key visual
|
||||
- Left-aligned content column
|
||||
- Secondary horizontal accent below the top band
|
||||
- Right column for supplementary info
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Primary headline in top band
|
||||
- Key points left-aligned in the vertical column
|
||||
- Supporting details in the right column
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `aged-academia`: Editorial report layouts
|
||||
- `ui-wireframe`: Content-heavy wireframes
|
||||
- `corporate-memphis`: Structured business reports
|
||||
Reference in New Issue
Block a user