visual-hierarchy

Use size, weight, color, spacing, and positioning to prioritize content in your UI layout. Define distinct hierarchy levels like Primary and Secondary to guide user attention and ensure efficient scanning across web and mobile interfaces.

Standard hierarchy levels include Primary, Secondary, Tertiary, and Quaternary. These categories structure interface content by applying varying visual weights and spacing rules to prioritize information effectively within web and mobile layouts.

Use a size difference of at least 1.5x to distinguish UI elements clearly. Larger elements draw attention first, while combining this scale with bold typography and high color contrast ensures proper visual weight for primary actions.

Verify visual hierarchy by applying the squint test to check if the structure remains clear. Ensure there is only one primary action per view and avoid competing elements to maintain efficient user scanning patterns and attention flow.

Visual hierarchy rules apply directly to both web and mobile layouts. The principles of spacing, positioning, and density isolate or group elements as needed, guiding user attention and structuring common patterns effectively across platforms.

Spacing affects content importance because more whitespace around an element increases its perceived value. Isolated elements stand out and draw attention immediately, while grouped elements are processed by users as a single visual unit.