Call Us! 1300 677 924     Email Us! Email Us
Contact us with any enquiries you have.
Grab a Quote!

Using the Right Colours for your Web Design

Posted: Wednesday, February 11th, 2009 | Tags: ,

Colours are very important in web design. They portray an image, a mood or a feeling which can leave a memorable first impression on a website visitor. Generally the colours used in the web design are the same as the identity and logo colours used for the business - which should represent the corporate image the business want’s to portray. It is very important your web design uses the existing colours used in your logo and a complimentary colour pallet that will work with the other web design elements. The colour pallet should have a dominant colour and some shades of a similar tone, there should also be a opposite or negative colour that can be used as a highlight within the web design. The highlight can be used for link and button rollover or to draw attention to a specific area of the layout.

Different colours in your web design can affect the mood of the user. All colours have a psychological affect on us and can even change the way our body’s function on a basic level.

The eleven basic colours have fundamental psychological properties that are universal, regardless of which particular shade, tone or tint of it you are using. Each of them has potentially positive or negative psychological effects and which of these effects is created depends on the relationships within colour combination’s.

RED. Physical
Positive: Physical courage, strength, warmth, energy, basic survival, ‘fight or flight’, stimulation, masculinity, excitement.
Negative: Defiance, aggression, visual impact, strain.

Being the longest wavelength, red is a powerful colour when used in web design. Although not technically the most visible, it has the property of appearing to be nearer than it is and therefore it grabs our attention first. Hence its effectiveness in traffic lights the world over. Its effect is physical; it stimulates us and raises the pulse rate, giving the impression that time is passing faster than it is. It relates to the masculine principle and can activate the “fight or flight” instinct. Red is strong, and very basic. Pure red is the simplest colour, with no subtlety. It is stimulating and lively, very friendly. At the same time, it can be perceived as demanding and aggressive.

BLUE. Intellectual.
Positive: Intelligence, communication, trust, efficiency, serenity, duty, logic, coolness, reflection, calm.
Negative: Coldness, aloofness, lack of emotion, unfriendliness.

Blue is the colour of the mind and is essentially soothing; it affects us mentally, rather than the physical reaction we have to red. Strong blues will stimulate clear thought and lighter, soft blues will calm the mind and aid concentration. Consequently it is serene and mentally calming. It is the colour of clear communication. Blue objects do not appear to be as close to us as red ones. Time and again in research, blue is the world’s favourite colour. However, it can be perceived as cold, unemotional and unfriendly. Blue is one of the most common and dominant colour used in web design.

YELLOW. Emotional
Positive: Optimism, confidence, self-esteem, extraversion, emotional strength, friendliness, creativity.
Negative: Irrationality, fear, emotional fragility, depression, anxiety, suicide.

The yellow wavelength is relatively long and essentially stimulating. In this case the stimulus is emotional, therefore yellow is the strongest colour, psychologically. The right yellow will lift our spirits and our self-esteem; it is the colour of confidence and optimism. Too much of it, or the wrong tone in relation to the other tones in a colour scheme, can cause self-esteem to plummet, giving rise to fear and anxiety. Our “yellow streak” can surface.

GREEN. Balance
Positive: Harmony, balance, refreshment, universal love, rest, restoration, reassurance, environmental awareness, equilibrium, peace.
Negative: Boredom, stagnation, blandness, enervation.

Green strikes the eye in such a way as to require no adjustment whatever and is, therefore, restful. Being in the centre of the spectrum, it is the colour of balance - a more important concept than many people realise. When the world about us contains plenty of green, this indicates the presence of water, and little danger of famine, so we are reassured by green, on a primitive level. Negatively, it can indicate stagnation and, incorrectly used, will be perceived as being too bland. When green is used in web design is can also be associated with being environmentally friendly and technologically savvy.

VIOLET. Spiritual
Positive: Spiritual awareness, containment, vision, luxury, authenticity, truth, quality.
Negative: Introversion, decadence, suppression, inferiority.

