A couple weeks ago, I gathered my coworkers in the big conference room for a design critique. Instead of reviewing one of our own projects, however, I put up the websites for each of the current candidates for president. The process was fun, but also illuminating. It quickly became clear that in addition to overall aesthetics, political design carries its own set of considerations.

After reviewing presidential candidate websites for a few hours, the thing that most surprised me is how overwhelmingly similar they are. Once you get past the initial impression of colors and fonts, you notice the underlying commonalities. Apparently if you want to build a campaign website, here’s how you do it:

1. Create a new site with a dark blue background.
2. Place the candidates’ logo at the top left, with a row of white navigation links on a blue background running under.
3. Add a large red “Donate” button at the top right, and a few social media links that don’t match the design of the site.
4. Below the navigation, add a rotating gallery of inspiring photos of the candidate with a slogan targeting the district you’re currently campaigning in.
5. Below the gallery, display a list of the most recent news articles and videos, and perhaps the candidate’s twitter feed in a sidebar.
6. Repeat the candidate’s logo in the footer, probably on a soft background of stars or flag stripes.

Newt Gingrich

View full-size image, or View site

When I reviewed the site, one of the banners was an oddly unlabeled photo of Newt with Rick Perry, Herman Cain, and Chuck Norris! Turns out this is his “Conservative Dream Team.” The photo is nice and heroic, but I found it odd that the design team didn’t think it needed a label explaining what it was.

Newt’s logo is the most boring of all the candidates, and due to the swooshy lines, it looks oddly positioned in the header. The navigation is an uninspired vertical gradient, and the list of links to the right of the gallery are weirdly large. A coworker joked that perhaps his target audience has failing eyesight.

Another odd choice is to dedicate a huge portion of space in the sidebar to his wife’s blog. It bears alliterative title “Callista’s Canvas,” and a prominent photo of her. None of the other candidates feature their wives in this way (barring Obama, but that is a rotating promotion of an event with the first lady, so I’m not counting it). I assume this is an attempt to emphasize the idea that Newt and his wife are a team, given the controversy around his previous marriages. Ignoring any benefit that may provide, it’s a poor use of valuable front-page real estate that probably should have been devoted to social media and other promotions.

Of all the candidates, Newt’s site places the least emphasis on social media, providing only a few small icons at the bottom of the side navigation. Given the dramatic role that community involvement played in Obama’s election, this is certainly surprising, and I would be very curious to hear the reason why his design team chose to de-emphasis it so much.

It’s a decent site overall. If a student submitted this design to me for grading, I would have some pointed questions to ask about the reasoning behind the lack of social media and emphasis on Calista. Unless the student had some very good answers, I would grade this a C.

Ron Paul

View full-size image, or View site

What immediately struck me about Ron Paul’s site was the white background. All the other republican candidates used a dark blue page background, and even Obama uses light gray. Paul’s choice of white gives his site a more formal and professional vibe, more like a newpaper. This is also the only site to include a permanent photo of the candidate in the header. And even when compared to the other candidates photos from their rotating galleries, Paul’s header photo is not smiling or confident-looking. Instead, he’s slightly frowning, and looks determined. Perhaps I’m reading into this due to his standing among the other candidates, but the photo seems to say “I’m not giving up.”

Paul’s logo is centered, with the slogan underneath, reinforcing the newspaper feel. Under the rotating gallery, the site is divided into three columns: two for news posts and one for videos. Capping each column is a nicely designed label. The left-hand column appears to be dedicated to a single author, labeled “Paulitical Ticker with Jack Hunter,” complete with a tiny author photo. It’s really hard to escape the newspaper vibe here. I can’t tell if that’s intentional, or if they just hired a designer whose background is in news media. For contrast, compare the New York Times website to any of the candidate websites.

The site is nicely designed, and well polished, with well-thought out details like the news post bylines and dropshadows in the video column. However, a few odd layout choices stick out for me. First, Paul’s photo in the header floats about 10 pixels above the navigation for no apparent reason. It’s properly aligned at the top of the page, but it looks sloppy, like someone forgot to turn off the bottom margin. Second, the bottom half of the page has a map widget and an events feed in the sidebar, which are vertically aligned with each other. It looks nice, but leaves a large gap in the sidebar between the last video and the events feed. I see where the designer was going with it, but the effect on the live site is jarring. Either another video should have been added, or the sidebar gap should have been closed.

