No matter where your political allegiances are, it is hard to not respect the kind of campaign Barack Obama ran.
Obama’s campaign embraced the Internet more than any other candidate since Howard Dean. Except, you know, Obama won. What Obama did better than any before him was to utilize a team of designers that polished his brand on the Web, in print, and on “hope” posters all over the country. Below are some trends I noticed used in his time as a candidate and president elect, with notes on how it can help the average designer.
Gotham Font
Usually when you see a political rally on television, the members of the audience are waving signs, flags, and anything else they can get their hands on to show their support for their candidate. In most cases, the signs are a mix and match of different groups, slogans, and interests.
Most rallies feature a mix of fonts and colors on signs
For Obama, the crowd was frighteningly uniform in it’s signage that utilized the light blues he came to be known for and the Gotham Black font.
This was a common sight at Obama rallies. Yeah Gotham!
But the font crossed over from political signs. It was used on those now infamous “hope” posters, and it is heavily used in Obama’s web presence as well. The font has become so synonymous with the president elect that I showed a friend a site design I was working on, and she immediately recognized Gotham as Obama’s font of choice.
This was the main image on Obama. See the Gotham?
Originally created for GQ by Jonathan Hoefler and Tobias Frere-Jones, the Gotham font was meant to be masculine and fresh, which aren’t bad adjectives for a political campaign. If you are interested, the makers of Helvetica interviewed the creators about their thought process when setting the typeface. But what regular designers can learn from Obama is not only his font selection, but the discipline to create a design and stick to it, much like good politicians stay on message.
If you’d like the font, you’re going to have to pony up $70. A small fee for all you future presidents.
Colors
One of Obama’s goals was to make the electoral map a bluer shade, a color that Obama utilized quite nicely in his materials. There was the occasional red sign used for contrast, but throughout all of his materials Obama stuck to a collection of blues. I rooted through the CSS file of his site, and found the colors below. If you use Photoshop, I made a color swatch for your designing pleasure. Keep in mind that if you have the “Use Web-Safe colors” option checked it may slightly alter their shade.
These colors were not only used in his Internet marketing, but in posters, campaign signs and buttons. Obama even used the colors for his presidential seal.
As you can see, there was a mix of softer blues for the gentler messages and signs, and the darker colors to increase the impact on harder hitting messages.
The Big O
The Obama brand, just like any other, relied heavily on an easily recognizable logo. The ubiquitous “O” uses the colors mentioned above and is both the first letter of Obama’s last name and a 4-color picture of a rising (or setting) sun over an American farm.
So what are designers to learn? Well besides from having the right mix of clean design and subliminal messaging, the logo was one of the few Obama campaign materials to be customized to fit the situation. On the official campaign Web site, Obama offered several version of the logo based on different interest groups:
This curtailed the use of custom signs, yet allowed each group to express their support. A sort of keeping everyone on the same page no matter what their individual interests are, and at the same time controlling the message. Because these logos were offered on the campaign Web site, they could even keep statistics on what groups were more active.
If you think to other corporate identities, there are often many variations of the same logo. Nike logos are often seen in different colors, Pepsi switches theirs from time to time, and Google loves to doodle on theirs.
Obama as messiah
Obama’s image was tightly controlled on all fronts. When rumors started to spread about his religion and heritage, the campaign immediately spring into action with a “Fight the Smears” Web site. The same degree of control was used in any photographs / posters of the candidate.
In most of the official campaign imagery, he is seen looking upward with a heavenly glow that suggests not only will he be a good president, he may rise from the dead on the third day. It is not often he looks directly at the camera, which may be perceived as threatening. The one exception may have been in his TV advertisements when directly spoke to the camera as if he was in a conversation with the viewer. This stylistic choice may have added to the criticisms of elitism and aloofness, but mostly it made him appear as a larger-than-life figure capable of great things. And to someone who was criticized on their lack of experience, this undoubtedly proved an asset.
The Quote
On the top of each of his Web sites, Obama places the name to left and a quote to the right.
The quote allows the reader to not only know what the Web site is about, but to get the stance of Obama as well. This tactic of banner / slogan may be nothing new, but it cultivates the brand of Obama to get a message directly from the candidate. The quote gives the reader the illusion that Obama is directly involved with everything you are reading and makes it appear less like the efforts of a monolithic campaign machine and more like his personal blog.
The Glow
Obama may just be our first president who doesn’t need electricity at The White House. All of his sites place a glowing effect around the container, and images of him are often given that subtle warm aura. The advantages are similar to the tactic of never having Obama look directly in the camera. It softens his image and make him appear larger than life.
This technique is done by making a background image that outlines the container. The one used for change.gov, for example, is below:
His slogan “Change” never changed.
McCain often switched between “Country First” “Maverick” and a few other slogans, but Obama never budged from his “Change” message. McCain even did some generous slogan borrowing at one point. But, much like the strict adherence to Gotham, the message was always the same.
In the design/media world, the lesson may be that continually doing overhauls to your Web site or logo may water down your brand. Do a little more work up front to ensure that you stay on message. After all, when someone reads your Web site they are putting stock in what you have to say, and casting a “vote” for you with their time.
