8 Principles of Good Website Design

Guess how many websites exist in the world at this moment. Whatever your answer, we can assure you that the number reached well over 2 billion! That’s a two followed by nine zeroes!

However, it may shock you to find that 9 out of 10 sites are inactive! Meaning they are not updated consistently, have little to no user traffic, and of course, don’t convert people over to their business.

Be warned; it’s extremely easy to end up in that 90%, that’s why we’ve crafted this fantastic article for you! Below we’ll be talking about eight great design values (or principles) that every website needs to rank in the top 10% and more importantly… convert!

1. Align the visual appeal with your business goal

When browsing the web, it’s likely you’ve come across your fair share of poorly designed sites. The type of sites that leave you confused, frustrated, unhappy or just plain bored!

For instance, see the following examples:

The first site boasts too many bright and dominant colours. The purple, red and blues all clash and detract from the actual sites content. Overall this design is uneasy on the eyes and proves a lack of professionalism.

It shows a lack of knowledge about its users and would result in unhappy visitors not wanting to return!

When comparing the former design to the next site, the visuals are completely different! The website lacks any colour or sizing providing no visual hierarchy for the viewer.

There is no indication whatsoever as to what content should be the focus. This design gives the impression that the website is under renovation and is likely to leave the user bored and confused.

So how can your website be designed to avoid this?

The answer can be boiled down to the following steps:

• Write down the goal of your website. It may be lead-generation, increased sales, or higher engagement to name a few.
• Write down the niche of your site. For instance, it can be sports, fashion and beauty, health, pets or digital e-commerce products.
• Choose the colours of your logo, background, buttons, banner and text accordingly. For the fashion/beauty sites, softer colours like light blues and pinks are usually most effective for logo, banner and background.
• For food and beverage, red and yellow are the most suitable (McDonald’s and Hungry Jacks are both excellent examples of this)
• Last but not least, arrange the contents on your website concerning your business goal.

These steps are the structure that facilitates the visual design of your site. They are not absolute but are useful guidelines to follow when constructing your website. Always feel free to experiment with different colours and styles as long as they’re in line with your business goal.

When it comes to design, laying out, your content can be quite tricky. To help we’ve laid out some essential laws on the human perception that will aid you in creating your website.

A. Visual hierarchy

This law states that larger the size of an object on a website (or a banner, festoon, poster, sheet), the more important it is perceived as and thus the more attention it commands. And vice versa.

The same goes for bright colours. The brighter an object appears on a website, the more focus it wields. The same can be achieved using dark colours against a plain, light background.

Instagram has implemented this law perfectly on their website.

The first thing that would catch your attention is the brand name “Instagram” in black and stylish font against the plain white background. This also tells you that this brand is all about creativity.

Next element to catch your attention is the large picture on the iPhone on the left.  Because of its size and green colour, it not only attracts your attention but also puts your mind at ease.

Next element to catch your attention is the blue button with “Log in with Facebook” written on it. They could have easily put the “Sign up” button there but they didn’t.

This is because if you know you don’t have to fill a form and directly log in using your Facebook credentials that would also be a relief to your busy restless mind.

Like Instagram, you can use this law to size the contents of your website according to their importance. That way visitors would focus on a particular CTA or piece of info that you want them to. And improve your conversion that way!

B. Golden ratio

The golden ratio is a design technique founded in ancient times and still being used by modern designers to this day! This principle is time tested and a reliable rule to follow.

Using some complicated math, which we won’t get into, we arrive at the following image of the golden ratio:

You’ve probably seen this image before, and are wondering why it’s relevant to the design and arrangement of your website? Below we’ve overlaid the Golden ratio over a few well-designed sites.

As you may have noticed, these sites are all arranged according to the golden ratio (or spiral). Eager to know why?  Well, it turns out this pattern can naturally occur in ferns, flowers, sea-shells, even hurricanes!

Psychologists and architects believe that anything designed following this pattern is pleasing to our brain. 

Thus when working on developing your website outline, you can follow this method to achieve the same visual effect.

C. Rule of thirds

When it comes to adding images on your site, this is a principle displayed easier in action. The following example shows that when it comes to choosing the photographs for your website, the image should fit along the intersecting lines as this is where the eye is most likely to look.  

To ensure your image follows the Rule of Thirds place two parallel horizontal and vertical lines across the pane, forming a grid of nine squares over your image.

Using this grid as a guideline edit your image so that the most engaging parts of the photograph aligned with the intersecting lines (marked by the red circles in the image below).

You can also put your contact numbers or keywords at the intersections as well. When adding images to your site, always remember that less is more.

Ensure there are enough images to attract your users and show off your services but don’t overcrowd the page. As said by Bill Bass: “Simplicity is the soul of modern elegance.”

D. Law of similarity

Even if you’ve never heard of the term, it’s a principle your subconscious mind is well-aware of, as our brains are wired to group similar objects together. Here is how software developer Slack has implemented the law:

Highlighted by the red horizontal lines, are three of Slacks brands. As you can see they’ve all been placed together in the same sized box and are aligned and spaced evenly.

By grouping these items, Slack has made it easy for the users to understand that this content is a portfolio block and ensure no confusion amongst the other elements of their site.