establish-visual-hierarchy

Visual hierarchy in UI design is established by ranking primary, secondary, and tertiary elements users notice in sequence. Analyze visual weight across size, color contrast, and whitespace, then apply de-emphasis to distracting elements for clear information ordering.

Visual hierarchy fails when screens feel equally weighted or rely only on font size for priority. Common failures include lacking de-emphasis for distracting secondary elements, making everything look equally important, and having ambiguous attention order across size, weight, and color.

To determine which UI elements users notice first, assess visual weight using size, weight, color contrast, and whitespace. Analyze the screen to rank elements from primary to tertiary, ensuring the most important element stands out while softening distracting competitors.

Yes, visual hierarchy assessment applies to reviewing dashboard cards, empty-state screens, marketing pages, and any component where visual priority feels unclear. It evaluates attention order and flags when a primary CTA isn't getting enough attention.

De-emphasis in UI design is the strategy of softening secondary elements that distract from the primary focus. It involves reducing visual weight through size, weight, color contrast, and whitespace adjustments so the most important element stands out clearly.

To critique a UI design for unclear visual priority, list each element with its importance and evaluate visual weight across size, weight, color, and whitespace. Return a ranked hierarchy assessment with PASS/FAIL criteria and actionable recommendations for de-emphasizing distracting elements.