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.

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?

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:

• Visualization
• Mimbo
• Tube Guitar
• Diet Pixie
• The Premium News Theme list
• A whole list of magazine themes
• More the same list

*cough* foreshadowing *cough*

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

• Complete in Him font – used for the post-it note up top.
• A tutorial for created the aforementioned post-it note by the PhotoshopGuru’s handbook.
• Simple Bits tutorial for creating CSS based image navigation.
• Alex King’s popularity plugin was used for the sidebar.
• Eric Meyer’s guide to simple separators, also used for the sidebar.
• I also took into consideration Chris Garret’s sidebar advice.

Constructive criticism welcome. Destructive criticism marginally accepted.

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):

An example of a bad freelance site

One example is Bob Bly, author of many books on freelance writing. Books that are very useful (in fact, I owe Temple Library a few bucks for keeping them too long). Bly’s page is very 1999 with a simple left hand navigation and a very text heavy content area:

While Bly may prefer function over form, his site can inundate you with pop-ups such as a “Wait! Are you sure you want to leave this page?” such as when you exit his coaching page. He even has an “e-articles” section that takes you to an under construction message. In his books, Bly advocates an aggressive marketing strategy for selling yourself and his site does just that. However, on the Web, it is not the site owner that piques interest: it is the curiosity of the user. Trying to bombard them is just going to tick them off enough to hit the back button. Keep the user (hopefully a prospective client) so interested in what you have to say that they drill down themselves.

Bly is just one example of a lackluster Web page. There are many more. Google “freelance journalist site“. Go ahead, I’ll wait here. You will even find people who write about the Internet with sub par design and usability.

The good

One freelancer’s Web site I particularity liked was Brad Mackay. One could argue that his rollover based left hand navigation is awkward, but I found it refreshing, and very intuitive. But most importantly it stands out from all of the dull text heavy pages of most freelancers.

Another is Koren Wetmore. The page is very simple with excerpts from the articles on the main page, with a very clean navigation on the left. If you want to read her work it is visually separated from the rest of the page. If you’d like to contact, that is easily accomplished as well. Nothing is being shoved in your face, yet she is promoted and represented well.

As a rule all freelance sites should:

1. Make the writer easy to contact
2. Present themselves as a business, not an individual with a Blogger account
3. Have a home page that does not try to list all of your articles
4. Let the user decide if they want more details on you or your work
5. Support transparency and answer questions people have about your article/book/etc.
6. Stand out without compromising usability

I am not in the business of picking out people who may have site designs I find uninspiring, I wish to see journalists, especially freelancers, embrace all the Internet has to offer. I also know that this Web page isn’t exactly Cameron Moll. As an industry, we can do much better in presenting our true love. Let’s help push it forward.

Remember back when when I said I wasnt getting that Web site I hoped for?

I was only half right. To recap, me and three other interns were in charge of building a Web site. We had a grand scheme for all kind of features that basically boiled down to two catagories: Networking (user profies, comments, etc) and presentation (layout, images, etc).

We sought to build the site on some sort of Content Management System and we evaluated our options which all fell through. This when I made the aforementioned post. After licking our wounds we decided to just suck it up and do it ourselves.

From there I took designs given to me by one of the other interns and hand coded an entire news site from scratch. CMS be damned.

Thus Unami was born

What is so diferent about Unami?

Mainly the article page. Take a look below (you might have to click):

As you can see the article page allows for several layers of digesting the story. The top layer allows the reader to skim just the hed, sub hed, and the story highlights. If that interests the reader they can continue down into the article page.

The box next to the art lists all aspects of the story upfront. The multimedia is listed in bullet points so if the reader is not in the mood to read, they can cherry pick the video. There are also relevant links, because after all, this IS the internet.

The article is separated into tabs so the reader can pick and choose the part of the article they feel is the most interesting/relevant. Of course, at the bottom of each tab there is navigation so if the reader wants to read it in the traditional fashion they can. Within the article we also inked via lightbox the videos and pictures so the reader is not interrupted when they read the story (Warning: the video lightbox seems not to work on Firefox Macs…Im working on it.)

Essentially the crux of the storytelling is choice. The reader can chose what they want to read in a non-linear fashion. We try to visibly separate each aspect of the story much like a newspaper article would with sub heds within the story. We try to be very visual playing heavy on pictures and videos.

Is it perfect? No. But its a testing ground for some of the theories on young readers. Do they read long stories? Do they prefer a video to text? Do they just skim?

The Tech Side

While I have dabbled in HTML and CSS I have never done anything to this scale. I also know absolutely no javascript and only a little bit of Flash. I relied heavily on free tools such as Lightbox, Tabifier, and JS-kit comments. I can’t emphasize enough how grateful I am that these people put out their work for free. I also used the very cheap monoslideshow for the Flash rotator.

I took the easy route and did the whole site in tables. While I did have a working CSS-built article page, it rendered too differently in various browsers (Alas, my CSS skills are still a work in progress).

The worst part about the page is that I have to enter every article in by hand. I have to FTP all of the pictures and copy the URLS. It really makes you miss a WordPress or a College Publisher.

That’s it!

So, there you have it. Be sure to let me know what you think in the comments. Constructive criticism encouraged! (Sorry for all the spelling errors, I typed this in a hurry)

While I don’t exactly frequent WashingtonPost.com, I noticed that at the end of their article page they have a “people who also read this read…”

My first reaction was “Hey, what a good idea”

Then I remembered blogs have been doing the very same thing for years.

Although RW compares the functionality more than the design.

Newspaper circulation has been on the decline over the past few years, but the traffic to newspaper websites continues to rise . Interestingly, the area of newspaper websites that has experienced the most growth is blogs, perhaps proving that new media formats are beginning to usurp old media in earnest.

Andy Rutledge shut me up.

Andy compares CNN to USA Today pointing out the flaws in USA Today’s approach (that runs on Pluck – as will every other Gannett newspaper within the year).

I think we are begining to see the start of a movement for clean news design that doesn’t try to shove everything “above the fold”.   Internet users are getting smarter and a news site’s main goal should not be to present everything on the front page, but rather give they keys to the user and let him/her decide.  A good search function, tagging, easy to navigate section pages should do it.

Front pages like the NYT will be relics soon.

And by soon I mean in a few years.  I think it will take the first generation of web designers who grew up with the internet to make this change.