HUIJZER.XYZ

Design cheatsheet

2020-11-29

I like to complain that design can distract from the main topic and is therefore not important. However, design is important. If your site, presentation or article looks hideous, then you already are one step behind in convincing the audience. The cheatsheet below can be used to quickly fix design mistakes.

  1. Colors
  2. Spacing
  3. Fonts and sizes

Colors

Suprisingly, you should Never Use Black. Instead you can use a colors which are near black. For example:

TintHTML color codeExample text
Pure black#000000

Lorem ipsum dolor sit amet

Grey#4D4D4D

Lorem ipsum dolor sit amet

Green#506455

Lorem ipsum dolor sit amet

Blue#113654

Lorem ipsum dolor sit amet

Pink#564556

Lorem ipsum dolor sit amet

Spacing

More spacing is more better. Compare

to

For texts, compare

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

to

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Fonts and sizes

The default font for most sites is too small. For text-heavy pages, the default can be bumped easily to 18px or bigger. Medium.com goes to 21px on desktop and 18px on mobile. I would advise against optimizing your site to particular devices, because it complicates development considerably. For more arguments against media queries, see Media Queries are a Hack.

At the same time, decrease the font size for items which cannot wrap around and/or are not as important as the main text such as tables and code blocks. Users should see the most important stuff first. To see what users will see first, use the squint test.