Design cheatsheet
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 ugly, then you already are one step behind in convincing the audience. The cheatsheet below can be used to quickly fix design mistakes.
Colors
Suprisingly, you should Never Use Black. Instead you can use a colors which are near black. For example:
| Tint | HTML color code | Example 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
<style>
li {
font-size: 19px;
}
.less-narrow li {
line-height: 40px;
}
.too-narrow {
line-height: 18px;
}
</style>
More spacing is more better. Compare
<div class="too-narrow">
</div>
to
<div class="less-narrow">
</div>
For texts, compare
<div class="too-narrow">
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.
</div>
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.