---
id: refactoring-ui
title: "Refactoring UI — Tactical Visual Design (Wathan & Schoger)"
category: book
platform: both
tags: [visual-design, hierarchy, spacing, color, typography, polish]
sources: ["Refactoring UI (Adam Wathan & Steve Schoger, 2018)"]
updated: 2026-07-08
---

# Refactoring UI — Tactical Visual Design Tricks

The book's thesis: you don't need innate artistic talent to make interfaces look professional — you need a bag of concrete, repeatable tactics. These are those tactics, stated as rules with before/after framing.

## 1. Starting a design

- **Start with a feature, not a layout.** Don't design the shell (navbar, sidebar, footer) first — design the actual thing the app does ("book a flight": two fields, date, button). The shell falls out of the features, never the reverse.
- **Detail comes later.** Sketch at low fidelity (thick marker, grayscale wireframe) so you can't fuss over fonts and shadows before the flow works. Hold the color.
- **Don't design too much.** Design a screen, build it, then design the next. Real data and real constraints will invalidate speculative screens ("work in cycles").
- **Design the smallest useful version.** If a feature has an optional nice-to-have (comments with attachments), ship the core (comments) first; don't let the enhancement block the design.
- **Choose a personality deliberately** and express it through consistent choices: font (serif = elegant/classic, rounded sans = playful, neutral sans = plain/professional), color (blue = safe, gold = premium, pink = playful), border radius (none = serious, large = friendly — pick one scale and never mix), and language tone. Personality drift (mixed radii, mixed tones) reads as amateur instantly.
- **Limit your choices in advance.** Define systems — a type scale, a spacing scale, a color palette, a shadow scale — then pick from the system instead of the infinite continuum. Deciding among 8 font sizes is fast; deciding among 1–100px is paralysis. If you're ever nudging by 1px, you're missing a system.

## 2. Hierarchy is everything

The single highest-leverage idea: most UIs look bad because everything competes. **Deliberately de-emphasize most things so the few important things win.**

- **Size is not the only (or best) lever.** Instead of huge primary text and tiny secondary text, use **weight and color**: dark high-contrast for primary content, medium grey for secondary, lighter grey for tertiary. Two or three text colors + two font weights (normal ~400/500, bold 600/700) cover almost everything. Before: 24px title / 12px meta. After: 18px semibold dark title / 14px regular grey meta — calmer and clearer.
- **Never use grey text on colored backgrounds** by lowering opacity alone if it looks washed out; instead hand-pick a color with the same hue as the background, lighter and less saturated. On a blue button, "grey" text should be light blue.
- **Emphasize by de-emphasizing.** If an element (e.g., active nav item) won't stand out, don't make it louder — make its siblings quieter (grey the inactive items). Competing-loudness is the default failure mode; subtraction is the fix.
- **Labels are a last resort.** "Name: Erin Lindford / Phone: (555) 765-4321" wastes hierarchy on labels. Most data is self-evident from format (email, price, name) or context. When clarity needs help, fold the label into the value ("12 left in stock", "3 bedrooms") — and when labels are truly needed (dense data-heavy pages, settings), style them as secondary, not as the loud element.
- **Semantics ≠ visual hierarchy.** An `<h1>` doesn't have to be huge; section titles often act as labels and should be small. Style by role in the visual hierarchy, not by HTML tag.
- **Balance weight and contrast.** Icons are visually "heavy" next to text — soften them (lighter grey) to balance. Thin borders that feel too faint: don't darken them, thicken them; too-heavy bold text at small sizes: reduce contrast instead of weight.
- **Actions have hierarchy too.** Per screen: one primary action (solid, high contrast), secondary actions (outline or soft background), tertiary (link-styled). **Destructive ≠ automatically big and red** — if delete isn't the primary action, make it a quiet secondary/tertiary control and save the big red button for the confirmation step.

## 3. Layout and spacing

