Friday, July 01, 2016

Color and Design: Some Reactive Thoughts

MakeUseOf offers the following headline: "How Much Does Color Matter in Design? More Than You Think".  While I've often wondered why headline writers presume to know what I think, that's not today's subject. This MakeUseOf article is really just a very short observation accompanied by a detailed infographic from I'll share that at the bottom of this page since they invite it.

Earlier in life, I was a commercial artist. I painted business signs, banners, ads on buses, etc. This was in the days before Photoshop, before laser and inkjet printers, and before much of anything at all, really. We made our own silkscreens, mixed our own colors, and drew our own designs. We painted on boards or canvas using sable brushes.

My buddy William was "da Boss", and the primary artist. But here's an interesting Fun Fact... William has deuteranopia... what you would call "red-green color blindness", which means he could see about three colors: blue, yellow, and what he describes as "beige", which is everything else.

So how does a guy with defective color vision make it as a commercial artist? Glad you asked!

It's a matter of composition, theory, intellect, and compensation.

First composition. While color is important, it's not the only important thing, nor is it always the most important thing. You'd know a Coca-Cola logo immediately if it were rendered in black-and-white. You'd even know it without the word "Coke", from the swoosh alone. Bold, simple shapes matter most. And that scales up to the composition of an ad, not just logos and components. The items placed in a space make a shape. Good artists control that shape. The negative space between those objects also make a shape. Great artists control that, too.

William excelled at composition and rendering a subject, and at selecting and/or designing the proper lettering to use in an ad. You'd call them fonts. He also draws very well. If you've ever held a pencil you know that this part of the process is not color-dependent.

Furthermore, lack of color is significant. Those of us with full color vision are used to it. So heavy blacks and bold contrast can be as impactful as color or more-so.

Next, the theory. A color wheel is invaluable. With a proper wheel, you know how colors can be blended to form new colors. You know what goes together and what clashes. For a color-blind individual this can be largely theoretical, but it can work.

Color Wheel. From
The primary colors are different when you're using subtractive colors (pigments) vs additive colors (light). We used paints, so the colors were subtractive. That is, primary colors are formed when light is absorbed by the pigment, reflecting what's left. Color is subtracted from the white light. Additive colors are from light transmitted directly to your eye. Colors are added together to form new hues.

You also need to know what the colors represent emotionally. For instance, the top half of this color wheel contains colors that are considered to be "warm" and "exciting". The bottom half has colors that are "cool" and "calming". Greens are associated with finance, prosperity, growth. Pinks and purples are emotional or counter-cultural. I know the wheel there says purple is "royal", but we don't have a whole lot of royalty in the 21st century. For a long time now the "mysterious" aspect of purple has been used in New Age imagery.

The point here is that even when you can't see the colors in question, you can know that they exist, and you can consciously design things emotionally, choosing colors from a palette. That's where the intellect comes in. You ask, "what do I want to communicate in this ad on a subliminal level? What do I want the audience to feel? What emotions do I want them to associate with this product or service?" and you design your palette accordingly.

If this sounds terribly manipulative, that's because it is. ALL art is manipulative. In its simplest, most accurate definition, Art is the process by which emotion is deliberately communicated from the artist to the audience. At least, that's my opinion and formulation of it. I created that definition because it describes all art, whether it's painting, music, dance, sculpture, poetry, photography... you name it. To be art, it must be deliberate, and it must be emotional, and it must be felt by the audience. Without those criteria, pretty things are the work of craftsmen, not artists. I continue to use the phrase "commercial art", because emotion is a major consideration. You the audience do not always notice it, but it still makes you buy things. You develop an affinity for a logo or design. You form an attachment to the manufacturer that is independent of the objective quality of their products. And you don't even know why. But the artist does. He made you do it.

What's left is compensation. William, for example, had trouble with hues, but he was exceptionally good at discerning shades. You may find an artist with this perception producing works that are somewhat monochromatic, but which have great depth. Paints and dyes are clearly labeled with reference numbers matching the color wheel. Every job begins with a clean palette. No guessing at what's there un-labeled.

And he had me to double-check a design or suggest color changes. I also matched pre-existing color-schemes provided by the client. Everything was mocked up on paper before it was committed to paint. Formulas for mixing colors were written down.

