Contents

  • Starting from Scratch
    • Start with a feature, not a layout 7
    • Detail comes later 10
    • Don’t design too much 13
    • Choose a personality 17
    • Limit your choices 24
  • Hierarchy is Everything
    • Not all elements are equal 30
    • Size isn’t everything 32
    • Don't use grey text on colored backgrounds 36
    • De-emphasize to emphasize 39
    • Labels are a last resort 41
    • Separate visual hierarchy from document hierarchy 46
    • Balance weight and contrast 48
    • Semantics are secondary 52
  • Layout and Spacing
    • Start with too much white space 56
    • Establish a spacing and sizing system 60
    • You don’t have to fill the whole screen 65
    • Grids are overrated 72
    • Relative sizing doesn’t scale 79
    • Avoid ambiguous spacing 83
  • Designing Text
    • Establish a type scale 88
    • Use good fonts 94
    • Keep your line length in check 99
    • Baseline, not center 102
    • Line-height is proportional 105
    • Not every link needs a color 109
    • Align with readability in mind 111
    • Use letter-spacing effectively 115
  • Working with Color
    • Ditch hex for HSL 119
    • You need more colors than you think 123
    • Define your shades up front 129
    • Don’t let lightness kill your saturation 133
    • Greys don’t have to be grey 139
    • Accessible doesn’t have to mean ugly 142
    • Don’t rely on color alone 146
  • Creating Depth
    • Emulate a light source 150
    • Use shadows to convey elevation 158
    • Shadows can have two parts 163
    • Even flat designs can have depth 167
    • Overlap elements to create layers 170
  • Working with Images
    • Use good photos 174
    • Text needs consistent contrast 176
    • Everything has an intended size 181
    • Beware user-uploaded content 187
  • Finishing Touches
    • Supercharge the defaults 192
    • Add color with accent borders 195
    • Decorate your backgrounds 198
    • Don’t overlook empty states 203
    • Use fewer borders 206
    • Think outside the box 210
  • Leveling Up
    • Leveling up 215
Back to the landing page