visual-hierarchylisted

# Visual hierarchy A data page fails in one of two ways: everything looks equally important, or the important thing is somewhere the eye does not go. Both are hierarchy problems, and both are decided before any styling. --- ## Rank before you lay out Write the ranking down first, in words: ``` 1. Is runway a problem? -> the headline figure 2. What changed this month? -> the bridge 3. Where is the growth coming from? -> the cohort view 4. Everything else -> table, below the fold ``` Then the layout is mostly determined: rank 1 gets size and position, rank 4 gets neither. Skipping this step is how you end up with twelve equal tiles. **One page, one primary question.** If a page has two primary questions it is two pages, or one page with a clear split. A page that answers everything answers nothing quickly. --- ## What actually creates hierarchy In rough order of strength. Reach for the cheapest one that works: | Device | Strength | Cost | |---|---|---| | **Position** (top-left in LTR reading order) | Strongest | Free | | **Size** | Very strong | Free | | **Whitespace around an element** | Strong, and underused | Space | | **Weight** (600 vs 400) | Moderate | Free | | **Colour / accent** | Moderate, and easily overspent | Cheapens fast | | **Borders and boxes** | Weak, adds noise | Visual debt | **Whitespace is the most underrated of these.** Isolating a figure makes it read as important without adding a single pixel of decora