Back to the bookshelf
Refactoring UI
Adam Wathan & Steve Schoger
The TL;DR
Tactical design rules for engineers and non-designers who want their interfaces to look professional without hiring a designer. The core principles: establish visual hierarchy with size, weight, and color — not three sizes of bold text. Use a limited type scale and a strict spacing scale (4pt or 8pt increments). Pick a small palette with many shades of one neutral and one accent, not many hues. Don't use gray text on colored backgrounds — it looks muddy. Reduce noise by using fewer borders, more whitespace, and clearer alignment. Design in grayscale first to force focus on contrast and hierarchy before color becomes a distraction.
Core ideas
- 1Establish a visual hierarchy with size, weight, and color — not three sizes of bold.
- 2Use a limited type scale and a defined spacing scale.
- 3Color: pick a small palette with many shades, not many hues.
- 4Don't use gray text on a colored background.
- 5Reduce noise: fewer borders, more whitespace, clearer alignment.
Key quotes
"Start with too much white space, then take some away."
"Define a system early, then design within it."
"Designing in grayscale first forces you to focus on contrast and hierarchy."
Apply it this week
- →Adopt a strict 4 or 8 pt spacing scale across the app.
- →Audit your color palette and consolidate to one neutral + one accent + shades.
- →Design your next screen in grayscale before adding color.
More in this shelf