updated: October 2nd, 2009 / Ross Johnson / 3 Comments

Using Color as Communication

As designers, web developers, or marketers we spend a lot of time developing different forms of communication. On some level that is our job, to communicate and decide how to communicate something. Communication is a balancing act, and I can’t claim to have mastered its every form, but I am aware of it. It is a balancing act because you can say the same thing and ten people will interprete it ten different ways. That is to be expected, even planned for. But there still is a need to understand and shape communication the best you can, even if not everyone will get the same message.

I am being vague, but that is the best introduction to the concept that I can think of before explaining further. Color is often one of the first breakdowns in visual communication. There is a tendency to pick and use color based on personal preference, and for anyone to claim they DON’T do this to some extent is lying (myself included). This situation increases in complexity considering everyone understands color differently, sees it differently, and has different color preferences. Despite the inability to accurately pick color to communicate exact messages, color is still an extremely powerful method of communication and ignoring the message that colors transmit will weaken the impact of your work.

Now the most common application of this situation that I encounter is of course through design work. Color or even the lack of using color is one of the fundamental tools we use in design, but all too often I find myself using different colors from the developed color palette because they just feel right in a specific spot/area. While I pick the color palette based on the message/tone/target, I rarely think about the correlation between which color of the palette I am using and what I am using for.

For example, why are the headlines in the dark green vs the black? Well dark green looked better.

And maybe this is OK at times, but really we should always be thinking about the meaning. Friend and UX expert Brian Kerr first brought this notion to my attention not to long ago. While collaborating on a project with Kerr, I had used red for an icon of a stop sign for “report this photo” and gray for an icon of “view more photos.” This made sense to me because red in nature and in our lives is an “alert” color. However Brian pointed out to me that in the context of this particular site, design, and identity, red was actually being used to show that something was good and gray was being used for things that were unfavorable.

It was at that point I had an “ah-ha” moment. He was absolutely right, and my use of color based on feeling rather than logic and communication would have weakened the design. I was not using color to communicate a consistent message, and this sort of color usage happens all the time.

At the same time you must be careful that the color choice and use of color is clear however, simply assigning meaning to colors and using them for the different meanings with out clear indication of why is simply going to confuse users.

This is something that I am encountering even today, where a client has had subtle color-coding of different product lines for decades. They want to incorporate that color-coding into the website. This might make sense at first glance, however there is nothing on the website that would really make the use of massively different color schemes for different parts of the website something that makes sense to different users.

Navigating to a different page to find that the headlines are now green instead of blue is not a clear way to communicate with color. If color coding must be done in this situation you must find some better way to tie it together so users understand there is a reason for all the pages under one section have green headlines and others are red.

Make sure you pay attention to your color usage, and this goes well beyond what color palette you develop and work with. The use of the colors with in that palette are just as important as picking the colors themselves.

3 thoughts Using Color as Communication

  1. Pingback: message sign icon

  2. Pingback: Brickyard Blog Roundup: June 9th Edition < The Brickyard

Comments are closed.