What makes websites look good?

Some designs stand out and look nice. This often comes across as a feeling – this website feels clean, or, this website feels modern. Sometimes though you aren’t sure why, but something just looks high quality. Designers usually know why! If you’re a designer this will be teaching you how to suck eggs so you might want to skip.

Start with the fundamentals

There are some basic rules that all design has to follow to hit a threshold of looking ‘correct’.

Alignment – Everything should be aligned with something else. Websites love a grid and that grid should 9 times out of 10 be stuck to. It just makes everything easy on the eye, calms everything down and users instinctively no where to look and can easily parse a page because of it

Spacing – Things need room to breath. Space around something can draw attention to it and show where it sits in importance compared to other items. Space can be used to show that a certain group of items are related, and then larger amounts of space can show a break in related items

Consistency – Uniformness, standard rules. Things looking the same in terms of size and colour. This often means a restricted colour palette. Again, it all just makes everything easier to scan and read.

With these fundamentals down there are some rules of thumb that can really help elevate design.

Design heuristics

The are lots of heuristics (rules of thumb) that help make things look interesting or engaging and often this span across all media – films, photography, painting, illustration and more. Two of the simplest ones for easy wins are the rules of thirds and the 60/30/10 rule

The Rule of Thirds

The rule of thirds is used in photography and in general composition. Using the rule of thirds you divide an image into nine equal parts using horizontal and vertical lines. When you want to draw attention to something you position it at the intersection of two of these lines. You can also place something else on another intersection and this even balances the image. Doing this we can direct the user to look in a certain place and it just creates a nice amount of tension and energy.

A website is primarily text with some images and sometimes video. Those images really stand out and it’s important that the images are interesting and composed nicely. A hero image (large image at the top of a page) is very common in web design, and these are often sourced by the companies themselves. Maybe they have a team shot – maybe they even got a professional photographer in to do it. If not then it’s important to note that not any all photo is going to look good on a site. You can’t just chuck a photo in the hero, stick a semi transparent overlay on it and slap a title on top. Well, you can (and people often do!) it just always massively detracts from the look of a site.

60 / 30 / 10 rule

This rule applies to lots of areas of design and art from renaissance paintings to interior design. The idea is that the composition of colour in the image should be made up roughly of 60% the primary colour, 30% the secondary colour and 10% accent colour. In practice each of these colours can be mulitple colours of a similar shade. For instance you may have a painting of the sea. 60% of it is blue colours (the primary colour), 30% is white (the secondary colour) and 10% is a little yellow boat (the accent colour). This leads to a nice balanced image with large spaces that appear more background, and peoples eyes drawn towards the accent colour.

We see this in web design all the time. 60% might be the white background colour, 30% might be a nice blue colour or shades of blue and the buttons, links and calls to actions (the last 10%) might be a nice orange that pops. This means that buttons and things you can click draw the eye and stand out.

Colour Harmonies

The 60/30/10 rule works especially well when combined with colour harmonies. Colour harmonies are colour palettes that create a sense of balance and contrast. There are loads of these, some of the more famous one being monochromatic (different shades of the same colour), complementary (opposites on the colour wheel e.g. blue and orange) and analogous (colours that site next to each other on the colour wheel e.g. red, yellow and orange). The point is, some combinations of colours just work better than others and it’s not just some subjective opinion. There is theory and some science (for want of a better word) behind it.

Good design isn’t just subjective

There is far more to design than just pretty colours. These things usually have a rationale and are ultimately done to create a better product. There is a course such a thing as taste, and not everyone will like the same thing, but bad design when things are unintentionally misaligned or use clashing colours is an objective thing and sticks out like a sore thumb.

Sometimes when things just ‘feel’ right it’s because a lot of thought and theory has gone into it behind the scenes!