visual-hierarchy

To establish visual hierarchy in UI design, this Skill guides the arrangement of elements using size, weight, and color. It ensures one primary element stands out, reducing cognitive load and helping users quickly grasp essential information.

Designing clear CTAs requires differentiating primary and secondary actions through visual weight. This Skill enforces visual hierarchy principles to ensure your primary CTAs stand out, preventing user confusion and decision paralysis.

Scanning patterns like F-pattern and Z-pattern optimize user interface comprehension by guiding users naturally through content. This Skill applies these principles to dictate element arrangement, ensuring users follow a clear visual flow.

To optimize label-data relationships in a dashboard, this Skill ensures labels remain subordinate to the data they describe. This visual hierarchy approach makes key performance indicators immediately obvious while keeping secondary metrics less prominent.

Yes, you can apply a three-tier visual hierarchy to existing elements. The Quick Start suggests applying this hierarchy to your main heading and body text to immediately enforce clear visual importance on the current page.