01 Nov Bespoke web design – part 1
Choosing Colours and Shapes that Reflect your Brand
One of the more difficult things to get right when creating a bespoke web design is choosing the right colour scheme and shapes. The colours and shapes you choose need to reflect your brands image as well taking into consideration the effect that they will have on your customers. Get this right and you will have created a bespoke website design that is effective and memorable.
Colours provoke an emotional response. They often impact on the decisions we make when deciding what we do next, more often than not if the colours aren’t right, the next thing we do is click “close,” and that’s not good for business. But get them right and they are more likely to click “Buy.”
There is a whole science on the theory of colour that could take a life time to master, but in this series of articles we’re going to offer some ideas and some theory that will help when choosing colours and shapes for a bespoke web design. Let’s start with colour selection and use a colour wheel to illustrate how to start selecting the right colours.
The colour wheel
The colour wheel is arranged so that it is easy to see which colours go well together. The most common form is the twelve colours, colour wheel based around the red, yellow and blue (RYB) artist’s model, which is the one we’re using here.
Let me just say at this point that there are other colour wheels and colour relationship models that bespoke web designer’s use. We don’t all use solid colours, so there are colour wheels to deal with things like saturation, intensity, shade, tint and tone etc. But for now let’s keep things simple…
The classic RYB (artists) colour wheel.
Using the colour wheel will help you to see which colours complement each other. The simplest way to find colours that work together is to use the techniques described below.
How to select complimentary colours that work in harmony with each other
Complimentary colours –
Use colours that are directly opposite one another, using the wheel in this way identifies colours that create a vibrant contrasting look. Use them sparingly though as they can be hard on the eyes and they’re not especially good for text.
Analogous colours –
These colours sit next to each other on the wheel. They are usually pleasing to look at and give a feeling of serenity and calm. These harmonious colours are often the colours of nature.
Four colours apart on the wheel, they are spaced evenly and create a vibrant colour scheme. Use triadic colours in balance with one colour more dominate than the others.
Tetradic (rectangular) –
Using two pairs of complimentary colours this colour scheme gives you lots of variation. A balance of a pair of warm colours and a pair of cool colours works best.
The square –
Use rules similar to tetradic colour selection. This colour scheme is at its most effective if you allow one colour to be dominant. Again take care with the balance of warm and cool colours.
Split – Complimentary –
This is probably the best place to start as it’s hard to mess the choices up. It provides strong contrast and is a good variation on the standard complimentary colour scheme above.
Using these methods will help you to find colour schemes and colour matches that will give your website real visual impact. Using the right colours and symbols will make your website a pleasure to use and more importantly make it memorable.
In the next articles in this series we’ll take a look at the use of shapes and their meaning and how they are used to reinforce colours.
For a bespoke web design it’s just as important to use the right shapes to reflect your brands image as the colour scheme itself. Then in the final article we’ll pull it all together and look at how colours and shapes compliment each other.
As an example and to finish, think about Google and their brands colours and shape, what does it suggest to you? Click the plus button below to share on your social media networks or tell us what your thoughts are on this subject and leave a comment below.[/vc_column_text][/vc_column][/vc_row]