Learn visual design rules that can be followed every time to create coherent and visually appealing designs. Find out how to create a cohesive color palette, align elements, determine spacing, handle shadows, set text size, design buttons, create rounded corners, and avoid hard visual divides.
Table of contents
Use near-black and near-white instead of pure black and whiteSaturate your neutralsUse high contrast for important elementsEverything in your design should be deliberateOptical alignment is often better than mathematical alignmentLower letter spacing and line height with larger text. Raise them with smaller textContainer borders should contrast with both the container and the backgroundEverything should be aligned with something elseColours in a palette should have distinct brightness valuesIf you saturate your neutrals you should use warm or cool colours, not bothMeasurements should be mathematically relatedElements should go in order of visual weightIf you use a horizontal grid, use 12 columnsSpacing should go between points of high contrastCloser elements should be lighterMake drop shadow blur values double their distance valuesPut simple on complex or complex on simpleKeep container colours within brightness limitsMake outer padding the same or more than inner paddingKeep body text at 16px or aboveUse a line length around 70 charactersMake horizontal padding twice the vertical padding in buttonsUse two typefaces at mostNest corners properlyDon’t put two hard divides next to each other4 Comments
Sort: