Refactoring UI, in detail
Refactoring UI is a self-published book by Adam Wathan and Steve Schoger, both of whom built their audiences through Twitter by posting before-and-after UI redesigns. The book compresses those redesigns into a dense, visually driven manual for making interfaces look professional without a formal design background. It is aimed primarily at developers who build their own interfaces and want practical guidance on the decisions that separate polished from amateur.
The book is organized around decisions rather than principles. Rather than explaining design theory, it demonstrates specific choices: how much whitespace to add, when to use font weight versus font size to establish hierarchy, why bright colors work best as accents rather than backgrounds, how to test whether a shadow is doing any work. Each section shows a before version — something that looks like it came from a developer with no design training — and an after version that addresses one or two specific problems. The approach is deliberately practical; Wathan and Schoger have little interest in abstraction.
The most useful sections address visual hierarchy and typography. The authors argue that most interface problems are really hierarchy problems: the user can't tell what to look at first because everything has similar visual weight. The solution is almost always to reduce the prominence of secondary elements rather than to amplify the primary one — a counterintuitive move that produces cleaner, quieter interfaces. On typography, they give specific guidance that most tutorials don't: don't use pure black text on white, limit yourself to two typefaces, don't rely on font size alone to signal importance.
The book's limitation is its self-published format: there is no ISBN, it is sold only through the authors' website, and the content skews toward product interfaces (dashboards, forms, lists, cards) rather than editorial or marketing design. Developers building web products will find it directly applicable; designers working in other contexts will find it more selective. It is also not a comprehensive design education — it is closer to a collection of heuristics that address the most common mistakes specifically.
The big ideas
- 1.
Most interface problems are hierarchy problems. When nothing has priority, nothing is readable. The fix is usually to reduce secondary elements rather than amplify the primary one.
- 2.
Start with too much whitespace and remove it. Interfaces that look cramped almost always have too little space; adding white space is cheaper and cleaner than any decorative fix.
- 3.
Don't rely on font size alone to create hierarchy. Varying font weight, color opacity, and letter spacing communicates importance more subtly and more flexibly.
