How Designers Should Use Color Scheme For Their Clients' Websites.

By Zack Rutherford

 

Apr 6, 2014

 

“Mere color, unspoiled by meaning, and unallied with definite form, can speak to the soul in a thousand different ways.”

― Oscar Wilde

 

Color, in almost every hue, is a sight so commonplace we’re apt to take it for granted. But what does a world without color look like?

 

A little bit milquetoast, if you ask me.

 

In case you hadn’t guessed, I’m more than a casual fan of color. In a world that can often seem too grey for its own good, color is an uplifting and pivotal addition to the human experience. Never is this statement truer than when applied to the corporate world, which can often look bland, flat, superficial, and even sinister.  

But branding doesn’t have to be bad or boring.

 

That’s why designers put major emphasis on the color schemes of their client’s websites. Because color is so powerful, and so imminently necessary. Consequently, the right color scheme can make or break a website. If message, purpose, or tone don’t quite flow cohesively with color, you’ve wrought nothing but confusion and a distinct lack of conversions.

 

So what to do? How can we avert major crises via majestic color magic?

 

Let’s start in the thick of it with consistency.

 

 

Corporate Branding, Consistency, And Color Perception.

 

Color is a powerful force that can persuade the unconvinced, command attention, set expectations, and cause assumptions. Some such assumptions lead to what’s known as visual brand identity. That is, the carefully crafted public persona reinforced by the consistent use of the visual elements. Chief among these visual elements is color scheme.

 

Consumers expect brands to adhere to their preconceptions.

 

There’s a reason that Apple has done so well with their minimalist, black-and-white color branding. The abundance of white space illustrates perfectly an affinity for simplicity and cleanliness in aesthetics. What’s more: the color scheme’s universality across Apple’s branding. Whether you visit the website, get a marketing email, or walk into an Apple store, you’re greeted with the same sights. Imagine the disappointment of Apple fan-boys everywhere if they discovered the pristine pallor of their favorite tech company was suddenly discarded in favor of a ghastly Granny Smith shade of green.

 

It’s very important for all brands, especially those in your care, to maintain consistency in their branding. Furthermore, you should take even greater care to match digital branding with that of a client’s physical locations. It won’t do at all to be sending different messages between cyberspace and physical space.

 

People are unquestionably creatures of habit, and the color scheme choices you make on your client’s websites constitute a form of pattern recognition that can play with a visitor’s perceptions. Though they might not recognize it on a conscious level, your client’s customers are apt to associate feelings, ideas, and states of mind with certain colors. If you break the pattern, customers will be irritated with the inconsistency, perhaps without even knowing why.

 

 

Psychology And Pigmentation.

 

Color psychology refers to the way our senses perceive, interpret, and alter according to the iridescent display in front of our eyes. Color is interpreted within the hypothalamus of the human brain. Those of you with a cursory knowledge of neuroscience will recognize this as a brain region which regulates hormone levels. Hormones have profound effects on emotion, meaning color is directly connected to the way you feel and your subsequent decision-making processes.

 

Now all you need to do is find out how specific colors interact with human psychology, and then leverage that knowledge to create a high-converting website for your client.

 

Color preference can vary wildly by individual, but it’s still overwhelmingly gender-specific. For example: a color most women love, but nearly all men hate? Purple. I definitely adhere to this manly aversion to plum-colored advertisements, no matter how many times people tell me it represents royalty.

 

In general, women tend to shy away from orange, brown, and grey. Anything dull, flat, or lifeless is likely to send a female market far from reach. Instead, women like to see bright primary colors and various shades thereof. Men, on the other hand, are all about the lifeless stuff, black more specifically. After all, lifeless is roughly equivalent to death, and as we all know, death is totally metal. Childish digressions aside, men are most commonly attracted to black, blue, and green.

 

Actually, blue is a color with somewhat universal appeal. Both women and men are fans of blue. The color of oceans and skies implies peace, serenity, trust, and myriads of other soothing emotions. So if you’re looking to portray an icy cool aura of confidence, blue may be the way to go. It certainly has been effective for sites like Kissmetrics, Facebook, PayPal, Reddit, and Skype. Even the U.S. government is cashing in on the universal appeal.

 

