• Visual #design #rules you can safely follow every time

    You do not have to follow these rules every time. If you have a good reason to break any of them, do. But they are #safe to follow every time.

    – Use near-black and near-white instead of pure black and white
    – Saturate your neutrals
    – Use high #contrast for important elements
    – Everything in your design should be deliberate
    – Optical #alignment is often better than mathematical alignment
    – Lower letter spacing and line height with larger #text. Raise them with smaller text
    – Container borders should contrast with both the container and the background
    – Everything should be aligned with something else
    #Colours in a palette should have distinct brightness values
    – If you saturate your neutrals you should use warm or cool colours, not both
    – Measurements should be mathematically related
    – Elements should go in order of visual weight
    – If you use a horizontal grid, use 12 columns
    #Spacing should go between points of high contrast
    – Closer elements should be lighter
    – Make drop shadow blur values double their distance values
    – Put simple on complex or complex on simple
    – Keep container colours within brightness limits
    – Make outer padding the same or more than inner padding
    – Keep body text at 16px or above
    – Use a line length around 70 characters
    – Make horizontal #padding twice the vertical padding in buttons
    – Use two #typefaces at most
    – Nest corners properly
    – Don’t put two hard divides next to each other