Still, I’m picking nits. This is a very well-designed site with a lot of polish and a professional feel. The only problem is that the design implies the wrong profession: news site rather than political information site. If a student submitted this design to me for grading, I would give it a B for being technically proficient, but ultimately missing the point of the assignment.

Rick Santorum

View full-size image, or View site

Before I start this review, I should note that Santorum’s team rolled out a new design just a week or two ago. The previous site was a horrible abomination which you can still see on archive.org. With its failed attempt at a fluid layout that collapsed badly on small screens and left your eye confused where it should look next, the old site was just begging to be critically eviscerated.

So it pains me to admit that Santorum’s new site is not bad. The muted blue and hot pink color scheme, while not a huge departure from the traditional red, white and blue, are an absolutely shocking choice for a politician, and I’m amazed that it works as well as it does. The designers have used the pink as a fantastic accent color, mixing it with the blue to make a very attractive purple gradient on some of the gallery photos.

Santorum places the most emphasis on social media, dedicating the bottom three columns on the homepage to YouTube, Facebook and Twitter. It’s good to see a candidate acknowledge how important social networking is, though his comically low Facebook numbers are a bit embarrassing (it currently shows 147 thousand likes, compared to 25 million for Obama, 1.4 million for Romney, 867 thousand for Paul, and 284 thousand for Gingrich).

The only problem with the page is that the news feed is a complete eyesore. Leaving the headlines in a serif typeface, while probably intentional, sticks out like a sore thumb compared to the nice typography on the rest of the page, and looks like a mistake. Worse, many of the headlines are in all-caps, and the line-height is too tight, so it looks like the news feed has been crammed into a space it wasn’t designed for. This was reinforced when I reviewed the site because the current set of headlines was actually overflowing their box and disappearing behind the videos. Combine all that with an RSS and “More News” link that don’t match the style, and have text flowing on top of them, and it looks amateurish. It’s a real shame, given how nicely done the rest of the page is.

Overall, I still think this is a good design, especially when contrasted with the previous attempt. The non-traditional color scheme and typography are especially appealing — clearly lifting inspiration from the excellent design of Obama’s 2008 campaign while making it Santorum’s own. If a student submitted this design to me for grading, I would give it a B with a note that some further polishing of the news and social media areas could bump it up to an A.

Mitt Romney

View full-size image, or View site

At first glance, this is a really nice site. Romney has one of the nicest logos of all the candidates, and it’s used to nice effect in the minimal header, alongside the large, easy-to-read navigation. The Facebook and Twitter widgets are prominent and easy to find, but not distracting, and the gallery is one of the most polished, with nice pop-out navigation buttons when you mouse over the images. Still, upon closer examination, I found a stack of gripes with this design. It’s a classic example of a good design with poor attention to detail.

First, above the gallery is a campaign slogan. It’s clearly important, or it wouldn’t have been given the most prominent screen real estate. The slogan is broken over two lines, and for some reason the bottom line is bold, but the top line isn’t. Combine this with the red star placed on each line, and it looks like two bullet points, instead of one phrase.

Below the gallery are a series of four promo elements, nicely designed with a shaded border and consistent red call to action on each. They’re attractive enough, but completely ruined by overly aggressive JPG compression. Given these images’ small size and prominence on the homepage, it’s baffling that they’ve been compressed to such a degree.

Below that are a series of featured items — blogs, videos, new, etc. Each has a title banner, which has been designed to look like it punches through the page to reveal the background, with a nice drop-shadow and icon. Unfortunately, the icons are weirdly blurry and seem to be stretched horizontally. The shadow also bugs me, because it creates a psuedo-3D effect where the white “page” is floating over the textured page background — but the page itself doesn’t have a shadow, just the punched-out titles. This results in a visual dissonance that makes an otherwise attractive element look slapped together.

