
The people over at UX Booth have put together a 3 part series on color and user experience that you must go and read now! Don’t know where to begin? Here are some excerpts to help you along your way.
Color is one of the most important parts of your website. However, far too often color enters the equation as an afterthought, or worse, not all all. This isn’t adequate. Color helps define how users perceive information. To add to the complexity of this issue, most of the judgements people make about your site’s color schemes are subconscious. They may not provide any feedback about your site’s color, but they’re always thinking about it.
Perhaps you can remember a site based upon color. If I ask you to name a website that uses the color purple well, what comes to mind? Perhaps Yahoo!. Their brand is defined by a number of things: one of these is the color purple. You might ask: what does color theory have to say about purple?
In this series of articles, we will give a (more or less) comprehensive view of colors and their treatments in web design. In this first article, we explain color basics: How does color work? How does an artist use color? How does color affect our mood? In our second article, we’ll cover how the web renders color, the ways you can code color into your stylesheets, and what’s new with color in CSS3. In our third and final article, we’ll cover how you can pick and implement colors in your layout, and what “gotchas” exist in the world of color.
Coloring the online user experience has never been an easy task; but it’s getting easier. Looking back at older web pages, we can see an obvious evolution of the medium. Today’s designs follow are much more closely aligned with the tenets of good graphic design: employing well-chosen typefaces, color schemes, and baseline-grids. We have a wealth of good design motifs present. As user-experience designers we should possess a working knowledge of the limitations of a web-browser.
In this article (the second in our series), we’ll discuss how the web renders color, ways you can code color into your stylesheets, and what you can look forward to (insofar as color) in CSS3.
If you’re just joining us in this series of articles, we hope 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? You’re reading the second article; and in our third and final installment, we’ll cover how you can pick and implement colors in your layout, and what “gotchas” exist in coloring a site’s user experience.
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.