Campaign sites instructive on web design

• 21 May 2008
• Robb Shecter

I was looking at the Hillary 2008 and Obama 2008 websites and, while their content is very similar, the differences in their designs are striking. Looking at two Democratic nominee campaign sites for the 2008 election is a handy way of comparing apples to apples. I’ve clipped out two examples of key areas that highlight what I found:

Area 1: The top-right corner.

For both sites, this is the “business end” of the page. The main menu and a panel of buttons, including the request for donations, are here. But look at these two screen shots.

Hillary 2008:

Obama 2008:

Hillary’s site makes me feel taught, constrained and boxed-in. Obama’s makes me feel at-ease and relaxed.

The lines

Both pages submit themselves to the computer-imposed limitation of squares and boxes for displaying information, but the Obama page has obviously been worked on by designers with a good deal of experience in other media. The design understands white space, and eschews boxes where it can. In contrast, Hillary’s is composed of boxes within boxes within boxes. Valuable screen space is taken up by meaningless lines and superfluous text that clutter and complicate the messages.

The colors

Obama’s uses a color palette that’s harmonious, semi-saturated, and strictly adhered to. It’s so simple and tasteful, that it’s nearly a monochromatic scheme, with a complementary hue in use as only as the accent color — an excellent and classic design choice. On the other hand, Hillary’s is highly saturated, and uses many superfluous and conflicting hues: compare the conflicting red hues of CONTRIBUTE vs. HELP MAKE HISTORY.

Area 2: Top-left corner.

Both sites again use this key area of the page for the same purpose. But their differing production values lead to very different results.

Hillary 2008:

Obama 2008:

I believe the differences speak for themselves. But look at the full front page of each site, and you’ll see the total impression created by the accumulation of design choices:

http://www.hillaryclinton.com/

http://www.barackobama.com/

Filed Under

• Redesign