بازطراحی رابط کاربری

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