drew's blog

👋

Book Review: Refactoring UI

“Refactoring UI” is a comprehensive guide on designing for the web, spanning 8 chapters and 252 pages.

Chapter 1: Scratch

  • Start with Feature, Not Shell 🐢: Focus on the core functionality first.
  • Detail Comes Later: Add details after the main structure is in place.
  • Choose a Personality for Your Design:
    • Typography:
      • Serif (classical)
      • Rounded sans serif (playful)
      • Neutral sans serif (plain)
    • Colors:
      • Blue 💙: Safe/familiar
      • Gold 💛: Expensive/sophisticated
      • Pink 💕: Fun/not so serious
    • Border-radius: Larger radius is more playful; no radius is serious.
    • Language: Less personal tone is more official, more casual tone is friendlier.

Limit Your Choices

  • Define systems in advance.
  • Design by process of elimination.

Chapter 2: Hierarchy

  • Use border instead of font size.
  • Use softer color for secondary text instead of tiny font size.
  • Stick to 2-3 colors 💛💓💚.
  • Two font weights are usually enough, e.g., normal and heavier font.
    • Avoid fonts under 400.

Emphasize by De-emphasizing

Labels Are Last Resort

  • Combine labels and values.
  • De-emphasize labels.

Separate Visual Hierarchy from Document Hierarchy

  • Titles should be small.
  • Balance weight and contrast.
    • Example: Lower contrast of icon by giving it a softer color.

Semantics Are Secondary

  • Primary actions should be obvious.
  • Secondary actions should be clear but not prominent.
  • Tertiary actions should be discoverable but unobtrusive.

Chapter 3: Layout & Spacing

  • Use more white space.

Dense UIs 🌵

  • Design system: 16px is a good starting point.

Grids Are Overrated

  • Use percentage-based width.
    • Example: Login card – max-width, only shrinks when screen is smaller.

Relative Sizing Doesn’t Scale

Avoid Ambiguous Spacing

Chapter 4: Designing Text

  • Type System:
    • Modular scale (golden ratio)
    • Hand-crafted scale
  • Avoid em units; stick to px or rem.
  • Fonts: Neutral sans-serif (Helvetica) or system font stack.
  • Ignore typefaces with fewer than 5 weights, prefer those with 10+ weights.
  • Headlines: Tighter letter-spacing & shorter lowercase letters (x-height).
  • Smaller sizes: Wider letter-spacing & taller lowercase letters.
  • Use popular fonts like Roboto, Open Sans, Lato, Inter.
  • Steal from people who care 🥷.

Keep Line Length in Check

  • Example: 45-75 characters per line.
  • Use different widths in the same content area.

Baseline, Not Center

  • Align text on the baseline.

Line Height is Proportional ⛩️

  • Example: 1.5 is a good starting point.
    • Narrow content: shorter line-height like 1.5.
    • Wide content: line-height as tall as 2.
    • Extra line spacing for small text to make it easy for eyes 👀.
    • Large text: line-height of 1 is okay.
    • Line-height and font size are inversely proportional.

Not Every Link Needs Color

  • Use heavier font weight or darker color.
  • Use underline or change color 💜 on hover.

Align with Readability in Mind

  • Don’t center long-form text; left-align is better.
  • Re-write text if needed to center a few blocks.
  • Right-align numbers.
  • Hyphenate justified text.
  • Increase letter-spacing of all-caps text to improve readability 🤓.

Chapter 5: Working with Color

Ditch Hex for HSL

(Hue, Saturation, Lightness)

  • Hue: Position on color wheel (degrees, e.g., 0° is red).
  • Saturation: How colorful/vivid a color looks – 0% is grey, 100% is vibrant.
  • Lightness: How close to black or white 🐼.

You Need More Colors Than You Think

  • Color Palette Generator:
    • Break palette into 3 categories:
      • Grays (8-10 shades): Start with really dark grey to white.
      • Primary color(s): 5-10 lighter and darker shades.
      • Accent colors: e.g., red for destructive, yellow for warning, green for positive trend.

Define Shades Up Front

  • Yellow has higher perceived brightness than blue.

Grays Don’t Have to Be Gray

  • Use warm or cool gray.

Accessible Doesn’t Have to Be Ugly

  • WCAG: Contrast ratio of at least 4.5:1 / 3:1 for larger text.
  • Instead of light text on dark background, use dark text on light background.

Don’t Rely on Color Alone

  • Use icons for color-blind users.
    • Try contrast instead of different colors.

Chapter 6: Creating Depth

  • Emulate a Light Source 🔆:
    • Light comes from above.
    • Simulate light in UI.

Simulate Light in UI

  • People generally look slightly downward to their screens, reveal a bit of the top edge and hide the bottom edge.
  • Choose lighter color by hand instead of semi-transparent white.

Inset Elements

Use Shadows to Convey Elevation

  • Shadows position elements on a virtual z-axis 🔳.
  • Small shadows with tight blur radius make an element feel slightly raised, larger shadows with more blur make it feel closer.
    • The closer it feels, the more it attracts focus.
  • Elevation system: e.g., 5 options.

Two Shadows

  • Example: Direct light, ambient light.

Even Flat Designs Can Have Depth

  • Use color to create depth: lighter objects feel closer, darker objects feel further away.
  • Solid shadows for flat design.

Overlap Elements to Create Layers

  • Overlap images with an invisible border/gap to avoid clashing.

Chapter 7: Working with Images

  • Use good photos.

Text Needs Consistent Contrast

  • Add semi-transparent overlay to background image.
  • Lower contrast of image.
  • Colorize image.
  • Add text shadow.

Everything Has an Intended Size

  • Don’t scale up icons.
  • Enclose small icons in another shape.
  • Don’t scale down screenshots; use mobile screenshot, partial, or simplified UI.
  • Don’t scale down icons; use simplified icon.

Beware UGC

  • Control shape & size.
  • Prevent background bleed.
    • Use subtle inner box shadow or semi-transparent inner border.

Chapter 8: Finishing Touches

Supercharge the Defaults

  • Example: Replace bullets with icons, or use padlock for security-related features.

Add Color with Accent Borders

  • Add color accent to top of card.
  • Underline nav items.
  • Alongside alert message.
  • Short accent under headline.

Decorate Your Backgrounds

  • Change background color.
  • Use slight gradient (two hues no more than 30° apart).
  • Use repeating patterns.
  • Use simple geometric shapes.

Don’t Overlook Empty States

  • Emphasize CTA to encourage taking the next step.
  • Hide actions until user has created some content.

Use Fewer Borders

  • Use box shadow or different background colors.
  • Add extra spacing.

Think Outside the Box

  • Dropdown menu can be a section.
  • Table can combine columns (if not sortable).
    • Can also add images.

Leveling Up

Look for Decisions You Wouldn’t Have Made

Rebuild Your Favorite Interfaces

Conclusion

“Refactoring UI” is a good introduction to basic tips for web app design. You’ll learn about the illusion of light, design systems, and color theory.

★★★★☆

Additional Sources

Related Books

  • “Don’t Make Me Think” by Steve Krug
  • “The Design of Everyday Things” by Don Norman
  • “Steal Like an Artist” by Austin Kleon
  • “Hooked” by Nir Eyal
  • “Sprint” by Jake Knapp

Leave a Reply

Your email address will not be published. Required fields are marked *