larlet-fr-david-cache/cache/2023/61f52848924157701ed66c85d67f3536/index.md

title: Visual design rules you can safely follow every time
url: https://anthonyhobday.com/sideprojects/saferules/
hash_url: 61f52848924157701ed66c85d67f3536

<p>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.</p>
<h2>Use near-black and near-white instead of pure black and white</h2>
<p>Pure black looks unnatural on a screen, and pure white is too bright. Use close-to-black and close-to-white instead. Any other references to “black” and “white” in these rules assume you’re following this rule.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/1.png">
<h2>Saturate your neutrals</h2>
<p>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.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/2.png">
<h2>Use high contrast for important elements</h2>
<p>Important elements means buttons, content, or anything else that the user needs to notice. A higher contrast means that the element will grab attention, which is useful for important elements. Elements that the user does not need to notice (e.g. structural elements, drop-shadows) can use as little contrast as possible.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/3.png">
<h2>Everything in your design should be deliberate</h2>
<p>You should be deliberate about absolutely everything in your design. This means whitespace, alignment, size, spacing, colour, shadows. Everything. If someone points at a random part of your design you should have an explanation for why it looks that way. If you do not do this your design will not feel coherent.</p>
<p>If you are new to design you can use this rule as a prompt to learn more about what you are not deliberate about yet.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/4.png">
<h2>Optical alignment is often better than mathematical alignment</h2>
<p>Your design software can align things mathematically. But some shapes don’t suit this type of alignment. 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.</p>
<p>It takes some practice to be able to align things by eye, but if you do it regularly you’ll quickly pick it up.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/5.png">
<h2>Lower letter spacing and line height with larger text. Raise them with smaller text</h2>
<p>This applies to all text. The bigger the text, the less space you need between each letter and each line. The reverse is also true. If you do not do this large text can look spread out, and small text can look too close.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/6.png">
<h2>Container borders should contrast with both the container and the background</h2>
<p>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. Otherwise the edge of the container won’t look sharp enough. The same applies to light background colours: the 1px border should be darker than both background colours.</p>
<p>In the example below the left side is incorrect and the right side is correct.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/7.png">
<h2>Everything should be aligned with something else</h2>
<p>Alignment helps us realise that things are related to each other. If something is not aligned with anything else, it feels like it does not belong in the design. Ideally each element should be aligned with other elements based on some kind of logic.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/8.png">
<h2>Colours in a palette should have distinct brightness values</h2>
<p>When colours have different brightness values, this helps them look and feel distinctive not just in hue, but in brightness. This leads to better colour palettes because colours don’t compete with each other as much.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/9.png">
<h2>If you saturate your neutrals you should use warm or cool colours, not both</h2>
<p>If you use both warm and cool colours to saturate neutrals, the colour palette will not feel coherent.</p>
<p>In the example below the left side uses a warm background and a cool foreground. The right side uses a warm background and foreground.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/10.png">
<h2>Measurements should be mathematically related</h2>
<p>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 coherent. In the example below, every element uses multiples of 8. Horizontal and vertical grids based on a scale help if you want to make sure elements like pictures are the right size.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/11.png">
<h2>Elements should go in order of visual weight</h2>
<p>If you have a series of elements in a row or column, and some are more visually heavy than others (two buttons and three links, for example), you should arrange them like a triangle. The visually heaviest element should go first, and the least heavy element last, in order. One caveat is that the visually heaviest element should be on the outside edge. If your elements are against the right edge of the design, for example, the heaviest element should be against the right edge. Elements that go in size or weight order look more satisfying.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/12.png">
<h2>If you use a horizontal grid, use 12 columns</h2>
<p>If you’re going to break your design up into vertical columns, use 12 columns. A 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.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/13.png">
<h2>Spacing should go between points of high contrast</h2>
<p>When you’re measuring out space between elements in a design—for example if you want 100px of vertical space between blocks of content on a landing page—the spacing should be from one point of high contrast to the next. This is because our eyes find the edges of elements based on contrast, so we expect the spacing to run between points of contrast.</p>
<p>A white background with black paragraphs of text means that the points of contrast will be the end of one paragraph and the start of the next. But if you put a black background behind one white paragraph, the spacing should run from the end of one paragraph to the start of the black background, then again from the start of the black background to the start of the paragraph.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/14.png">
<h2>Closer elements should be lighter</h2>
<p>As elements on the screen get closer to the user, they should get lighter. This applies to both light and dark mode UIs, because it matches how the real world works.</p>
<p>In the example below, the left side is incorrect and the right side is correct.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/15.png">
<h2>Make drop shadow blur values double their distance values</h2>
<p>e.g. If you create a shadow which extends 4 pixels on the Y axis, use a blur value of 8 pixels. As the element gets “closer” to the viewer, it’s a good idea to also lower the opacity of the shadow. This looks good because as elements move closer to the light source, their shadows get more blurry.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/16.png">
<h2>Put simple on complex or complex on simple</h2>
<p>A complex background (e.g. a colourful gradient fill) works best if the foreground (e.g. text) is simple. And a complex foreground element is best on a simple background. You can put simple on simple, but it tends to look plain. Complex on complex should be avoided because it’s hard to pull off and will add visual clutter.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/17.png">
<h2>Keep container colours within brightness limits</h2>
<p>The brightness difference between background and container should be within 12% for dark interfaces, and 7% for light interfaces. These percentages refer to the brightness value in the HSB colour system.</p>
<p>This is based on a study of about 100 well-designed websites where I checked the brightness of containers against the backgrounds.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/18.png">
<h2>Make outer padding the same or more than inner padding</h2>
<p>In containers, inner padding is the space between elements inside the container. Outer padding is the space between the elements and the edges of the container. This outer padding should be the same or more than the inner padding. Elements that are more related should be closer together. The elements inside a container are more related to each other than they are to the container itself.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/19.png">
<h2>Keep body text at 16px or above</h2>
<p>16px is the default text size in most browsers. Text below this size gets harder to read, so it’s safest to avoid it for body text. The higher you go beyond 16px, the easier the text is to read.</p>
<p>If you are writing code yourself, use whatever equivalent of pixels you prefer.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/20.png">
<h2>Use a line length around 70 characters</h2>
<p>It doesn’t matter too much if your line length is 60 or 80 characters, but go too far either side of that and you might run into subtle readability issues.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/21.png">
<h2>Make horizontal padding twice the vertical padding in buttons</h2>
<p>The standard button pattern is wider than it is tall. If you want people to recognise an element as a button, it’s a good idea to follow the pattern. In the example below, the padding above and below the label is 30px, and the padding to the left and right is 60px.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/22.png">
<h2>Use two typefaces at most</h2>
<p>A second typeface is an opportunity to reinforce the concept behind a design. It also helps add some variety to a design. It’s rarely necessary to use more than two, and it might make the design feel visually confused.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/23.png">
<h2>Nest corners properly</h2>
<p>Sometimes you will have two or more rounded corners nested together. If you want them to look right, set the inside corner radius to the outside corner radius, minus the distance between the two. In the example below the outside radius is 30px, and there is a 20px gap, so the inside corner radius is 10px.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/24.png">
<h2>Don’t put two hard divides next to each other</h2>
<p>Background transitions, container edges, and dividing lines will create hard visual divides. You should not have two or more hard divides next to each other. You can see this marked in red in the example below. More than one hard divide creates visual clutter and catches the eye. In the example I have removed the background transition so that the hard divide only comes from the container edge.</p>
<img src="https://anthonyhobday.com/sideprojects/saferules/images/25.png">