The site’s aesthetic is so appropriate; clean, with modern lines and colors (lots of white and gray!) supported by elegant, historical touches.

We’re not seeing any Gotham (Obama’s signature typeface during his campaign), but they’ve stuck with faces from the Hoefler & Frere-Jones foundry with an elegant use of Hoefler Text and Whitney for image-based typography. Georgia and Lucida Sans are used for web text. I’ll miss seeing Gotham around, but still give a big thumbs-up!

Where I think the site really shines (design-wise) is in some of the elegant details. Here are my top three:

1. I LOVE how the “Great Seal of the United States “ is used with some subtle gray flourishes and a red double rule that gradates toward the center above the functional footer. Lovely!

2. The subtle hints of crown molding that speak to the architecture of the white house are so creative (upper right and left corners). What a killer touch.

3. The attention to detail on the typography is excellent. My favorite application of it is on the main navigation. I wouldn’t have thought to do a pairing of upper case and all lower italics like this for navigation. (love the use of red for the drop downs, too)

So what do you think about the design? Developers, how does the code stack up? ( I noticed Jeffery Zeldman tweeted that the markup is nonsemantic ) What are your favorite things about the site aside from the design?

Related Posts:

Two web campaigns of Fury

Moving Image from Patrick Moberg

The key word here is constant. Anyone at anytime could go to a candidates website and learn their views on the issues and how they plan to deal with them. They were taking advantage of higher bandwidths to show video and audio clips of rallies, speeches and even supporters’ home videos.

They were also taking full advantage of the e-commerce aspects of the web by not only offering sections to donate to the campaigns but also pages to buy t-shirts, buttons, coffee mugs and signs. The Obama-Biden site even has selected products for sale directly on the home page.

A major difference in their e-commerce sections was the user experience. Once in the McCain-Palin store each section takes you to a different looking third party e-com site that doesn’t even attempt to carry over any design or feel from the home site. This is in stark contrast to the Obama-Biden store experience that was fluid and consistent with no disconnect as the store carries every aspect of the design into their e-commerce interface.

Obama’s Store Page               Mccain’s Store Page

E-commerce was going to be an obvious method employed by both campaigns but there is a lot more the web has to offer. Both campaigns tried their hand at social networking, creating sites for supporters (and non-supporters) to join, interact, discuss, share and create efforts locally to debate, raise funds and raise awareness.

The McCain-Palin ticket actually took two cracks at it, the first attempt being highly scrutinized.  Adam Ostrow, writer for Mashable, an online publication, wrote, “The first version of the site, which launched early this year, is virtually impossible to use and appearing largely abandoned, which it was.”

When referring to the second attempt he wrote, “The new site is extremely easy to use, and includes a lot of social networking best practices like allowing users to sort videos by most viewed, highest rated, and most recent.” I personally went on the McCain-Palin social networking site community.mccainspace.com (since taken down) when it first came up and the first thing I noticed was the drop down menu went behind the Flash content rendering it useless. This was an issue isolated to the home page but it was like this for over a week.

However, overall this was a monumental improvement from the first attempt. This new site was done in KickApps, a white-label social networking site which has been a valuable partner to us here at eROI, and their platform supported a multitude of ways for McCain-Palin supporters to discuss topics and issues. They also took full advantage of the group capabilities of KickApps to form specific smaller communities within the the whole community. An example was a group dedicated to Hillary supporters that were now supporting McCain.

On the other hand the Obama-Biden Social Networking site My.BarackObama.com has been a success from the start even offering a simple, cohesive instructional video clearly laying out how to start an account and use your dashboard. Their attempt was clearly driven to get people in local communities to come together and spread the word through grass-roots efforts including organizing door-to-door campaigns.

Although missing some of the bells and whistles of the McCain-Palin Social site (KickApps’ widget features in particular) the Obama-Biden Social site was easy to use and powerful in its ability to bring people together to collaborate and organize.

Both campaign home pages are similar in layout and design with Obama’s looking more polished with time spent on detail and McCain’s looking more like an ad-driven template site. Both offer an “En Español” link to serve the site in Spanish which will be expanded to even more languages in the next election. Both had very similar content links and pages.

Obama’s Home Page               McCain’s Home Page

Both had a link to the issues with Obama having twenty-five issues to McCain’s nineteen to discuss. However McCain has three seperate blogs to Obamas one. Interestingly though, Obama has decided to not only have a page dedicated to the blog but also have the latest feeds right on the home page creating a somewhat long scrolling page.

In the end I would argue that Obama’s campaign has the edge through consistency and design while McCain’s web campaign seemed to be in a constant state of playing catch-up. Although willing to adapt and constantly work hard to have a stronger web presence the McCain web efforts were no match for a better funded, better thought out Obama-Biden web campaign.

Very moving, inspiring and beautiful!