Visual design rules you shouldn’t break

Visual design is a spaghetti mess of different possible directions and “it just feels right this way”. As a new designer you might not know where to start. Have no fear: here are some visual design rules that you can safely follow every time. As you improve, you can more confidently break these rules.

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

Pure black looks unnatural on a screen, and pure white is too bright. Use a vey dark and very light grey, respectively. Any other references to “black” and “white” in these rules assume you’re following this rule.

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. If you use the HSB colour system (and you should) less than 5 Saturation should do it.

Less contrast for structural elements, more contrast for content

Structural elements are those that make up the layout of the page. If you have a card, for example, that’s a structural element. So is the page background. For these structural elements you should use colours that contrast a little with each other. In practice this means if your background is black the card should be slightly less black, not white. The content, on the other hand, should contrast well with the structural elements. If your card is black, the text inside it should be white.

Everything in your design should be deliberate

This is vague, but very important. You should be deliberate about absolutely everything in your design. This means whitespace, alignment, size, spacing, colour, shadows. Everything. If I point at a random part of your design and you don't have an explanation for why it looks that way, you’re not finished.

Optical alignment is often better than mathematical alignment

Mathematical alignment is when you tell your design software to centre something in its container and think you’re done. But some shapes don’t suit being aligned in this way. Very often you will need to align things by eye so that it looks good.

As you raise text size, lower letter spacing and line height

This applies to all text. The bigger the text, the less space you need between each letter and each line.

Drop shadows should be subtle

The default settings for drop shadows in design software are often too hard/dark. Make your drop shadows as subtle as you can.

Usable elements should contrast with their surroundings

Usable elements are anything that a user is supposed to notice, take in, or interact with. You will be fine if you follow the colour contrast guidelines set out in the WCAG. If an element is there purely for decoration this rule does not apply.

Container borders should contrast with both the container and the background

Example: If you have a card with a 1px border and a dark background, and it sits on top of an even darker background, the 1px border should be lighter than both of them. It should not be set to a brightness somewhere between the card and page background colours. The same applies to light background colours: the 1px border should be darker than both background colours.

Everything should be aligned with something else

If something is not aligned with anything else in the interface, it looks terrible. Ideally each element will be aligned with other elements based on some kind of logic.

Colours in a palette should have distinct brightness values

It’s OK if some colours in your palette share the same brightness value, but if a colour has a different brightness value it should be noticeably different.

If you saturate your blacks you should use warm or cool colours, not both

Having some blacks with a little bit of warm colour and some with cool colours looks bad.

Choose a sizing/spacing scale, and stick to it

The spacing you use between elements, and the size of elements, should be determined by some kind of scale. This will help the design to look consistent. An easy way to do this is a column grid and a baseline grid.