visual-hierarchy

What problem does it solve?

This Skill addresses the challenge of creating visually organized and scannable interfaces where users can quickly understand the most important information and actions. It prevents user confusion and decision paralysis by ensuring a clear visual flow.

Core Features & Use Cases

• Establish Dominant Elements: Ensures one primary element stands out on each screen or section.
• Implement Scanning Patterns: Guides users through content using F-pattern and Z-pattern principles.
• Design Clear CTAs: Differentiates primary and secondary calls to action through visual weight.
• Optimize Label-Data Relationships: Ensures labels are subordinate to the data they describe.
• Use Case: When designing a dashboard, this skill helps ensure the key performance indicators (KPIs) are immediately obvious, while secondary metrics and labels are less prominent, allowing users to grasp the essential information at a glance.

Quick Start

Apply the three-tier visual hierarchy to the main heading and body text of the current page.