Creating Consistently Colorful User Experiences, Part 3: The Craft

June 23rd, 2009

Written by

Andrew Maier

Cofounder, Advisor

Published on

June 23rd, 2009

How can you can pick a color scheme that speaks to you or your client’s business and then implement it successfully?

Okay, so: you’ve read the theory, you know the medium and now it’s time to work your color magic. There may be millions of colors out there, but it’s your job to pick from the masses and venture forth. After all, you are the designer. It’s not about thinking at this point, it’s about feeling and intuition. Don’t see the color, be the color.

Note: this sounds too good to be true because it is.

Introducing color into your website isn’t easy. I should know, it prompted me to write this series! Some clients appreciate the dynamism color can add to a page, while others are put off by it. It’s as if you were doing something as absurd as adding a sound track to their site.

Never fear, though, because in this article—the last in a three-part series on color— we will take on the issue in gusto.

If you’re just joining us in this series, I’m endeavoring to provide a comprehensive insight into colors and their treatments in web design. In our first article, we explained color basics: how does color work? how does an artist use color? how does color affect our mood? Our second article covered how colors are applied in our medium, the internet. Much ground has been covered in the way of standardizing, but much work is left to be done; In our third and final installment (which you’re reading, in case you wondered), we’ll cover how you can pick a color scheme that speaks to you or your client’s business and then implement it. Finally, I’d like to highlight some “gotchas” that exist in coloring a site’s user experience, and what you can do to make color a winning asset for your experience.

Start at the beginning

When meeting with a client or consulting them upon their color scheme, I like to go back to basics asking them:

What image are you trying to convey?
What is the message you want to send?
Who is this site/application for?
What can the design do to enable them?

From the answers to these questions, the client and I have a meeting point. Using wireframes is generally the best foot to get off on from here.

Building a strong foundation

After you’ve agreed upon the message (both the overt and subtle messages) you’ll need to illustrate what that experience is going to look like. There are many tools in place to give your clients a ballpark as to what the final experience will look like. It depends on your individual work environment how you design this document, but there are a couple of things to keep in mind:

At this early point in the design, keep things simple. Try and stay away from color. Only using typefaces and contrast, try and create a layout that guides the user’s eye around the page in the desired order. Of course, this is much easier said than done. I use the “squint test,” a highly technical test that involves zooming out in Photoshop and squinting. If you can see headers, links, and other sections in a way that guides your eyes, you’re on the right track.

Many clients will find this part of the project difficult. Moving from black and white wireframes or sketches to greyscale mockups seems like a small step forward, but this is arguably the most important part.

Marrying the Color with the Context

Okay, you have your message, and you have your medium. Now it’s time to take this a bit further and add color into your design.

From the first article in the series, we learned what emotions each of the common colors conveys. For example, say that you’re designing a site for a yoga studio. Yoga is about self-discovery, like a sort-of rebirth of the soul. Both of these ideas focus around the concept of something new—something mysterious. For a yoga site, I might choose something like purple or teal. These colors are secondary, and imply a deviation from the norm.

Picking a Color Scheme

I apologize if you’re looking for a step by step guide to this process. There’s really no hard and fast rule. At least, not that I could find. And trust me, I looked! What I can say is this: make sure to get an idea of what your client wants before you go suggesting color schemes. Inform your work by answering these questions:

Does the client have a logo? Does that logo have colors you can use?
How about their place of business? Is it clad in grey or can you draw inspiration from their office decor?
Does the client have any stationery? Does it employ a color scheme?

In any case, make the most of your environment and be perceptive. Inspiration can come from many different places when you’re dealing with a client. Keep in mind that the subtle (ie: not overt) message you’re hired to communicate for the client will be a message that the client will not overtly communicate to you.

Although this work requires attention to detail, do not despair. If no specific emotion or color comes to mind, there are a number of resources available to you.

Use Color Resources

Even if you already have a primary color in mind (pun intended), there are plenty of color resources online that will help you iterate on that decision. Any of these resources can help get you started:

Adobe Kuler

Adobe Kuler is a flash based application that lets you explore, create and share color themes. I find the interface a bit clumsy, and it’s difficult to feel like there’s an active community going.

Colourlovers.net

ColourLovers was the first color-specific site that I found and I still love it. Part blog and part theming community, it’s pretty much the de-facto standard for pontification regarding color schemes online. I highly recommend it if you’re looking for color inspiration, palettes, patterns, etc.

Color Scheme Designer

A wonderfully designed site that lets you get straight to picking color schemes. Not only does it allow for a ton of variations, it lets you see what your color scheme looks like applied to a placeholder site. You can even see how your color scheme appears to people with color vision deficiency! Most definitely a new favorite of mine.

Color Hunter

This is a neat service. If you’ve got a logo, illustration, or photo which you’d like to base your color scheme on, simply upload it and it will generate a scheme. Easy to use and the results look consistently good!

Color Schemer

Color schemer offers a ton of resources to get you started. Not only do they have a galleria for your dashboard, they also have a desktop application that helps you fine-tune that perfect triad.

Build Internet

Build Internet keeps a great log of posts that have color schemes based on a piece of artwork. This is a good way to just get a feel of how artists use colors in their work.

Itemize what can take colors

