More than three months ago we were invited to write on Octuweb: a project in which various professionals of web design shared their knowledge on the subject. Both Ricardo and I were invited, and of course, it was impossible to refuse! 😉 Ricardo will tell you everything on another post, but I will do it today. I opted to share some comments about colours, this time applied to web design.
I encourage everyone to come into Octuweb to read the full article, as well as all of our colleagues. The theme is varied and complete and certainly you will like it!
But in addition to read Octuweb, today I will make a short summary with the main points of the previous article, but adding some important new detail. Shall we start?
What colour should I choose for my website or blog?
I think (and I hope) that no one here has a doubt about the psychology of colours. We know the meaning of each of them, the qualities that colours transmit and the sensations and feelings that they awake, so it is essential that we use these feelings to convey what we want in our web design.
If someone needs to remember some facts about the colours, I leave you these posts as a summary (you can also see the posts of each colour in particular,) and some where we discussed about how to combine them. Because it is really important to know what colour I should use on my website, but also what colours I should combine:
– A quick guide to using colours in design
– Combinations of colours using the colour wheel
– Most used and favorite colours: Infographic
Colour is a powerful weapon of design. With it we can transmit very simply different feelings. If we learn to use it, we will grasp our audience more effectively.
Colour combination in my web
Before choosing the colours used on our website, and therefore our corporate colours, we have to be clear about some concepts that will help us make that decision.
For what audience should I target my web?
As we have discussed many times, it is not the same design for men than for women, adults, adolescents or children, for education or health. We must be clear about the target audience of our website and think about that segment and its characteristics and tastes.
The better we do this first definition, the easier will be to find the colours we use. If it is a website for children perhaps black will not be the best colour, and if it is for victims of abuse perhaps red will be very aggressive…
Choose colours that only can be yours
You know that “green” generally means too much. Within each of the colours we have many ranges. We have to choose our own, the only one that would make sense with our brand. The singular and unique colour for us.
The more specific they are the more recognizable will be with your brand, and therefore with you.
The colour on my website
Once we have the perfectly chosen colours we have to decide the location of each of the elements of the web. We will speak specifically of some elements later, but we will start with some general notions!
Use it to focus on what you want
The colour can serve for our visitor to center the view on that object we want to emphasize. For example if in our header we find an image in black and white, we can use our corporate colour for a “Call To Action” button .
Or maybe we can use it as the predominant colour in our header, menubar … Obviously, if we opt for this option, we have to be aware that we cannot be invasive. The use of colour in large quantities can be aggressive or boring. It will depend on how the different elements of the web are disposed. There are websites where one colour dominates, as can be the case of Gagasymphonyorchestra , but as you see, it just goes with the different design elements.
As we said, we must be clear what will be the elements that give colour to the web and how to combine them together.
Colours that give cohesion and fluidity
As we were saying that we can use colour to make the user to focus on the vision, we can (and must) use it to be the driver via the web. We can go with guiding the user to arrive at the place we want.
Of course, always using our range of colours and applying the same colour to all elements of the web.
Printing your colour on images
It is very common on a website or blog to find a text accompanying the images or illustrations. They complement and give a more creative style, so why not use those images to enter our colours?
For example, if our colours are red, we can try to introduce images with these tones, having all much the same filter that makes them more personal and features. We can get with these images to remember our personal brand printing our colours.
Choice of colours of the elements of a Web
We have already decided what will be the colours of our website, and we know where we arrange them, so it’s time to analyse what are some of the most important elements of the website and how we can introduce them colour.
Call to action Button
When we talk about the call to action, orange is the best colour to convert. Although it should be clear that should always be in line with our design and range of colours chosen. As we have seen before, we can use colour to draw attention on a background of white and gray, the important thing will be the button.
Colour of links
It is normal to use the corporate colour for the link, but you must be clear that we cannot always use it directly changing the colour of the words. If the colour is very clear, we can use other designs that will make our link text read perfectly. We can highlight them or put a background for example.
Background of the web
We have already spoken several times about that, but there are many options we have for the background colour of the web. We must be clear that when we speak of background with a text, the best option will be always to use the white: we must create contrast and legibility. You know you can use patterns, yes, but the text must be on a white background.
Conclusions
I do not want to repeat again, but I’ll say it one last time (for now!) 🙂 Since the colours are linked to our feelings and sensations, use them! We have to design always thinking about our target audience and taking into account the various elements of web design.
