website design

Top 10 Website Design Principles

Follow these website design principles to ensure your site’s success

There are many factors to consider when creating a website, and you need a good balance between form (how good it looks) and function (how easy is it to use).

It is often said that ‘beauty is in the eye of the beholder’. Well, the design of your website is judged by your website visitors and not by you. There are several basic website design principles you should look to follow if you want your website to succeed.

Poorly designed websites often fail to perform and this failure can be measured. Enter the world of Google Analytics metrics. Poor websites often share the following metrics:

  • High bounce rates – someone clicking on your site, not liking it, and clicking away
  • Low time on site – if the content on your site takes 2-3 minutes to read and users are only spending 30 seconds on your site, something is wrong here
  • Low conversions – poor design equals low conversions, less sales and less success

So if the above metrics indicate poor website design, what elements should you consider in good website design? We explore our top 10 web design principles below. These will make your website visually pleasing, super easy to use, friendly and effective.


1) Purpose

Good web design aligns your purpose with the reason why people visit your site in the first place.


The example above is very specific, being a single purpose website that lets you know if it will rain in your area today. There is not fluff or unnecessary clutter – this site is true to it’s purpose.

What are the needs of your customers?

Are your web visitors looking to buy a service? Do they want information, entertainment, or something else?

Each page of your website needs a clearly define purpose. Consider the following quote:

“Simplicity is the ultimate form of sophistication”

Cut to the chase, focus on your purpose and offer a product or service that your customers actually want.


2) Concise communication

This website, Freshbooks Cloud Accounting, clearly presents it’s offer using clear and concise communication.


People on the web demand instant access to information, especially now that more than 50% of all traffic comes from mobile devices. It’s important to communicate in a clear and concise way while making your information super easy to read.

Consider adopting the following tactics:

  • Divide information into headlines and sub headlines
  • Use bullet points (like this list) instead of long wordy sentences
  • Say more, using less words. Do not waffle.
  • Use really short sentences for website communication.


3) Fonts


In general, Sans Serif fonts such as Open Sans and Roboto are easier to read online (modern looking fonts without fancy finishes). The ideal web font is 16px (graphic designers may prefer to use a smaller font size for aesthetic reasons). Also, limit yourself to a maximum of 2-3 fonts in a maximum of 3 font sizes. This keeps your design simple.

Open Sans, Roboto, Ariel and Lato and commonly used on websites as they are easy to read and don’t distract from the main message.


4) Colours


Less is more when it comes to your website colour scheme – unless you are an experienced graphic designer.


A simple colour palette can enhance the user experience greatly. Try similar shades of the one colour for a balanced and harmonious look.

Think of the different shades of green in a forest or the warm sunset hues. Use one of these shades as your primary or feature colour and the secondary shades to highlight different elements in your design e.g. text boxes, background colours, visuals.

Vibrant colour

Vibrant colours, on the other hand, should be used sparingly. They create emotion and are good to convey strength however if used the wrong way, they can negatively impact the user experience. Examples of vibrant colours include call to action and clickable buttons.

White space

Another effective colour scheme is the use of white space. White space, also called negative space, is effective at giving your site a fresh and modern look.

For examples of good use of white space look through a high-end fashion of lifestyle magazine and take note of how each page is layed out. These same principles can we used to increased the user experience of your site.


5) Images


You know the saying:

‘A picture is worth a thousand words’

Well choosing the right images for your website really is at the centre of good website design. The right image used in the right way helps convey your brand position while connecting with your target audience.

If you don’t have good quality professional photos of you, your team or your business, consider using stock photos. Professional photography, whether your own or from a stock library, can really lift the look of your website.

If you have lots of text to include on certain pages, consider the use of infographics, videos and graphics. They are often much more effective at communicating your message than a page of text.


6) Menu structure


Make it as easy as possible for users to navigate around your site. This site, Happy Maps, uses a minimal menu structure with only x3 items in the top menu.

Some strategies for effective navigation include listing related pages underneath each other (page hierarchy), use bread crumbs (showing a user’s location in the site), design clickable buttons and link related pages (either through hyperlinked text or images). Also follow the x3 click rule: users should find the information they want within three clicks.


7) Follow a page layout – try a grid


In the last year or so, grid based layouts have become more popular. A grid layout is a series of intersecting lines that serve as guides for design elements.

Have a look at the fashion website Reserved (image above). There home pages is a simple grid layout that displays their entire collection in a neat and efficient way.

Avoid placing content randomly on your web page. This can end up with a haphazard look that will turn users away. Instead, use the same layout across all pages. A simple yet effective layout is the grid. Grid based layouts arrange content into sections, rows and columns that align. This creates a balanced look, leading to a better looking website overall.


8) ‘F’ Pattern design

Studies of eye movement across a screen reveal that people scan computer screens in using an ‘F’ pattern. This means a person focuses left to right and top to bottom.


9) Load time

Everybody hates a slow website. Google prefers sites that load faster than their slow loading counterparts. Consider the following tips to ensure your site loads fast:

  • Optimising image sizes (50kb for small images and around 100kb for larger images
  • Combine code into a central CSS or JavaScript file, thereby reducing HTTP requests
  • Minify HTML, CSS and JavaScript – this compression results in faster load time


10) Mobile friendly – mobile is everything today

mobile-responsive-comparisonMore than half of all website traffic comes from mobile devices. These devices have varying screen sizes, so it is essential to design your site both for desktop screens and mobile devices.

If you have an older website that is not mobile friendly, your site may be penalised by Google. You have two options:

1. You can redesign your site in a responsive layout. This means your site will adjust to varying screen widths

2. You can invest in a dedicated mobile site. This is a separate website designed specifically for users on mobile devices.


Wrap up

I hope these 10 website design principles will help you to have success online. Each of these points addresses specific user pain points and they can’t be skipped. Your website is the digital equivalent of a physical shop front or bricks and mortar store. It takes time and resources to get this right.

If you need help with your website, checkout our website design services and portfolio of great sites we have worked on.




0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published.