Artists follow a few essential principles to create specific effects so the viewer can understand their art, these principles cover shape, colour, value, form, and texture.  These concepts were also adopted by designers, be that for buildings, leaflets, games, or website creation.  A website with a great composition has a direct impact on a websites performance (navigation, conversion, retention, etc.).

Here we take you through the 7 principles of design when applied to a website.

1.  Balance

In design terms, balance is making sure that no single element overpowers another, causing the other items to become insignificant and blend into the background, where they will become redundant and serve no purpose. 

There are three types of balance:

• Symmetrical balance This type of balance occurs when one side is a mirror image of the other side.  We seem to be drawn to symmetry and find when a face is symmetrical it is considered more beautiful than one that is not.  Within a website it evokes the feeling of class and consistency.
• Asymmetrical balance This occurs when one side is not exactly the same as the other but has the same visual weight.  Placing one large circle on one side, will require lots of smaller circles on the other side to balance out the weight.  This type of design evokes modernism and vitality.
• Radial balance This occurs when everything is focused around a central point.  All objects should be an equal distance from that central point.  This evokes life and dynamism.

How we apply balance to a website

With balance we would look at the centre line or point and keep the visual weight equally distributed on the website.  To keep the balance it is often easiest to use a grid layout.

We would start by dividing the page horizontally into strips, using one per section (About Us, Contact, Service type, Product type, Social Media feeds, etc).  From here the strips can be split further into several columns to add a vertical partition to the page.  The website is then composed of a series of boxes which fit all screen sizes and resolutions.  All that is left for us to do is personalise the design to match our clients brand image and add content, once it's all brought together we should end up with a neat and professional website design.

2.  Contrast

The majority of us use contrasting colours in our homes and in what we wear without even realising it.  Contrasting can also be used with shapes and textures.  Contrasting is all about using elements that are inherently opposite to each other.  This creates excitement and demands the viewers attention.  Contrast is a powerful expression when it comes to art and design.

How we apply contrast to a website

Many clients have used the term 'make it pop' when they have asked for a web design.  It's the new word for 'contrast'.  No client ever asked for their website to 'contrast'...

The same old same old is often brain-draining and dull.  We think about which specific items should be accentuated.  It can be the company name, contact information or a link to another page.  Making these elements stand out from the rest of the content by using different font types and size, and then adding more white space around them, or using a different shape or contrasting colour will enhance the page.

The dominant contrasting effect in web design is colour.  We often refer back to the colour wheel, where we can pick a colour and the wheel shows us what the contrast is.  Many of the businesses we work with need the conventional white or black background which makes the important elements 'pop' with any bright colour.

3.  Emphasis

A bit like contrasting, where we try to create a focal point.  Emphasis is popular in adverts and some art work, an advert may have a fuzzy background and one thing or person is in sharp focus in the centre, or a piece of art has a grey cityscape but one element the designer wants us to focus on will be in a colour that stands out.  Every design should incorporate a primary element like this, known as a focal point.  A lack of dominance among a group of elements means the viewer will have to decide how to navigate the website, instead of following the path we want them to take.

How we apply emphasis to a website

We place emphasis within the websites call-to-actions (CTAs).  CTAs are short phrases (book me, shop now, subscribe here, etc).  They link to a section of a website where viewers actually need to do something.  CTAs have to stand out and contrast with the back ground because they are the ones driving traffic and business, the emphasis should naturally be placed on them, rather than the background image, which simply needs to look beautiful.

We make them stand out by using a different font and colour, we leave space around the CTA button to make sure the viewer can easily locate it, which is very important on a crowded page.  Even better when someone scrolls down or up a page, the CTA can follow them.  A help chat box is a good example of a moving CTA.

4.  Movement

Movement on a web page catches viewers attention more so than static pictures.  On a website we don't actually have to have something that moves, but using different elements can create a sense of movement, which many prefer over having actual animation.

How we apply movement to a website

One way of adding movement to a website is with parallax scrolling.  Parallax scrolling is when the website layout sees the background of the web page moving at a slower rate to the foreground, creating a 3D effect as scrolling takes place, adding depth and movement to a site.

Tilting text diagonally or scattering images can evoke rhythm and a dynamic feel to a page.  But it should never be over used.  A website is there to focus the viewers attention on the action we want them to complete, not to create too much visual noise that will distract them from the task at hand. 

The most common used effects are sliding and/or fading.  Visit our page, our work, and scroll and move your mouse over each example to see how we have added movement to this page.

5.  Repetition

Repetition creates consistency.  Repeating the same element over and over again creates a pattern that is easy on the eye.

How we apply repetition to a website:

We may alternate the same two fonts and the same three colours or use a pattern on different sections of the page, and throughout the website to create consistency.  It helps the viewer to recognise a website above others helping with repeat business.

6.  Hierarchy

When it comes to hierarchy in web design, it is important to split the elements into three levels: the most important, the middle stuff, and the least important. 

Website users perceive the first element it sees on a page as the most important.  So choosing the placement of each element based on its level of importance is key to mastering this principle.

How we apply hierarchy to a website:

When planning we do this away from the computer.  We write down each element on post-it-notes then move the notes around until we have a hierarchy based on the level of significance of each item (pretty much looks like a family tree).  We mainly do this so we have time away from screens, we get to stretch our legs and stick coloured paper to a blank wall.  But we could just sort this out on a computer.

We can then create the sections of a website so the viewers see the most important things first.  News reports use pyramid reporting, the heading that catches the readers attention is the conclusion, then they cover the details before ending with what would typically be an introduction.  Web designers have also adopted this practice.

There has been a huge amount of study on how people view and use websites.  Viewers browse from top left then move right and down, in an F or Z pattern.  So the most important information should be at the top left, and the least important should be in the middle bottom bit of the page.

The first thing a viewer needs to see is who the company is and what's for sale, then the book or buy now CTA, the rest is filler for those few people who need lots of information to draw them into a sale, such as testimonials, and a breakdown of each service.

7.  Unity

This principle is about finding the right balance with the right elements.  Every item on the page has a specific place and a role.  Nothing should be out of place, useless, or random.  Everything has to work in agreement with each other.

How we apply unity to a website:

We want a site to convey the right message or experience to the viewers.  For example we may add a colour and include it throughout the images, text and strips of content.  Another example would be the company logo which needs to be the same across all the websites pages, Google accounts, Social Media, and any print material such as leaflets.  We will also use consistent shapes to make things stand out.

We've been designing websites since 1998, if you would like us to undertake a website design for you, please contact us on either of our office numbers, at the very top left and right of this page.

Read our latest website design tips and tricks to learn how to improve your website's look and ability to turn visitors into paying customers.

The 4 Essential Stages of Web Design
Which One is Right for You: Website Design Tool vs Website Designer?
The Ultimate Guide to Choosing the Best Fonts for Your Website
14 Tips for Making a Professional Website in 2022
How to Choose the Perfect Color Palette for Your Website to Increase Sales
9 Steps to Creating a Business Website
What Are the Benefits of Having a Business Website?
The Complete Guide To A Landing Page
How To Create A Professional Service Based Website For Your Business
6 Best Practices For Website Form Layouts
Is Colour Important In Website Design
Step By Step Guide: How To Make A Professional Website In 2020
4 Key Satisfaction Factors Your Website Should Have
Should You Consider The Huge Range Of New Top Level Domains
42 Resources Every Web Designer Needs
Why You Need A Dynamic Website
How To Create A Free Business Website

Comments have been switched off for this post!