UX/UI Design: Foundations to Practice · Visual Design Principles
Visual Hierarchy
Visual hierarchy determines the specific order in which a person's attention moves across a screen, and a screen with no deliberate hierarchy forces every viewer to do the work of figuring out what actually matters most on their own.
Visual hierarchy is the deliberate arrangement of size, color, contrast, and position to guide a viewer's attention in a specific, intended order, ensuring the single most important element on a screen is genuinely the first thing noticed, with progressively less critical elements receiving progressively less visual weight, rather than every element on a screen competing equally for a viewer's attention with no clear priority established at all.
Key Takeaways
- Visual hierarchy deliberately arranges size, color, contrast, and position to guide attention in a specific order, from most to progressively less important.
- Size and contrast are the strongest hierarchy signals; an important element rendered small and low-contrast will struggle to draw attention regardless of its conceptual importance.
- Emphasizing every element as equally important produces the practical equivalent of emphasizing nothing, since hierarchy is an inherently relative, comparative signal.
- The squint test, blurring a design until details are illegible, reveals whether the actual most important element draws the eye first, before conscious detail processing.