- **Start with too much white space, then remove.** Dense-by-default reads cramped; generous-by-default reads designed. Only densify deliberately (dashboards, tables where overview is the point).
- **Use a spacing/sizing scale** with multiplicative steps, e.g. 4, 8, 12, 16, 24, 32, 48, 64, 96, 128px. Adjacent values must differ by a clearly visible ratio (~≥25%); linear 2px steps create indistinguishable choices.
- **You don't have to fill the whole screen.** A 600px-wide form on a 1400px canvas is correct — don't stretch content to the viewport. If a component needs to be small, design it small; spreading a simple form across the full width before: long input rows floating apart; after: narrow centered column, instantly scannable. Likewise, don't shrink the whole design to fit mobile — cut or stack, don't scale.
- **Grids are useful, guides not gospel.** Fixed-width sidebars beat percentage columns (a sidebar shouldn't grow because the screen did). Max-widths beat fluid everything. Let content determine size ("give it what it needs"), then use the grid for alignment.
- **Relative sizing doesn't scale.** Don't define everything in em-of-parent; large elements should shrink faster than small ones across breakpoints (a hero headline drops from 48 to 30px; body stays 16). Same for buttons: bigger buttons need proportionally more padding, small buttons proportionally less.
- **Ambiguous spacing is a bug.** Groups must be closer to their own parts than to neighbors: a heading closer to the text below it than to the section above; a form label closer to its input than to the previous field; list-item spacing greater than intra-item line-height. If grouping is unclear, fix space before adding borders.

## 4. Text

- **Type scale:** hand-pick a fixed set (e.g. 12, 14, 16, 18, 20, 24, 30, 36, 48px) rather than a mathematical ratio that yields fractional sizes. Use px/rem, not em, so sizes don't compound.
- **Font selection heuristics:** for UI, favor neutral sans-serifs with tall x-height; ≥5 weights available is a decent proxy for quality; when unsure, crib font choices from sites you admire; system font stack is a safe default.
- **Line length: 45–75 characters** (~20–35em). Even inside a wide card, constrain paragraph width.
- **Baseline-align mixed sizes** (a big number next to a small unit) rather than center-aligning.
- **Line height is proportional to both size and width:** small text and wide columns need more (up to ~2.0 at 12–14px in wide layouts); large headlines need less (~1.1–1.3). Never one global line-height.
- **Links in UI:** most UI "links" don't need blue+underline; use weight/color subtly, since half the interface is clickable anyway. Reserve loud link styling for links inside prose.
- **Alignment:** left-align by default; right-align numbers in tables (compares magnitudes); center only short, independent blocks. Justify only with hyphenation enabled.
- **Letter-spacing:** tighten slightly on large headlines (fonts are spaced for body sizes); widen for ALL-CAPS labels.

## 5. Color

- **Work in HSL**, not hex — hue/saturation/lightness map to how humans reason about color.
- **You need more colors than you think:** ~8–10 shades of grey, 5–10 shades of the primary, and 5–10 shades of each accent/semantic color (red destructive, yellow warning, green positive) — defined up front, not improvised per screen.
- **Build a shade scale:** pick the base (works as a button background) first, then the darkest (text) and lightest (tinted background) ends, then fill gaps to ~9 steps. Don't generate shades by lightness alone: **as a color lightens, reduce saturation compensation is needed; as it darkens or lightens away from base, increase saturation** to avoid washing out. For brighter perceived shades without white-wash, **rotate hue toward the nearest bright hue** (yellow, cyan, magenta); darker: rotate toward red, green, blue. Never rotate more than ~20–30°.
- **Greys don't have to be grey:** cool greys = saturate with blue; warm greys = saturate with yellow/orange. Pick a temperature and use it everywhere.
- **Accessible doesn't have to be ugly:** to hit 4.5:1 on colored backgrounds, flip the contrast — instead of white text on medium blue, use dark blue text on light blue background. Same for badges/alerts.
- **Never rely on color alone** to convey meaning (colorblind users): pair with icons, text, or position; for positive/negative use contrast (grey vs. red) not just red/green.

## 6. Depth: shadows, layers, borders

- **Light comes from above.** Raised elements (buttons): subtle lighter top edge, small dark shadow below. Inset elements (wells, checked checkboxes, inputs): slightly darker top inner shadow.
- **Define a shadow scale (~5 levels)** and map elevation to meaning: small tight shadows for buttons/cards, medium for dropdowns, large soft for modals. Shadows also serve interaction: increase shadow while dragging; a button pressing down loses its shadow.
- **Two-part shadows look best:** one larger soft ambient shadow + one tighter darker direct shadow; the tight one fades first as elevation increases.
- **Flat designs can still have depth:** lighter = closer, darker = recessed; short vertical offset solid shadows keep depth without gradients.
- **Overlap elements to create layers:** cards straddling two background colors, avatars overlapping a stack (with a background-colored ring to fake a border), an image extending past its card. Overlap instantly reads as "designed."
- **Fewer borders:** before reaching for a 1px line, try a box-shadow, different background colors between sections, or simply more spacing. Border-everything is the #1 cluttered-UI smell.

## 7. Images

- **Use good photos or none.** A mediocre phone snapshot destroys otherwise-good design; use professional stock or real professional photography, or design a no-photo layout.
- **Text over images needs a treatment:** darken overlay, lower image contrast, colorize (desaturate + primary-color multiply), or a soft text-shadow "glow". Never raw white text on a raw photo.
- **Everything has an intended size:** icons designed at 16–24px look chunky and amateur scaled to 3×; instead, keep the icon small inside a colored shape/container. Screenshots shrunk to fit look illegibly dense — take them at small viewport widths, crop to the relevant portion, or draw simplified representations. Favicons enlarged look terrible — recreate simple flat versions.
- **User-generated content:** control the shape (center-crop into fixed containers) and prevent background bleed (a subtle inner shadow/ring instead of a border keeps white logos from disappearing on white cards).

## 8. Finishing touches — cheap polish

- **Supercharge the defaults:** replace list bullets with icons (checkmarks for features, arrows for links), style blockquotes as designed testimonial cards, make checkboxes/radios brand-colored custom controls, promote quotes' quotation marks into graphic elements.
- **Add color with accent borders:** a 3–4px colored border on top of a card, left of an alert, under the active tab, or a full-width page top strip — big polish for zero artistic skill.
- **Decorate backgrounds:** change background color per section, use a subtle gradient (two hues ≤30° apart), a low-contrast repeating pattern or texture, or a few simple geometric shapes anchored to corners — keeps long pages from feeling monotonous.
- **Design empty states deliberately:** they're a first impression. Image/illustration + one-line explanation + prominent CTA; hide the unusable chrome (filters, tabs) until there's content to act on.
- **Fewer borders** (again — it's the highest-frequency fix): spacing, background shifts, and shadows almost always beat lines.
- **Think outside the "expected" component:** a dropdown can be a rich multi-column panel with icons and sections; a table can embed avatars, stacked primary/secondary text, and colored status pills instead of one string per column; radio buttons for plans can be selectable cards.

## 9. Working method

- **Steal deliberately:** when a screen feels off, find a well-designed product solving the same problem and identify *specifically* what they do differently (spacing, shade count, weight contrast).
- **Iterate by subtraction first:** most "make it pop" problems are actually "everything else is too loud."
- **Rebuild your systems as you go:** every one-off value (a 13px font, a #454A52 grey) is a future inconsistency; fold it into the scale or remove it.

## 10. Before → after quick reference

Concrete transformations to apply mechanically when reviewing a screen:

- **Loud metadata:** Before — dates/IDs in the same dark 16px as titles. After — 14px, mid-grey; titles unchanged. The list suddenly has hierarchy.
- **Label-heavy detail view:** Before — "Email: jane@x.com / Role: Admin". After — jane@x.com in dark text, "Admin" as a small tinted pill; labels deleted.
- **Everything bordered:** Before — cards with borders inside a bordered panel with divider lines. After — borders removed, groups separated by background shade + spacing; one shadow on the outer card.
- **Stretched form:** Before — full-width inputs across a 1200px page. After — 480–640px centered column; related short fields (city/postcode) share a row.
- **Buried primary action:** Before — three identical grey buttons. After — one solid primary, one ghost secondary, "Delete" demoted to a red text link.
- **Cramped card:** Before — 8px padding everywhere. After — 24px padding, 12px between internal elements; same content feels premium.
- **Muddy hero text on photo:** Before — white text directly on image. After — image darkened 40% or brand-color multiply; text now readable and on-brand.
- **Giant scaled icon:** Before — 24px icon scaled to 72px in a feature grid. After — 24px icon centered in a 48–64px tinted circle.
- **Wall-of-text table:** Before — 8 plain text columns. After — key column gets two-line primary/secondary stacking, status becomes a colored badge, numbers right-aligned, low-value columns dropped.
- **Timid headline:** Before — 20px grey heading over 16px grey body. After — 30px, weight 700, near-black heading; body stays 16px mid-grey. Contrast, not decoration.

## 11. Component-level recipes

**Buttons:**
- Padding grows non-linearly with size: large CTA ≈ 16×32px padding; default ≈ 10×20; small ≈ 6×12 with a smaller font. Never one padding token for all sizes.
- Hierarchy per screen: solid primary, soft/outline secondary, link tertiary; icon-only buttons get tooltips and generous hit areas.

**Forms:**
- Labels: small (13–14px), medium grey, 4–8px above the input — the input's content is the star, not the label.
- Group related fields on one row only when they form one mental unit (first/last name, city/postcode).
- Helper text below the field in caption style; error text replaces helper, same slot, red only for the message and border — don't repaint the whole field group.

**Cards:**
- Padding scales with card size (small card 16px, large 24–32px); internal hierarchy: image → title (semibold, dark) → metadata (small, grey) → action.
- Prefer shadow + background over border; hover raises elevation one step.

**Navigation:**
- Active item: contrast (dark text, tinted background, or accent indicator bar) while siblings are mid-grey — de-emphasize to emphasize in its purest form.
- Section labels in sidebars: 11–12px letterspaced caps, light grey — present but nearly silent.

**Tables:**
- Header row: caption-style (small, grey, medium weight, optionally caps) so data outweighs headers.
- Row height ≥ 44–48px with 12–16px cell padding; zebra stripes or generous spacing, not both plus borders.
- Emphasize one scan column (usually the first): darker and slightly heavier than the rest.

**Modals:**
- One job per modal; title (H3-scale), body (regular grey), actions right-aligned (desktop) with primary outermost; lg shadow, scrim at ~50% black; max-width ~480–560px for confirmations.

## 12. Decision defaults (when unsure, pick these)

- Body text 16px; secondary 14px; captions/labels 12–13px letterspaced caps or 13px grey.
- Weights: 400/500 for body, 600/700 for emphasis and headings — skip anything lighter than 400 on screens.
- Spacing: default gap between unrelated blocks 24–32px; related items 8–12px; card padding 16–24px.
- Border radius: pick 4–6px (neutral-professional) or 10–16px (friendly) across the whole product.
- Greys: slightly cool-tinted 9-step ramp; text uses steps ~900/700/500 on white.
- Shadows: sm for interactive resting elements, md for popovers, lg for modals — nothing else.
- One accent color doing the primary-action job everywhere; semantic red/yellow/green reserved for meaning.

## Quick audit checklist

- [ ] Systems exist and are obeyed: type scale, spacing scale, grey scale, shadow scale, color shades
- [ ] Hierarchy via weight/color, not size alone; secondary content visibly quieter; one primary action per screen
- [ ] Labels only where data isn't self-evident; labels styled quiet
- [ ] Whitespace generous; grouping unambiguous (closer-within than between); content not stretched to fill
- [ ] Line length 45–75ch; line-height varies with size; numbers right-aligned in tables
- [ ] Colors in HSL with full shade ramps; no color-only meaning; contrast flipped (dark-on-light) where needed
- [ ] Light-from-above depth; two-part shadows on a 5-step scale; borders replaced by space/shadow/background where possible
- [ ] Empty states designed; accent borders/background sections used for cheap polish; no scaled-up icons or shrunken screenshots