The World Wide Web is awash with sterile design solutions. Hewlett-Packard, IBM, Dell, Microsoft, and countless others are virtually indistinguishable from each other (similar layout, similar color scheme). Though one might say that this uniformity makes web browsing easier by virtue of a standardized interface, the reality is such sites create mundane experiences for their users and fail to make a positive connection with their audience.
One easily remedied cause of such drab design is color. Perhaps no other design element has as much influence on how we feel in a space (a website, a home, etc.) as color. Colors can instantaneously change our moods and alter our opinions. They can make us comfortable, put us in a state of awe, or get us excited. In the case of interface design, color combinations found in nature are especially useful. From complex web applications to informative “brochure-ware” sites, naturally occurring color combinations have the potential to distinguish (by helping create a more memorable website), guide (by allowing users to focus on interactions), engage (by making page layouts comfortable and more inviting), and inspire (by offering new ideas for color selection).
Distinguish
As we go through our lives, we quickly forget about events that are routine and mundane. We tend to save our memories for unique experiences or events with which we had an emotional attachment. It’s no different as we go through the web. When all websites look the same, it’s quite easy to drop them into the “been there, seen that” bin. And once you consider how fast we move through websites, it’s probably even easier.
Therefore, any opportunities websites have to be distinct shouldn’t be squandered. If your site stands out, chances are web users might give it more time or thought when they arrive. They might even remember it and come back. There’s probablybly no better opportunity to make a favorable impression than with color. People have an immediate response to color: they get excited, they get happy, or they get bored.
A unique palette based on colors found in nature can get you out of the World Wide Web color rut (Fig 1) and help create a more memorable website. For example, the naturally occurring color combination (Fig 2) used in this website mock-up (Fig 3) is a stark contrast to the more “standard” version (Fig 4) of the same site. The soft colors are subtle enough to work as background, yet distinct enough to separate the four main information areas of the site.
But before you go applying “prairie tones” to your design, remember your color selections need to be appropriate for your audience. Because color communicates so effectively, it’s important to make sure that it says the right thing.
—Frank Lloyd Wright
GuideColors found in nature are often less saturated and more pleasing to the eye than their artificial counterparts. As a result, they allow users to focus on interactions, and not be distracted by overly bright hues. When you attempt to focus on the information in a layout with very saturated hues (Fig 4), your eye consistently returns to the bright colors (in this example, to the blue bar at the top). In contrast, the blues and yellows in the alternate layout (Fig 3) create a balance that allows the images, navigation, and content to come forward. (This is especially useful for pages that have lots of content.) The strongest visual elements are the most useful ones: navigation menus and featured content, not background colors. Perhaps this occurs because of our familiarity with nature’s color combinations. We are used to backdrops composed of blues, yellows, and grays because we see them every day.
This phenomenon becomes especially important in web-based applications where users can interact with an online service for hours or days at a time. Having a palette that does not fight for a user’s attention allows them to focus on their work and on important information. Of course, color isn’t all you need to create a great web experience; structure, interaction, layout, and more need to work together to create usable and useful websites and applications. But color is an important part of the equation and shouldn’t be ignored.
—Edward Tufte, 1989
Consider the following two versions of a transaction form. One (Fig 5) uses a palette that is bleak and intimidating. The other makes use of a naturally occurring color palette and is more approachable because of its warmer, more inviting colors. For the clericals who must repeatedly use this online program, a less intimidating interface can engage them and provide a more comfortable setting within which they can work.
Inspire
Color combinations found in nature also provide a wealth of inspiration. The diversity of the natural world continually offers new ideas and approaches to color selection. For instance, the colors used to encourage tourism in the city of Dublin are not the orange, green, and white of the Irish flag you might expect. Instead, they come from a naturally occurring color combination on the Irish coast. This combination is both lively and attractive, making Dublin seem fun and expansive. It’s a shame this color scheme was not carried through to the Dublin website, which is much less vibrant and engaging.
All that said, naturally occurring color combinations are not a silver bullet. Sometimes, you might want to inspire “shock and awe” in your audience. In which case, colors that never occur together in nature (and therefore seem uncomfortable) could be your best bet. Other times, your favorite shade of corporate blue could be just what your audience is looking for. But when it comes to extended or complex interactions and unique ideas, color combinations found in nature are a valuable weapon to have in your arsenal.
Setting the Mood with Color by Sean Glithero
http://coe.sdsu.edu/eet/Articles/colormood/start.htm
Color My World by Molly E. Holzschlag
http://www.webtechniques.com/archives/2000/09/desi/
Color Design for the Web by Vaishali Singh
http://www.coolhomepages.com/cda/color/
This is a great article. Finding color combos is always fun in places like nature. Although not exactly nature I once used the color combo of OJ in a water bottle. The blue in the label was a good match for the brand of OJ and I used it on a site.
*excuse my english*
Gray is all over softwares interface for many years because of the default color of Windows. The default background color for web pages of the fisrt browser was gray too. Today, light gray is very common being background for texts (see right column at B&A).
Do you think the background color change of the new Windows XP to light yellow will influence the web pages design?
I think so.
Hi Luke,
I really enjoyed your article. Been looking into the topic of colour use for a few years now, and one thing I found was that surprisingly, Purple, is one colour that hardly appears in nature. I can think of a flower or two and maybe a sunset, but it is one colour that isn’t as abundant as others. 🙂
I am so glad that you have brought this issue to the table. You can’t go wrong with the colors of nature, it is such a great place to start for influence on a design. The blues of the web have become so redundant, yet I must admit that they have there place when necessary and when used tastefully. Websites have so much potential with the proper color harmony.
It took a little bit of time.
I have redone a $120,000 / year website.
Let me know what you think.
http://FlagAndBanner.com
What an amazing contrast in the Dublin color example you show in Fig 7 and their website.
It’s interesting that their tagline reads “it’s about time,” but a visit to their site sends the message – to me anyway – that there’s anything but time with all the busy flash animated ads and content boxes all squeezed together.
If there is one site that could benefit from implementing natural colors and landscapes, that would be it.
Interesting and thought provoking article. It would be even better if, when comparing natural-color designs to traditional ones, you kept the layout the same. When making a comparison, it’s never a good idea to change another relevant variable.
Aside from that, I agree that natural colors enhance the navigation experience. I particularly enjoyed the comparison of HP’s, IBM’s, Dell’s and Microsoft’s website… spooky, huh?
Thanks,
Carlos.
Update on sales improvement from implimenting natural color ideas. Sales have gone up about 9%. This is good considering that sales are usually slowing abou this time of year.
I guess I was hoping for a little more feedback on my choice of natural colors for a flag and banner website.
Let me know. http://flagandbanner.com
Thanks especially for the Dublin print-vs-web example is a perfect reminder of why your print and web teams should always be kept in sync with each other. The print design is a hundred times more engaging and inviting.
And Flag guy… This space is for commenting on the article and design ideas, so it’s not surprising that people aren’t commenting on your redesign of your commercial site.
Thanks especially for the Dublin print-vs-web example is a perfect reminder of why your print and web teams should always be kept in sync with each other. The print design is a hundred times more engaging and inviting.
And Flag boy… This space is for commenting on the article and design ideas, so it’s not surprising that people aren’t commenting on your redesign of your commercial site.
I found your article really interesting, though while designing a website I usually use the coporate colours… yes, I can variate them, make them heller or darker, but I just can’t take a picture and decide what colours I’m going to use..
I mean, your idea is really nice and may work, but it also has its limits…
Anyway, thanks for the article, it was a nice read!
Thanks Luke, Your article confirmed our thinking that colors selected from pictures, specially pictures of nature have a very special effect. We have managed to impliment color selection from pictures to web pages. You may view this at http://www.pic2color.com
A few days back I was looking at a presentation by one of the designers, it had charts and graphs to depict the correct usage of color and I was wondering while it is great to see the analysis that was done there, are we (some of us) overthinking and trying to find too much science? Can’t we look at things in as simple a perspective as this article? This is a great simple article!
Cheers
Alok Jain
http://www.iPrincipia.com
Really awesome article. I’ve done this type of thing before with other photos (of the dollar, cars, etc), but never really thought about using nature photographs to come up with color schemes. I’ve gotta try this one on my next project! 🙂
Great article. I have been using stock photos to create color combinations for years but I never really thought about how it is nature’s way to tell us what works and what doesnt.
Thanks for the comments… on the topic of background colors… Cool colors (blues, greens) work well as backgrounds because they recede. Have a small room in your house that you’d like to make seem bigger… use a light blue. Got a big room you’d like to make more cozy… go with a warm color like red (warm colors come forward.) Color psychology also plays a role here. We associate blues with the sky and oceans (lots of depth in both), hence its calming effect and associations with depth and dependability.
Some color characteristics:
Red: Vibrant, passionate, love, war. A very strong and attention-grabbing color, red is charged with emotions.
Violet: Regal, sacred, sensual. In deep shades, violet is luxurious. When lightly tinted, it is aromatic and spiritual.
Blue: Cool, dependable, sophisticated, sky, water. Blue is full of depth, constant yet dynamic.
Green: Fresh, relaxing, earth. Green is very balanced and calm, a natural color.
Yellow: Sun, energy, warmth. Yellow is welcoming and full of life, a happy color.
Orange: Strong, vital, hot. Orange is the warmest of colors, a healing and playful hue.