The shortest wavelength is violet, often described as purple. It takes awareness to a higher level of thought, even into the realms of spiritual values. It is highly introvertive and encourages deep contemplation, or meditation. It has associations with royalty and usually communicates the finest possible quality. Being the last visible wavelength before the ultra-violet ray, it has associations with time and space and the cosmos. Excessive use of purple can bring about too much introspection and the wrong tone of it communicates something cheap and nasty, faster than any other colour.

ORANGE.
Positive: Physical comfort, food, warmth, security, sensuality, passion, abundance, fun.
Negative: Deprivation, frustration, frivolity, immaturity.

Since it is a combination of red and yellow, orange is stimulating and reaction to it is a combination of the physical and the emotional. It focuses our minds on issues of physical comfort - food, warmth, shelter etc. - and sensuality. It is a ‘fun’ colour. Negatively, it might focus on the exact opposite - deprivation. This is particularly likely when warm orange is used with black. Equally, too much orange suggests frivolity and a lack of serious intellectual values.

PINK.
Positive: Physical tranquillity, nurture, warmth, femininity, love, sexuality, survival of the species.
Negative: Inhibition, emotional claustrophobia, emasculation, physical weakness.

Being a tint of red, pink also affects us physically, but it soothes, rather than stimulates. (Interestingly, red is the only colour that has an entirely separate name for its tints. Tints of blue, green, yellow, etc. are simply called light blue, light green…etc.) Pink is a powerful colour, psychologically. It represents the feminine principle, and survival of the species; it is nurturing and physically soothing. Too much pink is physically draining and can be somewhat emasculating when used in web design.

GREY.
Positive: Psychological neutrality.
Negative: Lack of confidence, dampness, depression, hibernation, lack of energy.

Pure grey is the only colour that has no direct psychological properties. It is, however, quite suppressive. A virtual absence of colour is depressing and when the world turns grey we are instinctively conditioned to draw in and prepare for hibernation. Unless the precise tone is right, grey has a dampening effect on other colours used with it. Heavy use of grey usually indicates a lack of confidence and fear of exposure. When grey is used in web design, it acts as a neutral colour to give shading and shadow to certain elements.

BLACK.
Positive: Sophistication, glamour, security, emotional safety, efficiency, substance.
Negative: Oppression, coldness, menace, heaviness.

Black is all colours, totally absorbed. The psychological implications of that are considerable. It creates protective barriers, as it absorbs all the energy coming towards you, and it enshrouds the personality. Positively, it communicates absolute clarity, with no fine nuances. It works particularly well with white. It communicates sophistication and uncompromising excellence. It creates a perception of weight and seriousness (it is a myth that black clothes are slimming). Black is essentially an absence of light, since no wavelengths are reflected and it can, therefore be menacing; many people are afraid of the dark.

WHITE.
Positive: Hygiene, sterility, clarity, purity, cleanness, simplicity, sophistication, efficiency.
Negative: Sterility, coldness, barriers, unfriendliness, elitism.

Just as black is total absorption, so white is total reflection. In effect, it reflects the full force of the spectrum into our eyes. Thus it also creates barriers, but differently from black, and it is often a strain to look at. It communicates, “Touch me not!” White is purity and, like black, uncompromising; it is clean, hygienic, and sterile. The concept of sterility can also be negative. Visually, white gives a heightened perception of space. The negative effect of white on warm colours is to make them look and feel garish. White is very important in web design as white is also generally symbolic of space. The utilisation of space in web design is very important.

BROWN.
Positive: Seriousness, warmth, Nature, earthiness, reliability, support.
Negative: Lack of humour, heaviness, lack of sophistication.

Brown usually consists of red and yellow, with a large percentage of black. Consequently, it has much of the same seriousness as black, but is warmer and softer. It has elements of the red and yellow properties. Brown has associations with the earth and the natural world. It is a solid, reliable colour and most people find it quietly supportive - more positively than the ever-popular black, which is suppressive, rather than supportive.

Each of these colours all have there own appeal and suit different web designs with different purpouses. There are many variations of and shades of each of these colours and all of them will give a uniques impression to the viewer. At Big Click Studios we pay carfull attention to the colours used in every web design we create and take notice of how they will affect the user.

Tags: ,