I will give full credit to Romney’s team for nicely integrating social media. In addition to the links in the header, and the three promos at the bottom of the page, they’ve also added social sharing icons at the bottom of each blog and video.

All in all, this is an attractive design, but the poor execution and design flaws scattered throughout add up to an unsatisfying site. If a student submitted this site to me for grading, I would give it a B- and encourage them to improve their execution.

Barack Obama

View full-size image, or View site

Given the fantastic attention to design during his 2008 campaign, I came to Obama’s site with high expectations, and I was not disappointed. There’s a lot to love here, from a responsive design to meticulously designed page elements.

Perhaps best of all, though, I’m happy to see that Obama’s team isn’t resting on their laurels. The color palette has been softened since the first campaign, tending towards pastel blues contrasted with strong reds. Also interesting is that they’ve abandoned the distinctive typeface they used before (Gotham) for a new serif face. (Apparently, it’s a custom designed Gotham Serif designed by Hoefler & Frere-Jones for the campaign.)

The page design is full of nice touches. The gallery at the top has been replaced by a series of smaller promos, arranged nicely in the same space the gallery would have used. Below is a series of rotating banners listing campaign promises that Obama accomplished, under the headline “Keeping his word.” I assume this is addressing the common complaint that Obama has failed to live up to expectations. Using a small amount of high-priority real estate to address these concerns is clever, though it reminds me of Gingrich dropping his wife’s blog in his sidebar. This seems less jarring to me, perhaps simply because this keeps the focus on the candidate, while Gingrich’s site shifts the emphasis to his wife.

The newsfeed and sidebar widgets all share a common titlebar style, with an understated bold headline and a simple arrow. This combines with plenty of padding to create a layout that doesn’t feel cramped. The newsfeed headlines and bylines are nicely set, and the copy itself includes a reasonable amount of leading. Attention to detail is evident in things like the blockquote style, borders on images, and the custom-designed social sharing links at the bottom of each post.

Continuing the first campaign’s emphasis on community involvement and volunteering, the top two sidebar widgets are dedicated to getting people involved, with large red calls to action and custom designed icons.

Perhaps best of all is the custom twitter widget. The other candidates who included a twitter feed used the default unstyled Twitter widget. Obama’s team took the time to style and tweak theirs, and the attention to detail is evident again in the inclusion of a retweet icon at the bottom of each tweet — a feature the native widget doesn’t provide.

For web developers like myself, the most impressive feature of the site has to be that it’s a responsive design. You can see this by changing the width of your browser window. As the window narrows, the design flexes to accomodate, first by decreasing padding and margins, and then by altering layout down to two columns and then one. It’s well-done, and a detail unlikely to be appreciated until you load the site on your mobile device. Obama’s team is the only one to do this, and while I don’t think that should count too heavily against the other candidates since this is a relatively new technique, it is a very nice feature.

As before, Obama’s team has set the gold standard for other campaigns to aspire to, and all this before he’s really had to enter the race. It’ll be interesting to see how this site improves once the campaign gets into full gear. If a student were to submit this design to me for grading, I would give it an A+, use it as an example for the other students of how attention to detail matters, and add the designer to my short list of students to hire for my own design firm.

PS — Extra credit to the Obama team for including an ASCII logo in an HTML comment. Nice touch for anyone viewing source.

Takeaways

First lesson: Candidates want donations, volunteers, and people talking about them on social media channels (perhaps not in that exact order). Any candidate site that doesn’t emphasize these three aspects of a modern political campaign will seem incomplete.

Second lesson: As with any site design, content strategy matters. Consider the value of the real estate you are dedicating to a feature, especially on the home page, and ask yourself: Is this the most important thing I can communicate to our visitors in this space? If not, remove it or replace it with something more on-target.

Third lesson: Attention to detail matters. Having a really hot set of comps doesn’t matter if the images on your site are so compressed they look bad. Designing a nice set of icons doesn’t matter if the images on your site are blurry and stretched out of proportion. Using default fonts and default social widgets looks sloppy. Consider taking the time to make them match your design asthetic.