Gene Lu

Black & White Values
Tuesday, 18 March 2008
What is Color Value? - It's how light or dark a color is.
It was the third day of class and we had to create two 4-colored swatches. The first swatch was in grey tones and the second one had to be done in color where its values had to match up with the first swatch. What does that mean? Basically, when you scan the second swatch, import into Photoshop, and desaturate it, it should match up to the first swatch. Oooh Aaah. You can also do this by squinting your eyes when viewing any work. Hmm, sunglasses? According to Phil Warish, squinting your eyes will help reduce the amount of light from entering your vision, which in turn slightly reduces the intensity of the colors.
 
Go ahead, mock my exacto knife skills. :P
Left: Grey Swatch. Right: Swatch with matching values.
 
So using this same principle and applying it to websites, we can quickly determine the level of readability/scannability of a site. Take a snapshot of a site, import it into Photoshop (or your image editor of choice), and desaturate it. If you spot areas where elements start to visually blend due to similar color value, then consider those areas as potential hazards depending if the original intention was to create a visual hierarchy or have something pop out from the rest.
 
In the spirit of the upcoming elections, let's use the Democratic candidates' sites as examples (albeit not the best for this particular case study):
 
HillaryClinton.com
If it weren't for those white lines, the navigation would be completely lost.
What Nav?
Here's a small laundry list for Hillary to check out.

1. Main navigation blends into the top header. I'm not quite sure why such an important element such as the navigation menu receives the same color treatment as the entire top part of the page, but do take notice that "CONTRIBUTE" sticks out. Perhaps that was the original intention? ehem, no further comment.

Feature Sites - titles flowing into desc.
Title flows into desc
2. Feature Sites section needs to differentiate between title and description. Taking a quick look at the snapshot, you'll see that the title of each featured site appears to visually flow into the description below it. This could be remedied by either a) playing with the type size/weight of the title (as seen in the Spotlight section) or b) changing the saturation on either the titie or description so that the color values differ.

BarackObama.com
Although I've been a "Web2.0 look" denouncer for most of this year and the latter half of 2007, Obama's site looks half decent even with gradients, drop shadows, etc. littered throughout. Perhaps the excessive use of outer glow was intended to help give Obama a godlike/holy presence? I don't know, but who cares. On with the show. 

Taking a quick look at the black and white version of Obama's site doesn't reveal any hazardous, similar-valued areas so I'll quickly go over some good points.

1. Obama Blog section is nicely divided with a slight color value difference. I point this section out because the featured story to the left and the list of stories to the right logically belong together and isn't dramatically isolated from one other.

Obama Blog
Nice use of color value to separate Featured Story from More Stories

2. Obama's site navigation pops. The light-valued navigation bar is well contrasted from the dark-valued content that sits below it.

Obama's navigation making good use of value contrast
Obama's navigation making good use of value contrast
 

Now you know why Obama is good with the ladies.
Link List
3. The link list that sits to the right of the main story under the navigation displays strategic use of color value contrast. The differentiation between active and inactive links are also reinforced by a different font and size.

Closing Thoughts
I honestly wished I had picked different sites to use as samples, but I'll leave that up to you to pick, choose, desaturate, and analyze. It's a worthwhile technique that helps to 'proofread' a design from a scannability/readability perspective. By knocking out the color, it helps you to focus strictly on the design of how information is structured and disseminated. Word.

Further Reads
Contrast and Meaning - Andy Rutledge at AlistApart.com

Post a Note
Name:
Website:
Title:
 
Security Image

Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved.
 
Colors Made to Stick < Prev Post   Next Post > Inspiring Sites Lack Ads