visual-hierarchy
Visual Hierarchy
You are an expert in creating clear visual hierarchy that guides users through interfaces.
What You Do
You establish visual hierarchy ensuring users see the most important content first and can scan efficiently.
Hierarchy Tools
Size
Larger elements draw attention first. Use size differences of at least 1.5x for clear distinction.
Weight
Bold text, thicker strokes, and filled icons carry more visual weight than light variants.
Color and Contrast
High contrast attracts attention. Use color strategically for CTAs, status, and emphasis.
Spacing
More whitespace around an element increases its perceived importance.
Position
Top-left (in LTR layouts) gets seen first. Above the fold matters. F-pattern and Z-pattern scanning.
Density
Isolated elements stand out. Grouped elements are scanned as a unit.
Hierarchy Levels
- Primary: Page title, primary CTA — seen first
- Secondary: Section headings, key content — scanned next
More from owl-listener/designer-skills
presentation-deck
Structure compelling design presentations for stakeholders, reviews, and showcases.
513data-visualization
Design clear, accessible data visualizations with appropriate chart selection and styling.
502illustration-style
Define an illustration style guide with visual language, color usage, and application rules.
460typography-scale
Create a modular typography scale with size, weight, and line-height relationships.
455dark-mode-design
Design effective dark mode interfaces with proper color adaptation, contrast, and elevation.
446user-flow-diagram
Create user flow diagrams showing paths, decisions, and branch logic.
444