Archive for the ‘Design’ Category

How to design like Barack Obama: control, consistency and change.

Posted on: 8 Comments

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

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!

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's campaign site.

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.

Georgia on my mind

First the Web’s favorite font was Times New Roman.  Mostly, because nobody had a choice.  Then it was Comic Sans.  Then, Helvetica/Arial.

However, news sites especially are leading the charge into Georgia / Times New Roman fonts being the next widely adopted style.  This is most likely the result of an attempt to emulate the serif newspaper-ish feel of sites like the New York Times.  This style is especially visible in the navigation of online-only properties that are trying to inspire thoughts of a print product, and therefore, the authority of the printed word.

A few examples:

Divine Caroline:

Divine Caroline opts for Times New Roman, however it is still is the Georgia style.  Like every other site in this list, it opts for the roll-over sub navigation.  However, Divine Caroline uses the drop down effect.

The Matador Network:

BNET:

Bnet, is probably my favorite design of any news site, as seen on Twitter.

Shine:

A departure from the typical Yahoo! style.

two.one.five::

two.one.five is a Philly magazine trying to be a New York Style mag.  But damn do they know how to design.

Any others to add to the list?

Blog is the new magazine (and a list of themes)

Posted on: 8 Comments

Back in the Stone Age,  “blog” was the word of the year and old media was scrambling to add any semblance of an online entity. Then, many believed that blogs would eventually take the place of most sections of the newspaper, just as Craigslist replaced classifieds.

However, if the latest trend in WordPress templates is any indication, blogs are shifting to more magaziney layouts. A glance at several of the new themes suggests that several trends are beginning to emerge:

  1. The old format of a single column of posts (such as found on this blog) is slowly giving way to themes where multiple columns and multiple sizes are utilized.
  2. The use of categories as a design tool, where assigning a post’s category affects where it is placed on the page.
  3. What began as a “widgetization” of the sidebar is evolving into several more modular designs in the content area
  4. The heavy use of thumbnails
  5. The heavy use of custom field for theme effects

Interesting in doing the same for your blog/magazine/newspaper? Here is a list of a few themes/sites I have found:

*cough* foreshadowing *cough* ;-)

The 6 articles I used for this site’s new design

Posted on: 4 Comments

As you can see, I’ve done some winter cleaning for the site. I won’t bore anyone with the technical details, I just want to say that I tested the new design in as many browsers and setups as possible, and I hope it’s easier to navigate. A lot of the content on the static pages needs updating now, and thats next on my list.

Below are some articles, resources, and blog posts that were instrumental in this process.

Constructive criticism welcome. Destructive criticism marginally accepted.

The Unami usability test results

This Wednesday we had about 20 or people come and test the site I have been working on: unamidelaware.com.

The results were interesting, but mostly along with what I expected. As with anytime I design a Web site (or write an article, or cook a meal…) I am aware of things I wish I did but just didn’t have the time or capability to do so.

For example ,many complained over the buggy-ness of the Flash slideshow. The slideshow was a cheap tool that I purchased because I did not have the expertise to code it myself. But a quick run down of the complaints and what we are doing to change them.

  • Right rail navigation is poor, roll overs shouldn’t be a way to navigate to articles
  • There is no indication that this is a Delaware related page
  • The video player is not very inviting
  • Our “stories we wish we wrote” is the only text on home page, and it misleads users to believe that its our main content
  • We are having major IE7 problems due to the JS-Kit comment system. This is not to say that s the fault of the script, but it may not be playing nice with whatever other scripts we have going.
  • There is no real “information hierarchy” to our site. This is because 1. There is no CMS, and 2. We are only putting out one article a day.
  • People clicked on videos
  • Our learn/connect/multimedia box was confusing as it was before the article

I’m at work with some changes, but this test essentially proved to me:

  • Videos are the next big thing for news, but they have to be presented inline with the article
  • The image first mindset doesn’t exist. People want to be able to digest information quickly by skimming and text allows that
  • You need a CMS, without question
  • People still like to browse by categories, date, and topics
  • Users aren’t that impressed by links to other related Web sites
  • The cleaner, the better.

The old design (left) vs the new (right):

old.pngnew.png