Notes on Refactoring UI

Notes on Refactoring UI, an already short, punchy book about practical web design for developers. Authors: if you don't like this let me know and I'll take it down.

Starting from Scratch

• Don't start designing the "app" or layout (navigation, etc.). Start with a piece of functionality like a form.
• Detail comes later: no fonts, no colors. Keep it low-investment and disposable.
• Design a simple version -> build -> find unexpected complexity -> iterate.

Choose a Personality

• Font
  • elegant/classic: serifs
  • playful: rounded sans serif
• Border radius
  • larger radius is more playful

Limit your choices

• Define systems for everything as you need them:
  • Font size (geometric scale)
  • Font weight
  • Line height
  • Color
  • Margin (geometric scale)
  • Padding (geometric scale)
  • Width
  • Height
  • Box shadows
  • Border radius
  • Border width
  • Opacity

Hierarchy

• Looks too busy if all elements are equal
• Use a combination of these to create hierarchy:
  • font size
  • font weight
  • color
• Make muted (gray) fonts the same hue as background
• Instead of emphasizing one, you can de-emphasize the others
• Don't feel you have to make <h1> huge: choose the elements for semantics, choose the style for the hierarchy
• Destructive actions don't have to be big, red, bold: tertiary actions should be unobtrusive

Labels

• When presenting data (not in forms), try not having a label at all
• The format of the content can indicate its meaning (email address, phone number)
• Turn the label into the value (12 left in stock instead of In stock: 12)
• If you do have to have a label, make it secondary to the value
• If the user will be looking for the label, emphasize it over the data

Layout and Spacing

• Start with too much whitespace and take it away until it's OK
• If you only need 600px, use 600px. Don't take more space than you need
• Try starting with the small mobile layout first
• Some things are best with fixed width. Don't use % unless you really want it to scale.
• Relative sizes don't scale: h1 of 2.5rem might be great on desktop, too big on mobile
  • In this case there's no real relationship, so don't define the sizes relatively
  • Larger things tend to need to shrink faster than smaller things on smaller screens
• There should be more space around a group than within it

Text

• Avoid em units for font-size, use px or rem
• More condensed fonts for headlines, more spaced for body
• Use popular fonts with many weights
• Paragraphs 45-75 characters wide (20-35em wide)
• When mixing font sizes on a single line, align-items: baseline
• Line-height
  • When it's harder for the eye to scan back to the start of the next line, use larger height:
    • Long lines of text
    • Small font-size
• Links outside of text (like in cards) do not need a different color
• Alignment
  • If something is longer than 2-3 lines, don't center-align
  • Right-align numbers in tables
  • If text is justified, use hyphens: auto
• Letter spacing
  • Can go tighter for headlines when using a general-purpose font letter-spacing: -0.05em
  • Can go looser when all-caps letter-spacing: 0.05em

Color

• 8-10 shades of gray. Not true black.
• 5-10 varieties of primary color.
  • Start with one that works on a primary button (the middle)
  • Pick the darkest and lightest variants with a simple alert component
  • Fill in the gaps
  • Often want to increase saturation as lightness approaches black or white
• As an alternative to differentiating with lightness alone, rotate hue slightly away from pure red, green, or blue towards cyan, magenta, yellow to add perceived brightness relative to the pure RGB
• Give grays some warmth or coolth with some saturation
• Don't rely on color alone, think about contrast as a whole

Depth

• Try box-shadow instead of borders
  • Choose the lighter color by hand instead of alpha<1, 1 px, no blur
  • Shadow underneath with black, some blur, low alpha
• Small shadows + tight blur radius looks less raised than larger shadows with larger blur radius
• Closer to the user -> captures more attention
• Make a system of shadows with 5 different levels
• Think about where you want it to sit in the z-axis and make shadows accordingly
• Can combine one subtle larger shadow with one tighter, darker one
  • Tight one goes away with higher elevation

Images

• Text on images need consistent contrast
  • Semi-transparent overlay
  • Lower image contrast (and tweak brightness)
  • Colorize image (lower contrast, desaturate, add "solid fill" with background-blend-mode: multiply)
  • text-shadow
• Icons are made with a level of detail that fits a certain scale: you can't just blow up even SVG icons
  • Enclose in a shape with a background color
• Don't scale down big screenshots
  • Screenshot the mobile view, or use a partial screenshot
• Avoid "background bleed" (when an image's background matches the UI background) with a subtle inset box shadow

Finishing touches

• Supercharge the defaults if you need more flair
  • Bulleted list icons
  • Color or custom underline for links
  • Custom checkboxes/radio buttons
  • Borders on top of cards, under nav items, left side of alerts
• www.heropatterns.com
• Don't let the empty state be completely blank (e.g. show an image when there are no messages)
• Use fewer borders
  • Use box shadows
  • Use different background colors
  • Add extra spacing