Visual design rules you can safely follow every time

Tags

Top Highlights

• Optical alignment is often better than mathematical alignment

• Don’t use pure black or white, only near-black and near-white

• Colours in a palette should have distinct brightness values

• Use two typefaces at most

• Make horizontal padding twice the vertical padding in buttons

• Keep body text at 16px or above

• Saturate your neutrals A neutral is generally a black, white, or grey. If you use colour in your interface, add a little bit of that colour to your neutrals. This will make the colour palette feel more coherent. If you use the HSB colour system less than 5% saturation should do it.

• For example, some odd shapes have a visual centre that is different from their mathematical centre. Often you will need to align things by eye so that it looks right.

• Make drop shadow blur values double their distance values

• Saturate your neutrals

• Use high contrast for important elements

• Everything in your design should be deliberate

• Container borders should contrast with both the container and the background

• Everything should be aligned with something else

• 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

• Use a 12 column grid

• Use a line length around 70 characters

• Make outer padding the same or more than inner padding