# Starting from Scratch Start with a feature, not a layout Detail comes later Don’t design too much Choose a personality Limit your choices # Hierarchy is Everything Not all elements are equal Size isn’t everything Don’t use grey text on colored backgrounds Emphasize by de-emphasizing Labels are a last resort Separate visual hierarchy from document hierarchy Balance weight and contrast Semantics are secondary # Layout and Spacing Start with too much white space Establish a spacing and sizing system You don’t have to fill the whole screen Grids are overrated Relative sizing doesn’t scale Avoid ambiguous spacing # Designing Text Establish a type scale Use good fonts Keep your line length in check Baseline, not center Line-height is proportional Not every link needs a color Align with readability in mind Use letter-spacing effectively # Working with Color Ditch hex for HSL You need more colors than you think. Define your shades up front Don’t let lightness kill your saturation Greys don’t have to be grey Accessible doesn’t have to mean ugly Don’t rely on color alone # Creating Depth Emulate a light source Use shadows to convey elevation Shadows can have two parts Even flat designs can have depth Overlap elements to create layers # Working with Images Use good photos Text needs consistent contrast Everything has an intended size Beware user-uploaded content # Finishing Touches Supercharge the defaults Add color with accent borders Decorate your backgrounds Don’t overlook empty states Use fewer borders Think outside the box # Leveling Up