Given by Haroen Viaene, 21 September 2016 for FreeCodeCamp Ghent

inspired by Tracy Osborn

Clutter is something which is the reason of most designs that can be improved

Let’s take a look at this bad design and try to improve it.

codepen.io/Haroenv/pen/KgNRpy

First improvement, the grid and alignment

let’s turn this thing

http://codepen.io/Haroenv/pen/KgNRpy

into this thing, where we have even spacing, and generous margins

http://codepen.io/Haroenv/pen/ozYdZg

fonts are fun, use them!

But use them sparingly. Use just one or two of them, and try to stick to system fonts as much as possible to avoid FOIT and FOUT

So this will turn into

codepen.io/Haroenv/pen/ozYdZg

this, where we only use system fonts (in this case San Francisco, with fallbacks for other environments, like Roboto …)

codepen.io/Haroenv/pen/wzojPA

don’t you all love colours? I do, but these tools

They’re so incredibly hard 😔

I can only make bad combinations with them somehow

But look at https://randoma11y.com, great fitting colour combinations for free

Let’s use less colours here

http://codepen.io/Haroenv/pen/wzojPA

One colour is enough accent, so the buttons actually stand out!

codepen.io/Haroenv/pen/VKmxxa

copy is the most important part of a site, the design is supposed to support the actual content on the site

Let’s make this make more sense

codepen.io/Haroenv/pen/VKmxxa

Shorter sentences, <strong> for emphasis

codepen.io/Haroenv/pen/amBGQb

Don’t try to reinvent the wheel all the time, look at other people

Like for example on productpages.xyz by Thomas Chrétien

Even this page isn’t invented by myself, it was mostly inspired/rehashed content by Tracy Osborn, when I saw her speak at View Source 2016 in Berlin.

You can find this talk at haroen.me/presentations