The Smashing Book – The Ultimate Guide to Fantastic Color Usage (part 3 of 3)

• By The Smashing Editorial
• October 5th, 2011
• 0 Comments

← Fantastic Color Usage (2/3)TOCPerformance Optimization for Websites →

Color And Usability

In addition to making a website look good, color can also help your audience use the website. Imagine if websites didn’t evolve beyond the black text on white background aesthetic of early newspapers. In 1982, USA Today broke into the business with the first color newspaper ¹. In addition to having color pictures on many of its pages, it used color to mark each section so that readers could quickly find the sections they were interested in. This concept is important in Web design for both new and returning visitors. USA Today carried this concept through to its website by adding colored buttons that correspond to the sections in the printed version. It has chosen distinct hues for each section. Unfortunately, though, very similar blues are used for the “Home”, “News” and “Travel” buttons, which probably trips up users on occasion.

USA Today uses color to help readers quickly identify each section of the paper, and it has been doing this since it opened its doors in 1982.

Mint.com successfully uses color to help potential customers understand its service and persuade them to take action. The two most striking color elements on Mint’s home page are the pleasing double-complementary palette in the personal finance data graph and the bright-orange button that says “Free! Get started here,” which stands out against the light-green-tinted background.

Double-complementary palette

Mint.com uses a double-complementary color scheme to illustrate the effectiveness of its software. The bright-orange button pops out from the screen and attracts the user’s eye.

This site also uses color to give users immediate feedback as soon as an error has occurred on its website form. Its creators chose a color that is often used to alert people to danger, red, whose hue contrasts well with the pale-green base of the website, making it difficult to miss.

The yellow-orange and blue hues are nearly complementary colors. Highlighting the sticker in green disrupts these complements and attracts attention.

The bright-green sticker, among the slightly muted darker colors, grabs your attention.

Color And Engagement

Color can focus a user’s attention and coax them into engaging with a website. With all of the noise and attention demanded from your audience every minute of the day, it’s absurd to expect them to make a concerted effort to engage with your design. Your colors should pull them into the design and content. You can use color to draw their attention to the most important aspects of your website. Using very few colors, UI Tuneup explains its service quickly and then points you in the right direction to get you started using its service.

By choosing bright complementary colors, UI Tuneup makes it easy for users to find out what the service is about and where to go to begin using it.

Even when your website has a lot of colors, you can draw users to a certain element by giving that element a color unique to the page. OtherInbox uses green to highlight the focal point of its website, the “Test drive” button.

One of the worst things that can happen is that a new visitor cannot figure out how to navigate your website, gets frustrated and leaves. Color can help them start on the right foot, as you’ll see by comparing two websites that essentially have the same complementary color scheme and similar designs, but use them to completely different effect.

Sonze made some of its buttons light blue and some of them deep red. But the blue is so light that the user has to struggle to read what the button says, if they even find it. Also, clickable items have little consistency in color, and so even if you find the said buttons, you may not find the other clickable items.

These two websites have similar colors schemes, but each achieves considerably different levels of effectiveness.

Compared to AutoFinanciering.nl’s website, Sonze makes its buttons hard to find and gives its clickable elements little consistency in color.

AutoFinanciering.nl applies a consistent color hue, varied in saturation and brightness levels, to different elements, helping the user better engage with the website.

AutoFinanciering.nl, on the other hand, highlights nearly every clickable item in a deep shade of red. Because the background is light in color, users can easily see the buttons.

On a content-rich website, where the color of content is constantly changing, using a neutral or accented background is sometimes best. This way, the content pops off the screen and doesn’t compete with the background. Many photographers employ this technique on their portfolio websites to maintain focus on their pictures. Hulu, a popular video website, has an accented color scheme, as does COLOURlovers, our own website for creating and sharing color palettes.

Hulu accents its website in green to match its logo and uses few colors so that they don’t compete with the content.

On COLOURlovers, we use a red accent to draw attention to the most important part of our website, the community section.

Color And Experience

Considering the cultural implications of the colors on your website is important, especially if you expect international traffic. Green, for instance, a popular color, is taken in Western society to mean environmental consciousness. In China, a green hat could imply that a man’s wife is cheating on him. The color is sacred in the Islamic world, and it has significance in Catholicism. In some African countries, green represents the natural richness of Africa. It has also been associated with money, jealousy, growth, sickness, inexperience, evil, fertility, hope, youth and death.²

The cyan in this palette doesn’t fit any of the rules discussed above. But because little of it is used in this picture, it works beautifully.

This picture of sunset from Paulo Brandao’s collection exemplifies how nature is a master of color??4.

Color affects people emotionally and psychologically, too. Faint tints of green are sometimes painted on the walls of patient rooms in asylums because of its calming effect. Eating something from a green plate might give you the impression that it tastes bitter. A blue plate, however, might suppress your appetite, while a pink plate might make food seem sweeter ³.

By itself, this palette, taken from the plasma globe, is off-putting. But put in a context by the artist,just like the plasma globe, it can be a wonderful and beautiful range.

The plasma globe was an amazing invention by Nikola Tesla. Its colors are created simply by the excited charged particles of gas inside the globe6.

All colors in the color wheel bring with them an equal number of interpretations, folklore tales and symbolic associations. So, there are really no rules or secret recipes for choosing colors. When it comes down to it, you just have to rely on what you think looks good and what you think is best for the project you’re working on. Don’t be afraid to sit back and see which color moves your heart, rather than your eyes, the most⁴.

Inspiration

“Good artists copy. Great artists steal” — Pablo Picasso

Color is in nature, science and everything human-made. It’s everywhere. To get inspired, just look around. Probably within your arm’s reach is a picture, piece of furniture, rusty car fender, flower or cat that has an interesting color composition. By picking out the colors from whatever you find, you’ll probably be surprised by how easy it is to get inspired with color.⁵

This fun palette from the picture of the candies would make any website look tasty.

We can find beautiful color palettes in pretty much everything. Once you have a palette to work with, arranging the colors in the right proportion is the next challenge. This image would be completely different if green were emphasized instead of pink7.

We hope this chapter has given you a basic understanding of the core concepts of color theory, some terminology to help you talk about color and some ideas on where to find inspiration for your next creative project. This information will help you add some structure to your designs and help you use color to make an impact or improve the user experience or create a vibe. But what we hope most is that you feel inspired to play around with color. There are many “rules” about color usage, but rules are meant to be broken, and people should follow their heart and inspiration. Digital technology puts people only a few key strokes away from sharing their passions with everyone else, and when you have that big and diverse a market, there’s more than enough room for everyone to be creative and unique and to create something beautiful. Good luck and happy coloring.

At first, this picture of a curb may not seem to have much of a scheme, but when you start sampling colors from it, a nice palette is revealed. Though they may seem a bit incompatible, when toned down, pure color hues look great together.

Erosion is another of nature’s tricks for creating beautiful palettes.
http://www.flickr.com/photos/billselak/2491244618/

—

1. Garcia, M. R.: The color evolution of USA Today: a three-minute interview with Richard Curtis
2. Flickr: Golden Light by Paulo Brandão
3. Maeyama, M. Apr 2001 The Color of Yummy, Parenting Volume 15 Issue 3.
4. Flickr: Fondling flickrspace by Steve Jurvetson
5. Flickr: yomi955

← Fantastic Color Usage (2/3)TOCPerformance Optimization for Websites →