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

Recent posts

Projects

LostCat Ithaca