Rule: Visual Hierarchy Principles

Priority: MEDIUM Category: Visual Design

Description

Visual hierarchy directs user attention and communicates the relative importance of elements on a screen. A strong hierarchy means users instinctively know where to look and what to do.

Guidelines

Establishing Hierarchy

Size: Larger elements attract attention first; use for headings and primary CTAs
Contrast: High contrast draws the eye; use for key actions and critical information
Color: Saturated or brand colors for emphasis; muted tones for secondary elements
Position: Top-left scanned first (LTR languages); place key content in the F-pattern or Z-pattern
Whitespace: Generous spacing isolates and elevates important elements
Typography: Weight, size, and style create clear content levels

Typography Scale

Limit to 3-4 distinct text sizes per screen
Maintain a consistent ratio between levels (1.25x or 1.333x scale)
Use weight (bold vs. regular) to differentiate within the same size
Reserve ALL CAPS for very short labels only (buttons, tags)

Color Usage

Primary color for main CTAs and key interactive elements
Neutral colors (grays) for body text and secondary elements
Semantic colors for feedback: green (success), red (error), yellow (warning), blue (info)
Limit accent colors to 1-2 per screen to maintain focus

Layout Principles

Align to a consistent grid (8px base unit is standard)
Use consistent spacing between related elements (tighter) vs. unrelated elements (looser)
Group related items visually using proximity and shared containers
Leave breathing room — cramped layouts increase cognitive load

Common Mistakes

Making everything bold or large (if everything is emphasized, nothing is)
Using too many colors without clear purpose
Inconsistent spacing that makes the layout feel chaotic
Competing CTAs of equal visual weight on the same screen
Decorative elements that distract from content and actions

2.0 KiB Raw Blame History