Diagnoses and fixes visual hierarchy in a page, screen, or layout using ranked levers - size, weight, color, position, whitespace - and the one-focal-point-per-view rule. Use when someone asks "why does this layout feel flat", "what should the eye see first", "everything is competing on this screen", or wants the reading order of a composition made intentional. Do NOT use for a full multi-dimension design review covering usability and craft - use design-critique instead; for building the underlying type scale, use typography-system.
Click to play with sound.
---
name: Visual Hierarchy
description: Diagnoses and fixes visual hierarchy in a page, screen, or layout using ranked levers - size, weight, color, position, whitespace - and the one-focal-point-per-view rule. Use when someone asks "why does this layout feel flat", "what should the eye see first", "everything is competing on this screen", or wants the reading order of a composition made intentional. Do NOT use for a full multi-dimension design review covering usability and craft - use design-critique instead; for building the underlying type scale, use typography-system.
---
# Visual Hierarchy
Visual hierarchy makes the viewer's eye move in the right order. Without it every element competes, nothing lands, and the composition fails before a single word is read consciously. The expensive mistake this skill prevents is the "make it pop" spiral: adding contrast to element after element until everything shouts and nothing is heard - the fix is almost always subtraction, not addition.
## Operating procedure
Work the steps in order: the focal point decision (Step 2) governs every lever adjustment after it, so pulling levers first produces polish on the wrong structure.
### Step 1: Gather inputs
- The composition itself (screenshot, file, or description).
- The single most important action or message on this view. If the user cannot name one, that is the real problem - resolve it before touching design. Default guess: the primary call to action; label it a guess.
- The intended reading order: what should be seen first, second, third.
- Context of use: glanced at (ad, billboard, dashboard) or studied (article, settings page). Glanced compositions need steeper hierarchy.
### Step 2: Enforce one focal point per view
Every view gets exactly one point of maximum visual weight - the first thing the eye lands on. If two elements have equal weight, neither wins; the eye oscillates and comprehension drops. When a stakeholder insists two things are both most important, force the trade-off: "if a viewer sees only one thing, which one?" One focal point per view is the rule; a second "most important" element means the view should be split into two views.
### Step 3: Assign three levels, not more… install to load the full skill