Click to Run
[An update to this article is appended below. -Ed.]
Every time I go to the SXSW festival, I have interesting discussions with the other designers there about trends in music, movies, and technology. Last March, though, we started talking about politics, something I’ve rarely touched on with fellow designers. How did we get onto that subject? Because of Barack Obama’s website. It had just been overhauled during the early months of the 2008 Democratic primary, and when it went live, designers everywhere were in raptures.
Why? Because it is so damned gorgeous.
It’s the kind of site that, once you’ve worked your way through every single drop shadow, gradient, icon, or title slug, makes you wish you had designed it yourself. The deeper you go, the more you realize just how much the barackobama.com team—which includes new media director Joe Rospars, who worked on Howard Dean’s campaign, and whose design and tech firm, Blue State Digital, Obama retained to build the site, and Facebook co-founder Chris Hughes—gets this whole online thing. There are the beautifully simple forms for donations; features to let you create your own Obama blog, complete with design and hosting; stats, data, and policy position papers that are exquisitely rendered and easily navigable. For politicians and the designers who work for them, it’s a living lesson in how to make a successful campaign website. And as such, it is worth reviewing the main points in that lesson.
The very first should be good news for designers looking to expand their market reach: Pay attention to aesthetics. It may seem like a no-brainer, but it’s something that most campaigns have failed to do. Markos Moulitsas, who runs the Daily Kos, one of the most popular political blogs out there, understands that this is a problem. “Design is obviously important,” he says. A politician’s website “is a marble lobby to who they are as a person. They need to spend money on it.” As Moulitsas points out, aesthetic considerations need to include good photography. “Hire a professional photographer!” he says. “A politician needs to connect with people, and really good photography humanizes them.”
Again, the Obama camp obviously understands this, as evidenced by the well-lit, black-and-white photo of a relaxed Obama that greets visitors to the candidate’s site. Practically everywhere you turn on the site, you can find Obama looking presidential. The team behind McCain’s website, on the other hand, didn’t seem to comprehend the importance of good photog-raphy at first. On the same day in June when I talked to Moulitsas (a vocal progressive), he was taking McCain’s web team to task for using an unflattering picture of the Republican nominee. “I opened the photo in Photoshop, took the eyedropper tool, and sampled the color of his teeth. They were clearly yellow! I’m not a design guy, and even I know how to figure that out.” Since then, the McCain web team seems to have embraced the use of photos that are decidedly more flattering.
Branding is another area where the Obama site shines. This campaign seems to understand something that plenty of companies still don’t grasp: Consistent—and constant—branding matters. On the very same day that Obama announced his energy initiatives, for instance, his website launched a whole new energy section, including a variation on the Obama logo that turned the flag into a grassy hill and changed the O into the sun.
With its “BarackTV” section and video players integrated directly with the rest of the content, the Obama site also reminds us that online video has arrived as a critical component of campaigns. As we have all seen this election season, web video now plays a crucial role in the political game. The reason, says Moulitsas, is that it’s one thing to write about politics, but writing is open to mistakes and misinterpretation. “A video changes everything,” he says. “It makes it real. It validates what happened and provides context as well.”
It’s amazing to think that we could even be talking about the impact of online video on campaigns, when only four years ago commentators were just getting excited about Howard Dean’s use of the Meetup.com model. Dean’s campaign certainly deserves credit for bringing political campaigning online, and especially for proving that it’s possible to raise substantial amounts of money via individual online contributors. But an entire high-tech lifetime has elapsed since 2004. We’ve seen the rise of the Web 2.0 aesthetic, Ajax as an accepted means of enriching interactions, and the practice of mashing up many different web services to extend one’s product offering.
It is this leap forward, above all, that the Obama team has truly mastered, to the point where they have taken to translating each new message into different types of online features. On any visit to the site, you can see Obama’s latest talking point delivered either as a simple form to contribute, as a video to be inspired by, or even as a request to volunteer for some important event. Obama’s web team may be the first group of people to so entirely “grok” the many facets of the web and how to use them, that the site itself can reasonably be considered among the first websites of any kind that live up to the promise of all that the latest internet technologies have to offer.
Regardless of the shape the American political landscape ultimately takes, one thing is certain for web designers practicing their craft: The way has now been shown to you by the team at barackobama.com. It’s all there, laid out in glorious detail, waiting for you to check out its source code, study its construction, and learn from its complete integration of everything the web has to offer. There’s no going back now.
UPDATE: November 10, 2008: What do you do after running one of the best digital political campaigns created in our lifetime? We’re about to find out with Barack Obama’s digital team’s new web site. Dedicated to the transfer of power from George W. Bush’s administration to Obama’s, Change.gov largely follows the team’s own recent formula for success on the web: simple navigational menus, solid grid layout, and a clean photographic style. And yet it’s also more somber in tone, with deeper blues and reds, along with more biographical information about Obama, Joe Biden, and their wives, Michelle Obama and Jill Biden.
After watching Obama’s first press conference, where the president-elect got down to business, it appears the purpose of Change.gov is to do the same. The tone may have changed, but the new site aims to bring structure to the process of the transition period, just as the original site, barackobama.com, helped organize the campaign.
The current content available on the site is sparse at the moment, consisting mostly of news clippings and summaries about the transition team’s current efforts. A few documents and videos have been uploaded, as well as a link to the GSA Transition Directory, but for now, we’ll just have to take a wait and see approach with the site, and watch for any new (or revamped—whitehouse.gov, anyone?) sites that may appear in January.–AMH