We’ve talked about photography use in site design and how it visually aligns a business to its’ end-user and can visually establish a narrative of the firm and how it operates and works with clients. But that’s only the beginning of the story…
As designers, we’re looking to craft cohesive messaging through multiple channels and the next consideration we should explore is colour. How we select it, what purpose it serves and how to properly implement it to drive site performance.
IT’S NOT ‘ALL ABOUT THE PRETTY’ ANYMORE
I tend to joke on calls with clients about 
how my job really isn’t about just making a pretty site anymore. When the internet was less saturated with lawyer sites, we had a little more leeway to just craft something that was visually appealing, but that’s all changed and our job has become more about ensuring a site’s usability (UI), establishing a positive end-user experience (UX) and not wasting valuable conversion opportunities. And the strategic use of colour plays a vital role in this shift.
We want to ensure that our clients’ objectives are met through the effective integration of all of the visual elements at our disposal, that in addition to a site having a strong and clear visual message that we remember that the site design serves a function – it’s not just a piece of art.
HOW DOES COLOR FUNCTION IN DESIGN?
I’m going to apologize in advance if you know the answer to this question – but I feel it’s an important one to address at the start to quell the idea that designers just open up a color-wheel and toss a proverbial dart at it to see what to use. There are several considerations we address when we start to look at color options for a particular project:
- Are there marketing materials already in place that need to be carried over into the web environment?
Businesses can spend thousands of dollars in developing a creative / branding guide that establishes very specific usage guidelines for their logo and supporting elements, which also includes the use of color. In these cases, designers will advise that the website should be an extension of these other marketing materials and will craft site visuals to work in tandem with the business’ established brand.
- What is the business’ practice focus, target market and end-goal?
I will advise a firm practicing in criminal law differently than a firm practicing securities arbitration as the expectation for fast contact is diminished for a firm whose goal is to inform and validate rather than assist with an immediate need for bail or an arraignment hearing.
Color sets the mood for the site’s overall impression and establishes the action (or inaction) and level of engagement we are asking an end-user to take. Aggressive color triggers action, while passive color encourages a slower and more deliberate perusal of a site’s content. Is my client looking to inform or to convert end-users into paying clients? If the answer is conversion I will recommend employing high contrast or aggressive color to trigger action on the part of the end-user.
- What does the body copy or content-supplied value proposition tell me?
All other factors being null, or even in addition to the above information, I can look to the body copy supplied by my project writer to help inform color choice – ensuring that the mood of the site’s color fits the mood of the text within the page, which provides additional context for content.
THE PSYCHOLOGY OF COLOR – THE MYTH THAT KEEPS ON GIVING
There are millions of sites (3.96 million, to be exact!) out there that address the psychology of color and the emotional associations people supposedly place on a specific hue. But what is often neglected is the data (or lack thereof) behind these claims. Like trying to quantify why one site converts better than another, there are just too many factors that come into play when discussing a specific color that universally and always evokes the same emotion in all users.
Personal preference, upbringing, cultural differences, context, religion and life experience all factor into how an individual reacts to a specific color. And so in the words of a very worldly-wise and closet philosopher co-worker of mine, I present to you a philosophy degree in three sentences:
‘The user creates the context. Nothing I write means what I mean it to. It only means something to the person reading it.’
Now, this not only applies to my co-worker’s word-based content, but to other forms of content as well – and this includes the use of color. I can place blue on a design knowing the basic psychology of this color is dependability, strength and trust. But I can never know the experiences of the end-user coming to the site – do they hate blue because they work for Best Buy and are forced to wear that darned icky blue shirt every single day? Or is there a deeper and more serious trauma there that I can never anticipate?
So what do I do? I know that judgment of the product I am representing in this web presence is going to happen, I know that there are too many personal factors to be able to accurately translate the color I choose into a specific emotion I want my end-user to feel. I want to then accurately represent the brand I am promoting through the use of percieved appropriateness. In other words, does the color I select fit what I’m selling?
‘When it comes to picking the “right” color, research has found that predicting consumer reaction to color appropriateness in relation to the product is far more important than the individual color itself.’
– Gregory Ciotti for HelpScout Blog
If the answer to the above question is yes, then I’ve done my job from a color standpoint. So, at the end of the day, my general rule for color is this:
I want to accurately represent the brand I’m designing for and include a secondary color that visually associates a desired action I want the site’s end-user to take.
Which brings me to the final point, color for conversion.
CAN COLOR AFFECT SITE PERFORMANCE?
If we’re just looking for a hard and fast answer, then I’d have to go with a definite ‘yes, absolutely it does’. However, like in all things web design, there are some caveats and outlaying factors we should, as designers, consider.
As I mentioned above, what are the business goals of the site we’re designing? Is it pure conversion? Is there an immediate and time-sensitive need that warrants selecting a color that will evoke that immediate action by the end-user? If this is the case, then I will generally recommend a highly saturated, direct compliment of whatever the site’s base color is to trigger that action I’m looking for.
Complimentary colors are any two colors that are positioned directly opposite one another on the color wheel (for example: blue to orange).
The value and saturation of these tones can lighten or darken dependent upon the overall feel of a site or the mood I’m trying to set, but the general principle remains – the abrupt visual change to highlight a specific or actionable feature will pull the end-user’s eye and can trigger action.
For sites where conversion may not be the mitigating factor (and this is in rare cases), we can recommend pulling back from that strategy and design something that is more monochromatic (a single base hue that uses shades, tones and tints to lighten/darken the base color) or analogous (a group of three colors that appear next to each other on the color wheel) to help trigger action on the part of our end-users. But we never want to get too far away from a visual prompt that site visitors will associate with increased importance, such as a contact number or important link button.
Of course, there are also several other factors that come into play when it comes to color usage, especially visual impairments that may affect the way our colors appear in a site, such as red/green color-blindness, but that is a discussion for another time, and besides, who wants a site that looks like Christmas exploded all over it, unless you’re Santa, of course!
note: this article was written in 2015 prior to the increased emphasis on color in terms of ADA considerations. So, while the information here is still technically accurate, there are additional considerations to take into account when working on a site design in today’s market.