Visual Hierarchy Under Pressure
Day 14 of 30 · The Playbook 2026 – Masterclass for Designers
Keep hierarchy when information is dense (dashboards, lists, cards).
Learning Goal
- Hierarchy tools: size, weight, contrast, spacing, color, icon.
- List/card hierarchy template.
- Overload reduction rules (truncate, progressive disclosure).
- Document good/bad examples.
Why This Matters
- Heavy data → attention breaks.
- Hierarchy guides to the signal.
- Poor lists/cards erode trust.
Explanation
- Use type (size/weight), color sparingly, spacing, icon, background.
- Progressive disclosure: show less, reveal more on action.
- Truncate + tooltip for long content.
Examples
Bad: Same size/weight, random colors.
Good: Title 16/20 bold, meta 12/16 muted, spacing tokens, status icon only where needed.
Guided Exercise (10–15 minutes)
- Create list/card hierarchy template (title, meta, badge, action).
- Write rules: when to truncate vs multi-line.
- Document good/bad example.
Independent Exercise (5–10 minutes)
Apply to a dashboard widget; capture before/after.
Self-Check
- Hierarchy template exists.
- Truncate/progressive rules set.
- Good/bad examples documented.
Optional Deepening
- NNG list design: https://www.nngroup.com/articles/lists/
- Progressive disclosure: https://www.nngroup.com/articles/progressive-disclosure/