So now you’ve got that perfect color scheme. Additionally, you have a wireframe or other rough sketch that gets lays out the elements that will appear on your clients site. Now it’s time to take in inventory of what items on the page can take colors from your palate. Your choices are:

Backgrounds
Text
Headings
List Items
Borders
Links
Strong, Em, Quotes
etc

Keep in mind that these are only the options afforded to you by CSS; with graphics you can compound the complexity of your scheme. I will say this though: be sure not to uniquely color too many elements on the page. The resulting effect will not be so bad if you’ve picked a scheme that includes colors of the same hue. If, however, your scheme touches on three or more different colors, you want to make sure you’re not overwhelming your users with color.

Above all else, your starting point (in this case, your black and white wireframe) should be legible and make good use of contrast. In the same vein, as you’re choosing colors to fill those greyscale areas of your wireframe, make sure the relative luminosity of these colors is similar. This way, applying colors to your wireframe won’t reduce the overall contrast of your design. Take a look at the figure below, borrowed from Veerle’s blog (with permission!). Compare the contrast of figure 4 with that of figure 6. If you’re like me, your designs look closer to 6 than they do to 4. Don’t be like me!

Put on your hard hats

I won’t go into all of the details about how to add color to your stylesheets, as the majority of the work here is just done using elementary CSS. What I will do, however, is provide you with a couple of tips to use when adding color to your stylesheets.

Set Colors in Pairs

If you’re applying significantly dark or light colors to the foreground or background of your site, make sure that you’re setting the the “other” color to the opposite. In other words, if your background is black, make sure your text color is white. Setting these values in pairs ensures that your users won’t end up with grey text on a grey background. See the code below:
```
    
      body, html{
        color: white;
        background: black;
      }    
    
```

Apply color with pseudo-selectors

Don’t just limit your styles to the elements that appear on the page. Using pseudo-selectors, you can provide a level of interactivity to your web page.

    
      /* unvisited links will appear blue */
      a { color: blue; }

      /* visited links will appear purple */
      a:visited { color: purple; } 

      /* when link is clicked, links will turn red */
      a:active { color: red; }

      /* when a mouse hovers over the link, it will take on the color of the copy it sits inside. */
      a:hover { color: inherit; } 

      /* when a mouse hovers over a list item, all internal links will turn red. */
      ul li:hover a{
        color: red;
      }

Consider alpha gradients

Alpha gradients are a great tool for adding a little flair to your designs. When optimizing UX Booth, we did a number of things to reduce the amount of transparent pngs that are loaded; one of which was creating a sprite of our gradient transparencies. I detail how to use sprites in my tutorial on reducing your page weight. Here’s the long and short of it: Create a sprite that has gradients at large-ish intervals. I use 128px. Then, when you have a header or a a button you’d like to apply a gradient to, simply set the background to your gradient-sprite png. IT allows you to increase the range of colors on your site very quickly. Moreover, if you ever want to change the color of elements on your website, you simply change the background color, not the graphic itself.

Using a gradient-sprite similar to the on the left enables you to add a range of colors to any element.
Color Icons with transparent gifs/pngs

Most designs make use of icons to help communicate the destinations behind links and the actions behind buttons. To allow for ultimate color freedom, consider using a “masked” icon set. These icons are merely blocks of white or black that form an overlay on top of a color of your choice. This way, if you decide that all of the icons on your site should be themed red one day and blue the next, you only have to change one hexadecimal number in your stylesheet. Two such examples are Dan Cederholm’s Chameleon Icons, and Some Random Dude’s Tiny Icons.

Additional Considerations

Before I let you go, however, I wanted to give you just a couple more tips and tricks to use when coloring your experiences.

Color Blindness

Keep in mind that not everyone can see your color schemes. Color blindness affects about 8% of males, but only about 0.4% of females. The most common type of color blindness is red-green color blindness. For more information, see the color blindness article on wikipedia.org.

Color blindness presents an accessibility issue, also; documented by the w3c. The W3C explicitly recommends: “Ensure that all information conveyed with color is also available without color, for example from context or markup.” To do this, you simply practice good web design: communicating via other means such as markup, styles, and iconography.

Consider using a separate color-stylesheet

Have you considered defining all of your colors in a separate style sheet altogether? This makes it exceptionally easy to change the color scheme of your website. Checkout this great article by Aaron Gustafson to see how to make your site provide progressive enhancement. The best part about using a color-only stylesheet is that it’s super simple to theme your site. Moreover, creating a makeshift print stylesheet is as simple as removing the color stylesheet from your site. It’s a good start towards a more accessible and modular style system

Swapping color schemes via jQuery

By taking the above one step further, you can use Javascript to swap out the color schemes on your site. Not only is this fun, it gives your users the ability to personalize their experience. This tutorial on nettuts describes how to implement a simple styleswitcher with ajax and php, but your implementation could be much simpler.

Implementation aside, providing your users with options by which they may customize their experience can make for a much more enjyable experience, provided that your target audience appreciates this option and that the provided color schemes have appropriate amounts of contrast.

Final Thoughts

That’s it! Wow, we sure covered a lot of information. Hopefully, now that you’ve read the series, you have a better idea about how to approach color schemes on the sites you design in the future. If there are any tips or tricks that I omitted, or if you have a unique way of picking color schemes for your sites, I wanna hear them! Leave a comment and share the wealth.

Resources