Colour Matters
The ability to support a brand, convey a
style and even evoke an emotion, colour
in web design is one of its most crucial but
neglected components, says Dave Howell
Colour shapes our world, as without it
we could not navigate, understand and
appreciate our surroundings. Everyone with
normal colour vision intuitively has a colour
sense that is influenced by their gender
and the culture that they are a product of. Online,
colour has become one of the most important design
considerations as websites have evolved into more
than simple static pages of information. Mood, style,
branding and commerce; all of these aspects have a
colour component that can enhance the perception
and as a knock-on effect, the success of a site.
The RGB colour space that you’ll be designing within
offers an infinite variety of hues to choose from. However,
there are many considerations to take into account. As we
will see a bit later on, your own gender can have a heavy
influence on the colours you choose. The colour palette
for every site is undoubtedly a vital design decision. Get
the palette right and you will reinforce your site’s mood,
and more importantly attract and retain visitors. Get the
palette wrong, and you risk alienating the very audience
you are designing for, something of a nightmare in this
profession of ours.
"Whether the site is client-based or personal,
it’s important to set the right mood so that people
remember the site, the product and the company," said
Shane Mielke [www.shanemielke.com]. "If your site is too
plain, colourless, boring or lacking in content, then no one
will remember your site. Colours as well as motion, style,
fonts and music are a big part of being remembered. The
right colours feed off of the design of the site to inspire
a person’s emotions to what the designer wants them
to feel. Through colour and those other factors, we can
make people feel happy, sad, inspired, scared or any other
emotions we want them to feel. The more a person feels
the specific emotions we want them to, the more they will
remember your site."
Kumi Akiyoshi, an experience strategist with design
consultancy Adaptive Path also said, "To create a cohesive
web experience, all of the visual components must work
harmoniously. A successful web visual experience can
be achieved with skilful crafting of a product experience,
rather than being achieved by plastering graphical
elements and colour schemes. Creating meaningful visual
components that enhance the user’s experience will be
the key to creating the mood of the site that appeals
directly to the target audience."
A thorough grounding in colour theory is essential
for all web designers. Bookmark useful sites like
COLOURlovers [
www.colourlovers.com], colorcombos
[
www.colorcombos.com] and Colors on the Web
[
www.colorsontheweb.com] to keep up-to-date with the
current debates on colour theory and see the colour
palettes that other designers are using.
Colour is one of the key design components of a
website. Without the bold or subtle shades that a site uses,
the design and therefore the site would not function as
its designer intended. Sites like Philips’ Amberlight
[
www.aurea.philips.com],
newsmaps [
www.marumushi.com/apps/newsmap/newsmap.cfm]
and Chromazone [
www.chromazone-imaging.co.uk]
illustrate how colour is at
the very centre of their design. Change the colour palette
and their design simply doesn’t work as well as it could.
What is important to remember is that the colour scheme
that you choose for your site design doesn’t exist in
isolation as Andy Bennett, senior interaction designer
at Head London commented, "Colour can play a huge
role in web design, it can be used in various ways, such
as helping a user to navigate around a site easily and
efficiently, or for getting the user into the right mood.
Take Give A Love Note (demo site at
www.headlondon.com/bhf),
a campaign site that we created for the British
Heart Foundation. The idea was based around Valentine’s
Day and we needed to get the users into the mood of
stringing together sexy messages to send to their loved
ones. We used a very simple, yet striking colour palette of
black, white and a racy red. It instantly has a mysterious
and sexy feel to it, as well as getting the user into the right
mood. When designing this site, I referenced established
sites such as Agent Provocateur
[
www.agentprovocateur.com]
and Myla [
www.myla.com].”
COLOUR IN DESIGN
The use of colour in your site layout can offer you a rich
and diverse range of design components. The overall
colour palette of your site’s design is important, but you
also need to look closely at how individual elements fit
together. The colours you choose for these components
will have a major impact on how your site is navigated
for instance. But colour is not just about backgrounds
and buttons. How photography, graphics, animation
and text are presented on each page are also important
considerations, as your design must be approached as a
whole design concept.
With accessibility issues high on the design agenda
once again, your colour choices will come under the
spotlight. "Colour is as important in web design as any
other form of design. Perhaps even more so when you
consider accessibility guidelines," said graphic designer
Sam Gilbey. "I think the colour scheme I used on MTV
Switch [
www.mtvswitch.org] worked really nicely. I can’t
totally take credit though, as the logo already existed and
everything came from that. It all really came together
when we added the blue tones though – they just
complemented the red, black and beige perfectly. So you
have the warmth of the red and the beige, but that’s then
contrasted with the black loneliness of space and the
cold blue. Perhaps it’s that slight dissonance that gives it
a strong mood – the visual equivalent of sweet-and-sour
sauce maybe. Only maybe though!"
The perception of colour by visually impaired people
is also an area that can be easily overlooked by a site’s
design. Anything from eight to ten per cent of men but
less than one per cent of women suffer from colour
blindness. By far the most common form of this disorder
is the inability to distinguish between red and green.
Luckily there are various resources that enable you to
check how the colour palette you have chosen would
look to someone with colour blindness. Visit Vischeck
[
www.vischeck.com]
to correct images for colour-blind
visitors to your site, and also check out web specialists Etre
for its Colour Blindness Simulator [
www.etre.com/tools/colourblindsimulator].
Webcredible’s Trenton Moss also pointed out, "Some
dyslexic people actually prefer Comic Sans as that’s the
easiest for them to read. Dark blue on cream or on light
blue are generally good colour combinations for dyslexic
people and yellow on black is best for people with severe
visual impairments." The Royal National Institute of Blind
People (RNIB) website [
http://tinyurl.com/2jasmt] also
has a handy accessibility page that gives details of how
colour backgrounds and text can have a high impact
on their readability, depending on the particular colour
choices you make for your design.
Try and approach the colour within your site’s design
holistically. The subject matter and the target audience
will give you a guide to the colour palette that you’ll
likely be using. Also think about how you can use
complementary colours and even a colour contrast to
add drama and effect to your design if your audience will
be receptive to this bold move. "Colour is one of the great
tools we as designers wield in creating the emotional
aspect of our designs," said Greg Huntoon, senior art
director and account executive at Real Pie Media [
www.realpie.com].
"On a fairly universal level, there are a
handful of colour combinations which evoke a mood
or call in specific ideas or feelings: warm colours (reds,
browns, yellows, oranges) remind us of daytime, sunshine
and heat. Cooler colours (lighter blues, light greys, whites)
suggest cooler days, cloudy skies or rain. A collection
of drab shades of olive greens, some darker, some
lighter, will nearly always invoke a military or militant
feeling. Pastels will add a soft and light air to nearly any
composition. Do red, white and blue not spell patriotism
for any American? Even if a dissident, those colours
have been reserved by the State – they are powerfully
controlled in this way. The same goes for Christmas; hollygreen
and candy-red together scream 25 December."
DESIGNING FOR GENDER
The sex of the audience for your website has much more
of an impact on its colour palette than many designers
realise. The often-accepted view that women like pink
sites and men blue sites actually has some basis in reality,
according to recent research.
A team studying how men and women actually
process colour discovered that men and women do in fact
react differently to the blue and red wavelengths of light.
More telling is that a study has also revealed women’s
a nity for pink and lilac shades. In her forthcoming book
on colour and gender, Gloria Moss, senior research fellow
in the Business School at Glamorgan University says,
"What the findings showed was that volunteers aged
between 20 and 26 had been asked to select the colour
they preferred by clicking with a computer mouse. While
most of the participants were British white Caucasians, a
sub-group of 37 were recent immigrants to the UK from
mainland China, with almost equal numbers of men
and women. The idea of testing the two groups was to
separate out whether culture or biology might influence
gender preferences for colour. Each participant viewed
about 750 different pairs of colours spanning the entire
rainbow, and in each case had to indicate which of the
two shades they preferred. The male favourite was a pale
blue while the female favourite was a lilac shade of pink."
This in-built preference should be on your agenda
when designing for a particular sex. With site design
becoming increasingly focused on narrower groups of
consumers as marketers use the web to reach microgroups
for niche products and markets, understanding
who your audience is and what their colour preference
is likely to become very important in the future. "Try
and get into the mind-set of the target audience that
you’re aiming for," said Head’s Andy Bennett. "It’s always
good to find similar sites or influences which have been
successful in targeting the right audience – have a go at
deconstructing their design and work out what makes it
successful. When I’m working on a design concept, I tend
to try out quite a few different colour ways even though I
have a gut feeling at the start as to the kind of thing that
would be right. Be open-minded."
Also, the fact that most web designers are male influences
the final design of the sites they are working on. The
male design aesthetic is dominant on the web, even
when a site is supposedly aimed at a female audience.
The research carried out on the colour preferences of the
sexes when applied to existing websites is interesting in
that many of the sites that purport to appeal to women
clearly have a male design aesthetic.
What is interesting is that when you look at websites that
clearly have a strong female audience, their design is still
governed by the male design paradigm. A good example
is Confetti [
www.confetti.co.uk]. The wedding specialists
clearly understand that the vast majority of their visitors
will be female, but simply softening the tone of its colour
palette and using lilac and pink isn’t enough to truly be a
site designed for a female audience. Other examples of
sites that purport to be for women, but still have a strong
masculine feel include: Shiny Shiny [
www.shinyshiny.tv],
Glamour magazine [
www.glamourmagazine.co.uk],
Agent Provocateur [
www.agentprovocateur.com] and
Dior [
http://fashion.dior.com/dior4.html]. If you contrast
this with a site that has been built with the female
design aesthetic [
http://designpsych.weblog.glam.ac.uk/images/WebsiteFemale.gif],
you can see how their designs differ.
The male design paradigm is in evidence on just about
every website that is live today. But some sites do clearly
illustrate how design for the male audience is different
than that for a female audience. Sites like Firebox
[
www.firebox.com],
ITV’s F1 portal [
www.itv-f1.com/Home.aspx.],
Gamespot [
http://uk.gamespot.com] and
Manchester United Football Club [
www.manutd.com] all
have a strong male bias.
It has become clear that designing for specific genders
can be di cult if you don’t understand the market for
your site, and also what the key design principles are
for male and female design. Sites like Figleaves
[
www.figleaves.com/uk],
Next [
www.next.co.uk],
Handbag [
www.handbag.com],
British Vogue [
www.vogue.co.uk]
and Nike [
http://store.nike.com] all have a strongly
masculine design when their customer base is mixed. The
danger with these sites that attempt to appeal to a wide
audience is that they lose sight of who their core visitors
are. As a consequence of this, their designers are not
optimised with the colour palettes they use, or the design
itself is too firmly rooted in the male design paradigm.
COLOUR, DESIGN AND EMOTION
Website design used to be all about function. Today, the
web is such an integrated aspect of our lives that it must
invoke emotion in just the same way as other media do.
Design must clearly serve the site’s purpose that more
often than not is to sell us a product or service, but it’s
imperative that your designs also convey mood, emotion
and style. These are key components of branding
– something that all designers must take to heart if their
sites are to fulfil their brief.
Kumi Akiyoshi says, "Creating mood expands website
design beyond mere product offerings. Developing
mood helps create enticing, emotionally relevant sensory
experiences that will bring relevant values to people.
Choice of colour can help capture the spirit of web
experience, set the mood and define how the audience
responds to the site. For me, one of the best ways for the
use of colour to set a proper mood is by studying nature
and things surrounding us, paying attention to things like
how different colours feel memorable, visible, distinctive,
universal, engaging and timeless. Also it is important to
understand who the audience is. What sort of emotional
values does the site need to create? And how are colours
useful in helping users experience the site?"
Choosing the right colour palette will often be one of
the most important aspects in the early stages of your
design. Using a limited colour palette can often be very
effective. Websites like First Direct
[
www.firstdirect.com]
and the portfolio of Jonathan Yuen
[
www.jonathanyuen.com]
are great examples of what can be achieved. And if
you need to convert colour images into black-and-white,
take the tutorial on the Photoshop retouching website
[
www.photoshopsupport.com/tutorials/or/black-andwhite.html].
If your site design is heavy with images, it’s
a good idea to match the overall colour scheme to the
main shots you’ll be using. Take a look at the handy utility
on the DeGraeve website
[
www.degraeve.com/colorpalette].
Enter the URL of an image to get a colour palette
that matches the image. This is useful for coming up with
a website colour palette that matches a key image a client
wants you to work with.
Shane Mielke concluded by saying, "It’s near
impossible to account for every single user’s preferences.
Every individual in the world has a different take on their
personal favourites for colour, fonts, design style, font size,
music genres, etc. Combine all of those things together
and the combinations are endless. Designing a site for
every user group isn’t possible without losing a lot of the
soul and personality of a site. Take, for example, Apple.
com. It is a beautifully simple site but it is mostly devoid of
any special mood or colour. In order to breathe life into a
design, it helps to have a site that does cater to a smaller,
more specific audience within a set demographic. When
I do car sites for Ford, it is fun because they tell me exactly
the type of people who buy a specific car before I design
the site. Age, sex, personality and income are all things I
find out about the end user, and this information helps
me to establish the colour and personality without fear of
alienating certain users."
The German abstract painter Hans Hofmann said, "The
whole world, as we experience it visually, comes to us
through the mystic realm of colour." This affects you as a
web designer. Part of your skill set is to decode this mystic
realm and by relating this to your client’s brief, and the
target audience for your site, distil a colour palette that
will give the site its personality. When placed at the heart
of your design, colour can really be a designer’s most
formidable weapon.