Slash7 with Amy Hoy - color

Color links snacktastic

2007-03-04T05:15:00Z

Still chipping away at the ol' book. Argh. Argh. Did I mention argh? ARGH!

Here are some tasty links to tide you over:

Choosing color combinations from Veerle. It's not nearly as exhaustive as I'd like, but color n00bs will find it very useful.
Amazing animated personifications of color - sounds whacky, I know, but it's actually IN-FREAKIN-CREDIBLE. If you're interested in color, you have to watch this. I am so jealous of the lady who came up with that. (via Veerle's post)
Article on OS X's color picker tool and even I learned something...
Hex (HTML color) plugin for OS X's color picker and freeeee
Color Oracle simulates color blindness for OS X, Windows, and Linux and it, too, is free. There are some amazing people out there.

Til the next time...

Share with me your favorite design links!

Bad Design Case Study: Lush

2007-01-19T19:24:00Z

What better way is there to learn than to look at what you shouldn’t do?

Lush isn’t just a nice word for “borderline alcoholic,” it’s the name of a global company. Lush makes its millions selling juicy bath-stuffs, shampoos, lovely soaps, and “bath bombs” which splutter bubbles and foam and tasty smells when dropped into water.

The Set Up

Let me start off by saying that the Lush stores and products are pretty awesome.

Lush sells girly stuff, but it doesn’t really have a delicate girly image—it’s kinda rawr-power-girly, personal, delicious, luscious (Lush), and fresh. The store designs mimic a hip greengrocers’ with faux handmade signs, lots of wood, and casual-looking but very calculated merchandising.

And it works.

Doesn’t that just make you want to buy? Or possibly just steal a bit and eat it?

Oh, and they are not cheap. Nooooo, sir. This is a place where you splurge on yourself. You’re talking $4 - 7 for a bar of soap.

And this is Lush’s logo:

It’s fairly transparent in terms of its designer’s rationale:

It’s retro and poppy
It’s round and citrusy, which are meant to make you think fresh, refreshing.
The comic book style lettering is in-your-face, like Lush is going to save the day.

It doesn’t really fit with their in-store design but that’s OK; they make it work.

Next Up: Don’t Cover Your Eyes

So you’ve met the store and the logo, setting the stage for… the web site!?

Remind you of the store at all?

This is the design that spurred me to write this post. Turns out it’s not the Lush site, but one of many. Lush.com itself is just a (very ugly) gateway to all the local distributors in each country where Lush stores exist. Each local distributor gets to design its own web site; the designs range from horrendous to merely bad.

The Aussie one pictured above is one of the least objectionable. (See it in all its glory.)

From my internet escapades, it seems like almost all of the physical stores look pretty much alike, including US, Canada, and European locations (Lush started in the UK).

Oh No You Din’t

The people behind this web site design have taken something that is an indulgent way to take care of your body and turned it into a web site that looks like it should be selling athletic cups. With, perhaps, the exception of the “Free Sexy…” bit.

And, those colors, ugh. Green and yellow? In those shades? In moderation, please! And their own banner ad on the front page is blindingly contrasty with the yellows, pinks, and fuschias.

Specific Pitfalls:

Industrial yellow-orange and darkish green; they may be from the logo, but there’s probably a reason the store fronts aren’t decked out in those colors
Generally speaking, all the colors are far too saturated and contrasty
Black outlines and shadows do not bring to mind calming, envigorating “me time”
The sidebar and header design are very constrained and blocky (the little bump out of the menu does nothing to offset this)

Branding Problems:

There are no echoes of the store’s color schemes, or even the color schemes of the products themselves
There’s nothing at all to remind visitors of the airy elements of the store
“Luscious” and “fresh” and “indulgent” are really not going to come to mind (remember: jock straps)

Potential Solutions

It’s not easy to take a bright, pop-style logo like that and reconcile it with the informal, almost earthy style and atmosphere of the stores where Lush actually peddles its goods. But it’s also not impossible. The stores make it work… how could these people make the web sites work?

This is what I would do:

Design a new color palette for the site that includes a set of warm tans and browns—to mimic the the wood, and color of many of the soap products (which range from white to golden).
The rest of the color palette would be sampled from some of the products’ colors, including blues, greens, and pinks.
Set the logo on a white background and offer some sort of color or graphical link between the white area to the actual store front below (not a lot of calm colors go well with bright yellow and green)
Set all the products on white, with isolated photographs (the products on white backgrounds); consider making the front page a photo of the luscious product merchandising seen in the stores, and when picturing the products, group them together artfully, rather than just one piece
Echo the store’s signage with a dark slate or dark brown color (not black) and white text announcing special deals and/or product names

Putting my money (or at least my mental CPU cycles) where my mouth is, I took ~10 minutes and came up with this:

My suggestions (and little design example) won’t instantly solve the web site’s problem, but they’re starting points… and, I like to think, a good example of the kinds of things you can use to solve your own difficult design problems.

The Key Lesson…

Just because you use the logo’s colors doesn’t mean your site is properly branded!

You have to keep in mind your brand’s image and all other collateral (including physical things like your stores or offices!) that are used to tell the world your brand’s story.

In other words, you can’t lure people in with the promise of sensual self-care and then hit them over the head with traffic light yellow.

Well, I suppose we’ve seen today that you actually can, but it’s not good for business.

Random Crafty-Girly Knowledge: Bath bombs are basically citric acid in powder form, plus sodium bicarbonate—yes, baking soda—and a little bit of liquid binder, often witch hazel (an astringent made from a plant extract). Plus other goodies to make the color and smell. I’ve made ‘em for presents before. They’re always fun… if you like baths.

Was it good for you, too?

Lemme know! I’m awaiting your input with bated breath.

Drop That Design! 6 Things You Need to Know About Color

2006-12-30T08:05:00Z

Certain color combinations can make your eyes water, others can make your eyes practically leap out of their sockets in delight. Colors can help instill confidence in a product, company, or design—or undermine it. Color can set the mood, or destroy it. Color can make you fit in, or stand out—and it depends on your situation whether or not that's a good thing.

Despite the seemingly magical power of color, it's not voodoo. No chickens need die in your pursuit of color-coordinating bliss—it's a skill that can be developed in anyone who has the ability to see the rainbow.

Annoying Prologue

I've long been meaning to write an article about color but I wasn't truly galvanized until a friend sent me this article. I got the feeling that the article had made the rounds—and I couldn't stand on the sidelines while misinformation like this gets passed into common knowledge of developers, hungry for some help for their color problems. (And his theories on picking colors have inspired my #1 tip at the bottom.)

Now, I don't want to disparage the author's intentions at all, because I'm sure they were good—after all, it's not like there's a designer superhero who swoops in to save the day for people forced, against their will, to choose colors. Unfortunately, you know what they say about good intentions. On the upside, it helped me formulate this list to try and dispel some color myths and misunderstandings.

So, without further ado or introduction... May you color in peace! (And good taste.)

6. Make your colors earn their keep.

It's too easy to just spot a color you love and then use it on the next available victi—I mean, project. Unfortunately, this isn't the path to the most effective work—and color picking, like all design work, is supposed to be functional as well as beautiful.

So, when you pick your colors, you should always ask yourself, "What result am I trying to achieve?" All color choices should stem from your answer.

Examples: If you're trying to hint at delicious food, consider the type of food and the colors associated with it. (Neon green, for example, is probably not a good choice.) If you're trying to stress stability and capability, check out which colors are associated with those ideas. (Fuschia? Doubtful.) If you want to go for cool and hip, figure out what stuff around you exudes that feeling and why. If you want to really stand out from the competition, zig when they zag.

5. Pretty is nice, usable is nicer.

Usability goes along with fulfilling your true purpose. After all, what good are your pretty colors if people can't read your design?

Be sure to create a good contrast between background color and text, and double-check that your colors aren't so bright as to cause eye-watering or after images.

And, if you use color to encode meaning (e.g. click this, not that, or this is bad, that's good), make sure that it's still usable by people with various types of color-blindness.

The author of the aforementioned article uses these graphs as an example of the "fairly appealing" results of his work to spiff up his color palettes. As you can see, the colors only serve to distract from the actual content:

<caption>Graph images copyright Jon Shemitz and used solely for the purpose of comment & criticism</caption>

Too many colors can easily spoil a design's ability to communicate. (And, to be honest, this graph doesn't even know what it's trying to communicate, but that's another article entirely.)

4. Just because you don't want to claw your eyes out... doesn't mean you shouldn't.

One of the most dangerous misunderstandings in the aforementioned, misguided article is found in the middle of the last paragraph on the first page:

This is why most walls are painted light colors: they're easy on the eyes, and they don't clash with anything. This is also why many websites use pastel color schemes: Any light color with a moderate saturation goes with any other light color with a moderate saturation.
— The Article

This is not true! The rules of color matching don't apply selectively to only saturated colors. If you need further proof of this, just look at that graph again:

<caption>Graph images copyright Jon Shemitz and used solely for the purpose of comment & criticism</caption>

In reality, you don't necessarily have a match because just because your low-saturation colors don't cause the eye-watering and discomfort high-saturation clashes do.

The author of the article was probably thinking of what interior decorators call "neutrals," which include white, off-white, grey, tan or beige, and even "dusky" (low-saturation, greyish) green. But that's interior design, not color science—combine those dusky green walls with a bright pink sofa and you'll find that green is not so neutral after all.

The only true neutrals are white, black, and (usually) grey; although pairing colors with these neutrals can change the dynamics of a design, they can't clash. All other colors are subject to clashing, depending on what you pair them with.

3. Colors do so much more than "sit there and look pretty"

There are three main ways your choice of color affects people:

Colors carry emotional and metaphorical meaning for everyone who looks at them—and allegedly, in some cases, directly influence human behavior.

For example, certain shades of blue are said to convey stability, and others are said to convey calm. Some shades of yellow make people think of sunshine, springtime, and hope; others make people think about dangers, warnings, and the unhealthy hue of some bodily fluids. And don't forget culture! Combinations of orange and black may say "Halloween," while combinations of orange, brown, and yellow might say "The 70's." And you can't just think of your own culture—to the Chinese, red means good luck and good fortune, and it's the color of wedding dresses (and just about everything else), whereas red typically means fire/vigor, sensuality, or power to Westerners. And so on.

Research has also indicated that the application of colors can create or stifle appetite, make people hurry or calm down, and a host of other subtle effects. Or at least, that's the idea behind the pale pink and pale green decor in hospitals, and the reds, yellows, and orange-browns of many fast food joints.

Saturation and brightness convey a more generalized kind of message—less "touchy feely," but equally important.

It's not just the hue you choose, but the saturation and brightness, too—whether it's a light color or a dark color, with a lot of color intensity or without much at all.

Bright, pure colors seem "fresh" and crisp; pastels are often considered calming, or comforting; saturated dark colors may feel "solid" and heavy while unsaturated ones can seem sophisticated and refined, or wishy-washy, watered down, even dismal.

The combination of colors affects the overall "feel" of the final result.

When you combine colors, you create a dynamic that wasn't there with a single color alone—in effect, the combination changes the effect of all the colors in it.

You can choose to create harmony by choosing colors that coordinate according to color theory, or create tension and drama by choosing colors which clash subtly or strongly. (Just like musicians use discord in music. And just like in music, if you're inexperienced in the art, you shouldn't try to create drama by mixing up bad combos. Learn the rules before you break 'em.)

Hey there, new reader! This is the first in a series of articles on color, human interface, and other such related goodies. Subscribe for more! Or, get updated by email when new posts are made.

2. Relying on software to pick colors for you is like letting your mother pick your clothes.

Using some basic knowledge picked up by Googling, you can probably come up with some passable color schemes, given either a color wheel and a ruler, or a simple software program.

BUT... would these color combinations be appropriate for your task? Effective? Beautiful? Might they still be too bright or too dark to be human-friendly?

Software and math can't understand your wishes, hopes, and goals, or your viewers' emotional or cultural baggage—or even vet the colors with a critical human eye. It's simply a toss-up.

Like this article? You might also enjoy my presentations on user interface and user experience from OSCON '06.

1. The proof of the pudding is in the eating.

And so we come to our final "Thing to Know" about color. This one's not directly about color itself, but rather the learning process.

Put simply: Don't take anyone's advice about colors until you see their output—and don't listen to them if it's ugly. In the case of Jon Shemitz, author of the aforementioned misguided article, that means this:

<caption>Graph images copyright Jon Shemitz and used solely for the purpose of comment & criticism</caption>

If that were pudding, it'd make you very sorry indeed that you ate it (although you might be able to call in sick to work).

Thankfully, unlike many things, a person's color-picking prowess can easily be assessed. It is both A) something visible, and B) something most humans have an innate sense for. (Even if you feel paralyzed when you pick your own, you probably have no real problem judging color palettes that are already out there. It's a human thing.)

Bonus Round: Yay, links!

All psyched up about color? I know I am! Don't quit learning now, just because I'm out of breath (and my wrists hurt!). Here's some recommended reading so you can keep on:

Poynter.org - Color, Contrast, and Dimension in Newspaper Design — you will learn. Ignore the fact that it's about newspapers.
handprint.org - Color Vision — from a painting enthusiast (and, yet again, still applicable)
Behr Color Smart — yes, another non-web-specific resource! But color is color. And this is a neat Flash-based app.
Natural Selections: Colors Found in Nature and Interface Design — article talking about one way to help ensure your audience doesn't gouge out their own eyes

Books you might find useful—at a reasonable price:

Books you might find useful if you have a largeish book budget:

Didja like it? Help get the word out—digg it!

Bonus Round 2: You!

Let me know what you think! I want to hear from you. What did you find helpful in this article? What would you like to see next? Have any terrible or funny color stories to relate? (You know you want to.)