One of the comments I often get from recruiters and interviewers is that they like how clean my design is. While this is flattering, it’s kinda of weird as I can’t pinpoint what exactly clean design is. From what I’ve observed, clean design is a branch of minimalism. Where minimalism takes away anything in a design that is unnecessary, it often doesn’t leave much room for personality. I always try to inject a tiny bit of personality what I create, otherwise everything will just look like a Swiss design poster from 1960.

People tend to be drawn towards clean design because every element, be it a webpage, component, poster or app shows its purpose instantly. People don’t have to guess what their next action is because the thing they’re looking at is telling them without them really realising. It does the thinking for them. Clean design often deliberately obfuscates something to give more necessary information more prominence which helps guide people where they need to go without obvious visual cues. There are three main ways of doing this using basic elements of design. Colour, Space and Typography.

1. Only use three colours

In interior design there is a 60/30/10 rule. It’s pretty simple to understand - When you’re designing a room, make one colour (or texture) 60% of the room, make another colour 30% and the final colour 10%. It’s a nice way to inject colour into a room without it becoming messy or kitsch.

The same rule applies to design, but I like to tweak the ratios slightly to 70/20/10. Usually in my designs, 70% of the design will be either black or white. I usually gravitate towards black because I find websites often look incomplete if they’re white and minimal and the minimalism isn’t done correctly - it looks like the page is unfinished. The next 20% of my website will be white or a shade of grey. This is usually content like text or logos. Pick a shade that contrasts nicely with your 70% colour.

Finally, add your accent colour. This can be anything you like, but I’d recommend looking into colour psychology, especially if you’re trying to send a message with this colour. Banks usually want to be blue, eco startups green and so on. On this website I’ve used reds, oranges and yellows. I’ve tried to make it so that at any time on my website, you’ll only view one of these colours at once, to keep in with the 70/20/10 rule.

Like any rule, the 70/20/10 rule can be broken. If you want your 70% of your website to be blue, with green text and black highlights, go for it! Just try and keep those ratios and your design will look coherent. The more colours you add, the more the brain has to interpret.

2. Use more space.

Theres a reason I say way more. One of the the things that improved my visual design skills was when I realised that space is what makes individual elements look good. This is one of the major flaws I see with a lot of intermediate designers. If your design looks weird and you can quite figure out why, increase the space above and below each element by double, or triple.

Think about it this way. When you’re reading a story, paragraphs make it much easier to anticipate how much you’re going to read. If you’re greeted with a wall of text, you’re more likely not to read it because it looks intimidating, and it’s much harder to find a particular point because everything is so close together. Design is the same. Use much more space than you think you’ll need and you’ll start to see your design elements as small groups of components, which you can then make cleaner using…

3. Cognitive Load Points

Okay, I haven’t really seen this concept explained anywhere, so I made up a name for it and hopefully it’ll catch on so I can patent it, retire and live off the cushy payments of the design conference scene. Cognitive load points, also known as CLP (from now on) are the number of points in a design that a brain has to take in, which adds to your cognitive load. The aim of reducing CLP is to make everything as square as possible. A square or a rectangle are much more more clean than a multi angled polygon. Reducing CLP is the secret sauce of creating a clean design, and I’ll share with you a couple of quick ways to do it.

The first way is to make any small headings, like tables, nav bars or menu items very small (just big enough to read) and the capitalise them and set their letter-spacing to about 130% (obviously this depends on the typeface you’re using) This greatly reduces CLP and your brain will interpret this as a much cleaner design.

The next is to try and make the different elements on your page line up vertically with each other as much as possible. Basically make each element align to a grid. Every extra edge you add is effectively adding a CLP. It’s kinda difficult to explain, so here’s a picture of what I mean:

Finally, another easy way to make your design flow in the way you want it to is to highly what you want the user to see first and reduce the impact of the other elements. We can use the previous image and add some elements to it as an example. In the first screen, everything is yelling at you because it all has the same visual weight because it’s all solid white. Knock back that paragraph and author title and you’ve instantly made your design cleaner. Always consider your audience when doing this because it might become unreadable or not AA compliant.

So there you go. Three super easy ways to make your design cleaner. Only use three colours with the 70/20/10 rule. Double or triple the space around the elements on your design, which will help the grouping stand out more, then decrease the Cognitive Load Points.