Refactoring UI

Starting from Scratch......Page 7
Start with a feature, not a layout......Page 8
Hold the color......Page 12
Don’t over-invest......Page 14
Don’t design too much......Page 16
Work in cycles......Page 17
Be a pessimist......Page 18
Choose a personality......Page 20
Font choice......Page 21
Color......Page 22
Border radius......Page 24
Language......Page 25
Deciding what you actually want......Page 26
Limit your choices......Page 28
Define systems in advance......Page 29
Designing by process of elimination......Page 30
Systematize everything......Page 31
Hierarchy is Everything......Page 35
Not all elements are equal......Page 36
Size isn’t everything......Page 38
Don’t use grey text on colored backgrounds......Page 42
Emphasize by de-emphasizing......Page 46
You might not need a label at all......Page 48
Combine labels and values......Page 49
Labels are secondary......Page 50
When to emphasize a label......Page 51
Separate visual hierarchy from document hierarchy......Page 54
Using contrast to compensate for weight......Page 56
Using weight to compensate for contrast......Page 58
Semantics are secondary......Page 60
Destructive actions......Page 62
Layout and Spacing......Page 65
Start with too much white space......Page 66
White space should be removed, not added......Page 67
Dense UIs have their place......Page 69
Establish a spacing and sizing system......Page 70
A linear scale won’t work......Page 71
Defining the system......Page 72
Using the system......Page 73
You don’t have to fill the whole screen......Page 76
Shrink the canvas......Page 78
Thinking in columns......Page 79
Don’t force it......Page 82
Not all elements should be fluid......Page 84
Don’t shrink an element until you need to......Page 88
Relative sizing doesn’t scale......Page 92
Relationships within elements......Page 94
Avoid ambiguous spacing......Page 96
Designing Text......Page 101
Establish a type scale......Page 102
Modular scales......Page 103
Hand-crafted scales......Page 104
Avoid em units......Page 106
Play it safe......Page 108
Ignore typefaces with less than five weights......Page 109
Trust the wisdom of the crowd......Page 110
Steal from people who care......Page 111
Developing your intuition......Page 112
Keep your line length in check......Page 114
Dealing with wider content......Page 115
Baseline, not center......Page 118
Accounting for line length......Page 122
Accounting for font size......Page 124
Not every link needs a color......Page 126
Don’t center long form text......Page 128
Hyphenate justified text......Page 130
Use letter-spacing effectively......Page 132
Tightening headlines......Page 133
Improving all-caps legibility......Page 134
Working with Color......Page 137
Ditch hex for HSL......Page 138
HSL vs. HSB......Page 140
You need more colors than you think......Page 142
Greys......Page 143
Accent colors......Page 145
Choose the base color first......Page 148
Finding the edges......Page 149
Filling in the gaps......Page 150
It’s not a science......Page 151
Don’t let lightness kill your saturation......Page 152
Use perceived brightness to your advantage......Page 153
Changing brightness by rotating hue......Page 154
Greys don’t have to be grey......Page 158
Color temperature......Page 159
Accessible doesn’t have to mean ugly......Page 162
Flipping the contrast......Page 163
Rotating the hue......Page 164
Don’t rely on color alone......Page 166
Creating Depth......Page 171
Emulate a light source......Page 172
Light comes from above......Page 173
Raised elements......Page 175
Inset elements......Page 177
Don’t get carried away......Page 179
Use shadows to convey elevation......Page 180
Establishing an elevation system......Page 182
Combining shadows with interaction......Page 183
Shadows can have two parts......Page 186
Accounting for elevation......Page 188
Even flat designs can have depth......Page 190
Creating depth with color......Page 191
Using solid shadows......Page 192
Overlap elements to create layers......Page 194
Overlapping images......Page 195
Working with Images......Page 199
Use good photos......Page 200
The problem with background images......Page 202
Add an overlay......Page 203
Lower the image contrast......Page 204
Colorize the image......Page 205
Add a text shadow......Page 206
Don’t scale up icons......Page 208
Don’t scale down screenshots......Page 210
Don’t scale down icons, either......Page 212
Control the shape and size......Page 214
Prevent background bleed......Page 216
Finishing Touches......Page 219
Supercharge the defaults......Page 220
Add color with accent borders......Page 224
Change the background color......Page 228
Use a repeating pattern......Page 230
Add a simple shape or illustration......Page 231
Don’t overlook empty states......Page 234
Use fewer borders......Page 238
Use a box shadow......Page 239
Use two different background colors......Page 240
Add extra spacing......Page 241
Think outside the box......Page 242
Leveling Up......Page 249
Look for decisions you wouldn’t have made......Page 250
Rebuild your favorite interfaces......Page 251