| name | visual-hierarchy |
| description | This skill should be used when the user asks to "improve visual hierarchy", "make elements stand out", "guide user attention", "organize UI elements by importance", "apply contrast", "use color for emphasis", or discusses element prominence, visual weight, or information delivery order in UI design. Use when this capability is needed. |
| metadata | {"author":"andybons"} |
Visual Hierarchy in UX
Visual hierarchy refers to the organization of design elements so that the eye is guided to consume each element in order of intended importance. A page's visual hierarchy directs where users focus their attention and controls information delivery.
Source: Nielsen Norman Group
Three Primary Methods
1. Color and Contrast
Use color saturation and value differences to make certain elements advance while others recede. Type contrast through bold weights, italics, or underlines also signals importance.
Best Practices:
- Reserve bright, warm colors (like red) for warnings or errors
- Limit designs to 2 primary and 2 secondary colors to avoid overwhelming users
- Use no more than 3 contrast variations in complex designs
- Never rely solely on color; account for color-blind users
2. Scale
Larger elements naturally attract attention and signal greater importance. Size serves as a direct marker for priority.
Best Practices:
- Employ only 3 size variations (small, medium, large)
- Make the most important element the largest
- Limit to a maximum of 2 large elements so they genuinely stand out
- Suggested web ranges: 14-16px body, 18-22px subheader, 32px+ header
3. Grouping (Proximity and Common Regions)
Implicit grouping through whitespace and explicit grouping via borders or backgrounds help users understand page structure and navigate attention strategically.
Best Practices:
- Increase spacing between distinct groups
- Decrease spacing between related elements
- Use containers sparingly to avoid clutter
The Squint Test
Apply blur to designs to reveal underlying hierarchy and uncover unintended emphasis caused by strong content colors. This technique highlights whether groupings work as intended.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
