agent-skills/sn-infographic/references/layouts/f-pattern.md

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