Related Websites: SciFiNow | iCreate | HD Review | Digital Photographer | Digital Camera Buyer
All Apps
Dreamweaver
Flash
Photoshop
 
Home
Podcasts
Blog
Shop
About The Mag
Magazine Sample
Latest & Back Issues
Contact Us
WD Forum
Subscribe
 
Main Features
Main Interviews
E-Commerce
Creative Careers
Tutorial Files
Website Gallery Awards
All Time Greatest Sites
Web Hosting Guide
Top Website Lists
Agency Profiles
Recommended Links
 
Imagine Website
Imagine Subscriptions
Imagine Shop
   
 
 
 
 
 
 
 
 
 
 
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.
 
 
     
   
 
     
       
         
Privacy Policy
 
Site version 1.0 - All rights reserved © 2005 - 2006 Imagine Publishing Ltd
recommended : Plugins - Flash Player 7+, Resolution - 1024x768, Browsers - Internet Explorer 5.5+, Safari 2.0+
 
Copyright © 2007 Imagine Publishing Ltd. All rights reserved
 
Imagine Publishing Ltd, Richmond House, 33 Richmond Hill, Bournemouth, Dorset, BH2 6EZ
Registered company 5374037 (England) : VAT No 864 6042 18
Directors: Damian Butt, Steven Boyd, Mark Kendrick, Alistair Ramsay, Harry Dhand, Andrew Hartley, Sam Watkinson