If you are considering becoming a 1M/1M premium member and would like to join our mailing list to receive ongoing information, please sign up here.

Subscribe to our Feed

Designs of the Week: Blogs

Posted on Sunday, Mar 1st 2009

By guest authors Charles W. Bush and Kathy Hwang of 3Strand Innovation, a brand, design and business consultancy.

Thanks so much for your feedback last week on ways to improve the user interface design for Based on your comments, it looks as though the recurring themes are:

1) Readability/Distraction Points: Use of flash, ads, font size and color, number of pages
2) Ease of Navigation: Header tabs, tags, related posts
3) Visual Engagement: Photographs, color application, layout and alignment
4) Social Networking: Connect to other readers, most-viewed articles, help facilitate discussions

Following this train of thought, this week we’ve picked examples of blogs that have great user-interface design. And since so many people commented on advertising banners being a source of distraction, we’ve also pulled out some extra examples of well-designed advertising spaces.

This site has probably come the farthest in re-envisioning the interface of traditional blogging. Tumblr aggregates posts from different blogs and gives them a fun visual navigation through quick, mixed-media posts. The visual engagement and extreme simplicity make it an appealing fresh take on blog interaction.

Zen Habits
This blog probably has the best design of their advertising space. They leave a lot of negative space on top and the side margins, giving an immediate sense of being clean and organized. Their advertisements are neatly placed in a darker blue column, using the contrast and color to let viewers focus on the body of the content in the white sections.

Simple. Clean. Professional.  And a good use of images to draw you into each of the posts. We also like some of the social networking and knowledge sharing links he included, such as “Top Commentors,” “Find Me Online,” and “Killer Blogs.”

AI Alex
While this site may feel a bit too much like Apple Computer’s, we really enjoyed the smooth interface of scrolling between popular posts, recent posts and recent blurbs. It’s a fun interaction while saving a lot of space.


Tombot embodies minimalism. Navigation? Search menus? Who needs them? Okay, maybe some of us do. Nevertheless, this site is still a great example of how a super-clean design can make the day feel just a little more pleasant.

This site manages to feel clean, despite the many visuals and images present on the page. We especially liked how key quotes were pulled out and designed into the text, reminiscent of reading print articles from magazines or journals. Their menu topics also have a nice interactive animation to them.

New York Times – Business
This one is not a blog, but we found it to be a good example of good design of the advertising space. NYTimes uses a strong and consistent grid system, which helps the ads not distract from the content.

This segment is a part in the series : Designs of the Week

Hacker News
() Comments

Featured Videos


Nice set of blog sites. I have found to be one of the cleanest sites (though they don’t carry ads but for their thesis product) – nevertheless clean lines, good fonts and above all, the way the highlight a link – love it! Oh, they have really good content to boot!

K. Srikrishna Sunday, March 1, 2009 at 7:51 AM PT

Kathy and Charley,

The biggest problem with your design ideas is that they do not take into account the objectives of the site.

Blogs need to have ads. Ads have size specs. If you are trying to be constructive, you need to come up with ideas that capture minimalism, while also meeting the requirements of revenues, ad size specs, etc.

As it stands, you are coming up with arm waving suggestions that are very typical of consultants who have minimal experience of where the rubber meets the road.

I would like to see specific suggestions of what you would do with the site – this site – preserving its business and social objectives.

Also, don’t forget one of the hard core realities of business: there is a thing called a budget.

Sramana Mitra Sunday, March 1, 2009 at 12:08 PM PT

Just an idea, but could the ads be grouped into one place and be engulfed in a symmetrical object….say a big rectangular block which will contain only advertisements. The borders of each ads would almost touch each other….my vision is a rectangular block made of sub-blocks.

My thoughts are to re-align the ads into a structure that would look okay. The only issue I find with the ads are that they are spread across the site (How about grouping them ??).

And also most ads repeats, like I am seeing currently two sets of insurance ads. So is there a way to display only distinct ads?

I have absolutely no experience on website building so please excuse me if you find this improbable.


Sayan Monday, March 2, 2009 at 12:15 AM PT

Sayan, You can’t have the cake and eat it too. You can’t have a free site without advertising. Either you pay money to subscribe, and then we can consider removing ads. Or not.

Advertisers pay to get their ads viewed, not grouped out of the way, so they don’t distract readers. Their sole goal is to be viewed (and hence distract readers).

As for what ads get shown – that we have no control over. Ad networks serve the ads.

Sramana Mitra Monday, March 2, 2009 at 11:01 AM PT