Refactoring UI: A Practical UI Handbook for Non-Designers (Hierarchy · Whitespace and Spacing · Color Systems · Typography · Depth and Shadows · Image Processing · Final Polish · Practical Teardowns)
The complete curated notes for Adam Wathan & Steve Schoger's *Refactoring UI* (50+ actionable, copy-ready tips). Core stance: Good-looking UI does not rely on artistic talent, but on a set of concrete rules you can memorize — replace "going by feel" with "checking a checklist". Eight main chapters: ① Starting mindset (start from function not layout · lead with black, white and gray · limit options · define systems in advance, turn every detail you agonize over repeatedly into a rule). ② Visual Hierarchy (make important elements pop: rely not just on font size, but on 3 tiers of font weight + color; de-emphasize secondary content instead of emphasizing it; avoid labels whenever possible; classify buttons into 3 levels: primary/secondary/tertiary, dangerous actions do not need to be big and red; visual hierarchy ≠ HTML document hierarchy). ③ Whitespace and spacing (start with too much whitespace then trim back · spacing/size scales need at least a 25% difference · inter-group spacing > intra-group spacing to prevent ambiguity · grids are overrated, fixed widths are often better · do not scale proportionally · you do not need to fill the screen). ④ Color (use HSL not hex · a complete palette needs 8–10 shades of gray + 1–2 primary colors each with 9 steps + semantic auxiliary colors · predefine color steps 100–900 · grays can carry warm or cool undertones · increase saturation when lightening or darkening · shift hue when lightening to avoid washed-out gray · meet WCAG 4.5:1/3:1 contrast ratios and reverse light/dark direction to avoid oversaturation · do not rely on color alone, pair with icons/arrows). ⑤ Typography (hand-pick a type scale instead of using a formula · line length 45–75 characters · line height moves inversely with width and font size · align to baselines, do not center · left-align long text · links do not all need color · add letter spacing for all caps · use px/rem not em). ⑥ Depth (light comes from above → raised elements are bright on top with shadow below / recessed elements have shadow on top · use two layers of shadows: large soft + small sharp · 5 shadow tiers represent elevation · even flat design can create depth with light/dark contrast, solid-color shadows, and overlapping elements). ⑦ Images (use good photos, do not settle · add overlays/glows to background images to guarantee text contrast · do not enlarge small icons, do not shrink screenshots · use fixed display frames + cover for user-uploaded images). ⑧ Finishing touches (use borders sparingly, replace them with shadows/background colors/spacing · a colored top border instantly elevates polish · refine backgrounds · pay attention to empty states · break out of component conventions). Plus 3 before/after practical teardowns (content page / complex form / data dashboard). Audience: PMs building prototypes; jargon is explained inline, every tip includes Why + do/don't, all numeric values are preserved.