Presidential Design

by Jin, 09-02-08 // 12 comments

The October ’08 issue of Print magazine I received this week has dedicated a section on past and present politic-related design. The timing is appropriate, since we’re only months away from the election. I enjoyed the fake news graphics on the Daily Show and the Colbert Report. As much as I admit being a fan of both shows, I fully acknowledge them as great satires than valid news sources.

One page of the current issue caught my eye. It was Andrei Micheal Herasimchuk’s article on Barack Obama’s website. A habit I’ve developed over the years when it comes to reading a site review is, I skip the review and go straight to the site then I finish reading the review article afterwards. This way my own opinion won’t be influenced. (You should do the same! Go there, I’ll wait.)

Barack Obama Site

Visual

At first glance, I was impressed by how up-to-date the site looks. I don’t remember when was the last time I had that opinion about a political/government site. The design is very clean and streamlined. What impressed me more is the way the site has incorporated many of the commonly used modern design elements just enough to not look overly done. I see gradients, glows, drop shadows, glossy buttons and yet it’s not the typical “web2.0″ look.

Blue is the dominant color used on the site. It is an obvious choice since blue is associated with the Democratic Party, and used through all the campaign. Typically, when using one single color, especially a darker one on both the content and the background, it can cause the site to be overwhelming and lose focus of the content. Obama’s site design team has done a great job of using gradients to divide the blue to various shades, and combined with the glow effect it creates a soft, calm and soothing feeling. Gradients in this case also work well as section dividers.

Speaking from experience, when designing a typical government site, the color palette is somewhat limited to red, white and blue, aka the patriotic palette. This is not a bad constraint, since these colors do work nicely together when used with balance. Blue and red are loud colors, both should not be used dominantly at the same time, otherwise you may end up with a barber’s pole. Red is used as an accent color, on appropriate action items such as the “Donate Now” and “Help Now” button. They stand out for their importance, and yet do not clash with the overall color scheme. An off white is used for main content background and top navigation.

On a less subtle note, the consistency of the site is well planned and executed. Consistency as in typography, iconography, margin and padding. The icons are very Apple-like, even though they vary in size and functionality, you can easily tell they were designed with the site as a whole in mind. The amount of work put in the Issues header graphics alone is impressive.

Headers

Lastly, the stock photos. The low angle shot of both Obama and Biden convey the presidential look very well. Biden, being digitally added in the photo blends in seamlessly. The placement of his photo is very appropriate of a running mate to his front runner. The graphic designer did a very good job of tone mapping the two portraits as one.

Layout

Obama’s site sports a top navigation followed by two column layout for content. This is a good layout for a site with huge amount of content and the need for large horizontal real estate, often seen on news/blog sites. It’s a very versatile layout design, for accommodating new headline items and extending content/sidebar items vertically.

The sections are visually divided by using contrast in background colors, without explicitly using lines. The consistent margin and padding between content sections and text further creates a sense of airiness. Now, I may be over analyzing a bit too far, admittedly at this point I’m liking this site very much. I believe the reason this homepage layout is pleasing on my eyes is the usage of the golden ratio, whether the designer intended it or not.

Golden Ratio

Technology

Similar to the layout design, Obama’s site makes heavy use of video streaming of a news site. Also to stay on top of the trend, “Blog” is one of main sections, featuring open commenting and rss feed. The campaign team clearly knows how to take advantage of the latest social networking technology to appeal to the masses, especially those who are internet savvy. I think this is the first time a presidential candidate has his own page on twitter, myspace, facebook, flickr, and many other sites I haven’t even heard of. What is an Eons?

Usability

A pretty skin alone doesn’t make a site. The success of a site is ultimately measured by it how well it serves its purpose. At this point I detach myself as a web designer, but as one of the targeted audiences the site is aimed for. Well, I’d assume a site like this is aimed for everyone out there, whether you’re a partisan or unaffiliated, conservative or liberal, young or old, tech savvy or otherwise. Its purpose is to best present Obama as a candidate, his beliefs, his policies; to gain support from peoples’ votes and financial support. I gave myself three simple tasks: 1) find out Obama’s background, 2) find out Obama’s policy on the economy, 3) if I like what i see, where can I sign up for support.

The top navigation is very self-explanatory, I was able to find “Meet Barack Obama” link under “Learn” tab effortlessly. The “Issues” tab lists all the topics, including “Economy.” The issues pages have a similar break down: “At a Glance,” “The Problem,” and “Barack Obama’s Plan.” Each section is then broken down to bulleted items. This makes reading very easy, without being overwhelmed by huge wall of text. The red donation button is on every page, fixed on the upper right. A volunteer sign up form is implemented for each State.

Conclusion

What impresses me the most about Obama’s site isn’t a specific gradient, button, color, or even the layout. It’s the whole package. All these design elements serve one purpose and one purpose alone: branding. The site design reflects the Obama’s campaign messages so vividly: change and freshness. It exudes confidence, that this candidate “gets it,” especially with tech savvy younger voters.

It’d be naive for me to say a well designed site such as this one will have too much of an impact on the election outcome. After all, a web site, like many other marketing venues is just one of many tools. Nonetheless, Obama’s campaign team clearly understands the importance of packaging their candidate, and sells him well. Going back to Herasimchuk’s article, he sums it up the best:

This campaign seems to understand something that plenty of companies still don’t grasp: Consistent—and constant—branding matters.

12 comments

also feel free to contact me on twitter or via email
Bryan Chain 09-02-08

Very nice review, and I agree his site is very up to date and definitely fits him as a candidate.

I had visited his site a few times prior to this post and thought about how nice of a site it was.

[...] 3, 2008 · No Comments My friend Jennifer sent me a link to her friend’s blog in which she discusses Barack Obama’s website DESIGN. So thanks Jennifer and behold the [...]

Lina 09-03-08

Did you compare this with John Mccain’s site? I would love to read about your ideas.

Jin 09-03-08

Lina, as matter of fact, I went to the Mccain site right after I saw Obama’s. This post was originally tended to be a site comparison, however it got too long. I’ll save that for part 2. :)

[...] de buenos trabajos en diseño para la red y es que verdaderamente el sito está bien hecho. En este artículo realizan un completo análisis de la web como la gama cromática usada, la combinación perfecta de [...]

I’m guessing the golden ratio was not a mistake. The designer of this website probably knew exactly what they were doing, and did a great job of it. You’re right, web design at its finest. I wonder who made it?

Jin 09-04-08

According to this blog:

http://katzwebdesign.wordpress.com/2008/04/10/barack-obamas-web-designer/

The designer is Scott Thomas, of the design firm SimpleScott.com

[...] Read this article here [...]

Brad C 09-05-08

Great analysis Jin.

Someone posted on my blog several months ago that the site was a collaboration between Scott Thomas (who did the code) and John Slabyk who handled the design duties. Take a look at some of John’s graphics, the Obama site fits his style. http://www.celsiusdesign.net/humanot/

Jin 09-05-08

Thanks for the link Brad. I can definitely see the similar style.

Brian Yerkes 09-11-08

Hey Jin,

The links for twitter, myspace etc on Obama’s site shows a lot about how knowledgeable his tech team are. nice post!

[...] composición basada en φ, usada más comúnmente en pintura y fotografía. En otro ejemplo, un análisis de 8164 muestra el empleo de la proporción áurea en el diseño del sitio web de unos de los candidatos a [...]