As far as conversions go, brighter is better. Primary colors are the best options for CTAs. Red has always been a popular CTA color for its appeal to urgency, but it can also be accompanied by other vibrant alternatives such as the aforementioned blue, as well as various tints of green, yellow, or orange. Primary colors and their effervescent secondary and tertiary counterparts are used in web design to draw attention to messages and imply varying degrees of insistence or confidence to their viewers.

 

Obviously, there is no universal “best” color scheme for branding a particular client. You have to make an informed decision based on the client’s needs, their target market, and the energy that you want their website to portray. You have to do all of this while simultaneously ensuring that the colors you choose for the site don’t clash with one another.

 

Luckily, the latter is a bit easier than the former. Learning color cohesion is far simpler than a messy quack science like psychology. It has set rules that don’t shift under the pressure of human experience, and these can be very useful when picking an attractive color scheme for a client’s website. So let’s delve briefly into the world of Color Theory.

 

 

Color Theory.

 

Color Theory

 

It all starts on a color wheel. We all remember our primary colors from grade school, right? Blue, yellow, and red are the basis of all color. By combining these we get secondary colors like purple, and from there we move out toward tertiary colors. It can get infinitely more complex from there, but a simple wheel such as the one above will do for our purposes.

 

Colors that reside next to one another on the color wheel (blue, blue-green, green) are considered to be analogous. Using analogous colors is a safe bet for a color scheme because they are such close approximations of one another. There are other ways to find attractive color combinations. You can add white or black to any color at different intensities to create a monochromatic scheme. Looking at which colors lie diagonally opposed to one another on the wheel will reveal a complementary set of colors, like red and green. You can also take sets of three colors, equidistant on the wheel, to create a triadic color scheme. This is especially popular among successful web designers like this site from notable design firm, SonicJam. Or this offering from another big design firm, McKinney.

 

Obviously, there’s a lot more to color theory than just spinning the wheel and picking hues that compare or contrast, but this is where you start your exploration nonetheless. Take a look at some of these examples of websites that have used the triadic method into stunning effect:

 

Creativespark.

 

Creativespark

 

Causecast.

 

Causecast

 

AwesomeFontstacks.

 

AwesomeFontstacks

 

Obviously these examples skirt the strict numerical requirement of triadic sets, but they still feature a mainly triplicate motif, but what you’re really interested in is how to make that final call.

 

So let’s get down to the nitty-gritty.

 

 

Picking The Perfect Color Scheme For Your Client.

 

This is a fluctuating process, but in general you can follow this simple 3-step process to get the job done:

 

1. Interview Your Client.

They’ll have some ideas. Some good, some bad. Either way, you’ll want to breach the subject of color with them up front. Preference fluctuates wildly, and they might not have the same sense of aesthetics as you do.

 

2. Decide How Many Colors You Want To Use.

After you’ve talked with your client you should have an idea of what your main color on the site should be. For example, you need to figure out whether you want to use a primary color (monochromatic), or a color set (preferably, but not necessarily, a triadic set).From there, you must either choose to shade or lighten that color to give it a ghostly effect, or choose complementary/analogous colors to make your visuals pop. After that’s done, add in neutral hues to add depth and character to your primary scheme.

 

3. Experiment.

Have a little fun. Design is art, and art is nothing if not experimentation. Play with different images, see what fits, and discard what doesn’t. Run everything by your client before full implementation, but feel free to express yourself in your designs.

 

Ultimately, correct color choices will always be situational. Subjectively make your choices according to the above criteria, and (hopefully) an ever-improving understanding of the relationships between colors, people, and design. Regardless, of what you do, don’t forget to trust your own instincts. You became a designer for a reason. You’ve got an eye for aesthetics, so trust in your own ability to see in living color.

 

Perhaps I’ve left out some key ingredient in the understanding of color scheme. I’m sure you’re just itching to inform me of my ignorance. Do so with extreme prejudice in the comments!

Brought to You by Webydo.

See how Webydo fits into your design workflow and business.

Request A Live Demo

Blog Menu

Subscribe to our blog:

//The disqus (comments) addition
comments powered by Disqus