Finally, as sort of broad filter, I gave William a pair of red-green 3D glasses from the cinema where I worked a second job. Through the red lens, reds are washed out and greens look black. Through the green lens, greens look washed out and the reds are black. It's not subtle or pretty, but it's OK for getting in the right ballpark. You can at least tell that the colors are different, and you can pass one of those color-blindness tests with the dots.

And that's how it's done.

In graphic arts, a lot can be communicated with placement, but to communicate emotion, color is it, even if that color is simply black.

These days there are even better glasses. Much color-blindness is because of weak color separation rather than missing, and a company called enChroma has developed a lens that can improve that separation and help the color-blind discern colors.

For those who have lived with color their entire lives, the effects are subtle, but introducing it where it's never been has tremendous impact. Think of the 1939 Wizard of Oz film where Dorothy moves from black-and-white Kansas to Technicolor Oz, and the effect it had on those audiences. Now look at how color emotionally affects someone by its mere presence:

There are many more videos just like it. Search YouTube for EnChroma.

And here's that infographic. There's an anecdote after:

++ Click to Enlarge Image ++
Psychology of Color in Unicorn Companies  - - Infographic

A Personal On-the-Job Story:

What I learned about art in the sign-painting business has been applicable to software design throughout my career. Now, I'm no Frank Lloyd Wright, but just as he designed buildings that blended with their environment, I like to design software that reflects its use.  For instance there's the casual look of my "manage-everything" software, VIC:

If is all about the Enterprise, VIC is blue jeans and a handshake. Then there's the back-office management software I wrote for the now-defunct Discovery Zone. DZ managed indoor playgrounds for kids, and the software's design scheme reflected that: bright primary colors and simple, bold fonts.

After DZ I was hired to write some commodities-trading software for a rather large firm... this turned out to be their first billion-dollar year. I wanted to make it convey "wealth" and "success", so I went with greens and greys and golds. The color and texture of money. I also wanted to make buy and sell opportunities visually pop, so buy opportunities were in green and sell opportunities were in red.

So I mocked it all up and showed it to the Director of Marketing, who was sponsoring the project. He didn't "get it". He was completely disappointed, to the point of literally pouting, that I hadn't used garish, clashing "Hot Dog" colors.

It was in this meeting that we all discovered he was color-blind.

I went back and did some re-design so that buy opportunities were in an italic typeface and sell opportunities were bold. But I kept the colors. I explained, as gently as it was possible to do, that although he was paying for it, the audience for this software was far broader than him alone, and it had to visually appeal to that audience. Since he was working at a disadvantage, he should take the good advice of those who have a full spectrum at their disposal. I promised to nonetheless work with him to make it as easily usable and visually appealing for him as possible without detracting from its marketability.

I don't think anyone knew of his color-blindness until that meeting. They simply thought he had a terrible fashion sense. I also firmly believe that he had never until that moment thought of his color-blindness as a disability. He wasn't terribly happy with me for highlighting it.

But what I learned from that was to adopt a few rules of thumb.
  1. If you can make colors configurable, do so.
  2. Don't rely only on color. Typefaces, icon badges, and indicators are invaluable.
  3. Useful icons are all about contrast. They should look as distinctive under any palette or in greyscale as they do in full color.
  4. Icon badges should be colorless. Plain black. Remember what I noted at the top of this essay about Coke's logo.
  5. Use tools to test how something will look to the color-blind. Something that looks good to you may be literally invisible to someone else.
  6. Know that if you use words like "defective", "normal", "deficient", and "disability", or "disadvantage" someone might get angry or hurt. You may feel nervous about that if they're paying you,  Personally, I don't let that stop me any longer than it takes to explain the context. If you can't see what I see, then you're at a disadvantage. It's a fact, not a judgement: let's move the conversation along.
For small images and sample screen snippets, Coblis is a good tool. It's a Color Blindness Simulator. For entire web pages you could try the Colorblind Web Filter. It's slow, though, and can be confused by linked images. Both tools let you select the type of vision you wish to simulate.

And that's all I have to say about that.

No comments:

Post a Comment