WordPress Theme Design Part 3: Color and Contrast

• Posted: January 24, 2008
• |
• Author: Chris Murphy
• |
• Filed under: Design, Developement, Tutorial, WordPress, WordPress Themes
• |
• Tags: Color, Color Schemes, Design, WordPress Themes

In previous articles, I have written about colour and its importance when it comes to design. Since we're discussing design as it applies to WordPress themes, I thought it appropriate to revist the topic.

Color selection can be troublesome especially when it comes to designing for yourself. WordPress themes are no exception, and the exercise itself is possibly one of the more challenging aspects of creating a new theme. When it comes to design in general, there are some basic guidelines that you can follow to make things a little easier.

In my previous article “Getting emo with color” I discussed the benefits of understanding the emotional impact of color.

…think about how certain colors can provoke a response. A combination of responses creates an experience. So when we design with color, what we’re really doing is designing an experience. So before you start mashing pixels together in your next design, ask yourself this one question: “What kind of experience do I want to create?” Source: “Getting emo with color”

When you’re designing your WordPress theme, consider what kind of experience you want your readers to have. This goes back to Part 2 of this series where I suggested asking yourself which type of blogger/writer you considered yourself. Knowing that is part of understanding how to develop an experience for your readers. If your articles are verbose then you may want to consider a color scheme that allows better readability over a longer period of time, or if you are brief, then a more flexible color scheme may be considered.

A emotional user experience

Color influences the User Experience in ways you might not immediately consider, and while color affects people in various ways, there are some generally accepted understandings:

• High-energy colors — colors that fall in the warmer part of the spectrum — tend to make readers feel restless. Certain combinations of colors can make readers feel agitated and that reflects in the amount of time they are willing to spent on a given page.
• Low-energy colors — colors which fall in the cooler part of the spectrum — tend to leave readers feeling passive. Again, this is not necessarily a good thing as you are not engaging the reader (let’s hope your content is engaging).
• Neutral colors — colors which are neither warm nor cool — make for a bland experience.

Here are some examples of color schemes to illustrate color temperature. Keep in mind that not all of these sample pallets translate well for a design, but they are a good foundation to build on.

Warm Colors:

Cool Colors:

Neutral Colors:

Note: All samples were taken from COLOURLovers.

Contrast is key

Take a look through SmashingMagazine.com’s collection of WordPress themes. What you’ll notice is that the color palettes fall equally on both sides of the spectrum (with a bare handful that are monochromatic). But what you may not immediately recognize is that each of them employs contrast to a high degree.

Contrast is a tool that works well to deliver focus add tension in a design. Developing contrast is not always as straightforward as designating a big block of white space (literally) as the content area. In order to develop a good balance between your color scheme and necessary contrast for your readers, you need to figure out a few things:

• On average, how long are your articles? The longer the article, the longer it takes for your readers to consume it. In a case like this, low contrast makes it quite difficult for a reader to maintain their attention and adds undue physiological strain.
• Is there functionality or features in your sidebar that are absolutely integral to the reading experience. I’m not only talking about ad space here, I’m also talking about search features, or a list of recent or related articles, links, etc. If the sidebar features are not integral to the reading experience, you may want to make sure they recede into the background through lower contrast.
• What is relevant in terms of content? Do you want your latest article to stand out from the rest? Consider that readers interested in your blog will be visiting through varying methods(RSS, Organic Search, Track-backs, etc.), which means you may want to ensure they get what they are looking for quickly.

Tools of the trade

In my previous article, “Getting emo with color“, I mentioned a few tools that can help you in developing color schemes. Here is a site that I personally love: COLOURLovers.

The samples generated by the community are great to experiment with and it also helps to see what others are doing as well. But be careful, these are color schemes and do not necessarily reflect a real-world application, just an aesthetic.

Fortunately, there are tools out there that can help you in terms of gauging contrast. Take a look at Jon Snook’s “Colour (color) contrast check” article. Jon provides a nifty little utility for evaluating the contrast of your color selections. The example page lists two other utilities which you can play around with as well. 456Bereastreet.com complied a list of additional utilities which are both desktop and web applications.

I can’t tell you which color schemes work best — that is for you to decide; however, I can tell you that regardless of the color scheme you end up with, it is wise to ensure that you provide contrast in the right places for the right reason. Understand your goals and design accordingly.

• (6) Comments
• Permalink
• RSS 2.0
• 
•