Design Rules You Can Always Follow
Use near-black and near-white instead of pure black and whiteඞ
Saturate your neutralsඞ
If nothing else, add just a hint of color to your near-black and near-white.
Use high contrast for important elementsඞ
Everything in your design should be deliberateඞ
Why is the font size as it is? How about letter spacing? Margins around different elements?
Optical alignment is often better than mathematical alignmentඞ
Moreso for irregular shapes and elements.
Measurements should be mathematically relatedඞ
Probably not always, but it many cases it can make the design feel more coherent. Is kind of at odds with the earlier optical vs mathematical alignment.
Lower letter spacing and line height with larger text. Raise them with smaller textඞ
The bigger the text, the less space you need between each letter and each line.
Container borders should contrast with both the container and the backgroundඞ
Border should be darker or brigther than both not something in the middle of the other elements.
Everything should be aligned with something elseඞ
If we want to feel like the elements are related to each other. Things that are aligned feel like they belong together and vice-versa.
Colours in a palette should have distinct brightness valuesඞ
It will feel like the colours don’t compete with each other as much.
If you saturate your neutrals you should use warm or cool colours, not bothඞ
Elements should go in order of visual weightඞ
Left to right for westeners for example.
If you use a horizontal grid, use 12 columnsඞ
12 column grid can be broken up into 1 column, 2 columns, 3 columns, and 4 columns, so it gives you a lot of flexibility.
Spacing should go between points of high contrastඞ
Closer elements should be lighterඞ
Feels more natural because it simulates how light often bounces in real life.
Make drop shadow blur values double their distance valuesඞ
Put simple on complex or complex on simpleඞ
A complex background (e.g. a colourful gradient fill) works best if the foreground (e.g. text) is simple. (Remember the black car with color fade text vinyl in Need For Speed)
Keep container colours within brightness limitsඞ
The brightness difference between background and container should be within 12% for dark interfaces, and 7% for light interfaces.
Make outer padding the same or more than inner paddingඞ
Keep body text at 16px or aboveඞ
16px is the default text size in most browsers.