When designing a web site some designers start with the looks, the style, the feel, when in fact they should be thinking about a very important factor—Information Architecture—the art and science of organizing and labeling any system, be it a web site or a database.

A traditional web site design process always starts with laying out a sitemap and wireframes. Why should the blog’s design be any different? In most cases the site’s information architecture will actually dictate the direction for the site’s design.

There were definitely changes in the way people organize information on their blogs. The readers are no longer limited to the standard about-contact pages, blogrolls, categories, archives, the most popular-recent posts/comments and ads. More and more blogs nowadays display side posts with their bookmarks and latest activities from social networking sites. Some blogs even bring readers on board to contribute the best articles from all over the blogiverse. Two of the most notable examples where community was invited to be a part of the site’s content are Quipsologies (from the Community) and Noupe (DesignNews).

Nobody can deny the fact that there is lots of information that we want to share with the rest of the world or use as a promotion, so it is very important to pay an extra attention to how we structure our blogs without adding a clutter to the site.

In organizing the information architecture of a blog it is also important to know how readers behave when visiting an unknown site, and think outside of being the authors of our blogs.

One of the most frequently displayed links on blogs are categories and archives. I too have them on my sidebar, though won’t be keeping them in my blog’s new design anymore, thanks to Chris Pearson’s enlightening article on What Every Blogger Needs to Know About Categories, where he warns us that:

By giving users a list of categories to browse on your site, you are creating a psychological conundrum that usually leaves them with a severe case of analysis paralysis.

As far as blogs are concerned, categories are the single biggest contributor to both page bloat and link dilution, two of the most abominable SEO sins.

Pearson’s article makes a lot of sense, and he supports it with his own blog’s information architecture: the sidebar contains only four lists with the Latest Articles, Must Reads, Improve Your Blog and Worth A Look, while the Topics(categories) and Monthly Archive are kept on a single page—Archives.

Once again, while thinking about the Information Architecture for Inspiration Bit, I did some research and want to share with you what I found on how other blogs organize their site’s information flow.

1. Creative Curio

creativecurio

Lauren has just launched her blog’s fresh new design. It looks amazing, so make sure to visit her site and share your thoughts and opinion on her blog’s new look. She’s still working on adding more features to her site and polishing a few details, but I already like how she added her social networking links in the footer, and displaying the Related posts, along with the calls to sharing and subscribing to her blog at the end of each article. Lauren has also spent a considerable amount of time putting together a very helpful Graphic Design Glossary which she links to from her main navigation menu.

2. DesignView

andyrutledge

Andy Rutledge is a brilliant designer, no doubt about that, and his design articles contain so much value that there’s no need to advertise the RSS feed on his blog with big icons or fancy styling. Andy places only two simple links to his Articles feed—at the beginning of his huge triple footer and at the bottom in the Colophon section, along with the author’s short bio, contact and link to his company site. There are lots of small, but memorable details like the decreasing font size in the excerpts for the three most recent posts on the home page; various bits of articles from the Web in a section, cleverly titled as Ephemera; minimalistic but highly user-friendly and space-efficient switching tabs in a large footer that features Andy’s articles on various topics. Nothing distracts the reader’s eye when reading an article on the site, as there are no sidebars, at the end of the post visitors can browse through the same tabbed Archive we saw on the homepage.

3. HellYeahDude.com

hellyeahdude

Patrick Algrim’s site design is all about grids, organization, minimalism. Some of the interesting details that stand out are the small navigation in the search box area, the fact that Patrick’s photo along with a short bio appears only when previewing a single post (something to consider for blogs with multiple authors), the comments area is aligned with the rest of the large footer section, making it look more as a part of the site’s overall information architecture rather than a continuation of the post. On the home page the Discussion section is replaced with the Most Recent posts from the Archive. Even the ads placement on the blog was carefully calculated: small images with sponsor ads look more like portfolio thumbnails, and at first I haven’t even noticed that there are TLA ads in the left bottom section of the site.

4. AIGA

aiga

If even for some smaller sites an efficient Information Architecture can present a challenge, how do large sites with a complex data structure like news sites, portals, deal with it? American Institute of Graphic Arts (AIGA) has managed it masterfully. There are a few organizational tricks that even smaller web sites can find valuable and applicable to their structure. AIGA’s homepage is filled with tons of information: a featured most recent article is followed with four previous articles along with short excerpts, five most recently commented and popular posts appear after, design jobs, design archive and a calendar of events complete the left section of the page; while the login area, search bar, news and sponsored ads are all displayed in a sidebar. Once we click to read an article all the extra curriculum data disappears, including the footer, and is replaced only with the information relevant to the particular article—Related Images, Content, Event, and a small tabbed section with the recently commented and popular posts.

5. Jontangerine

jontangerine

Jon Tan’s personal site is all about paying attention to details—from exquisite typography to an elegant and user-friendly information architecture. The two sidebars on the homepage are uncluttered and contain only a short bio on the left and a collection of “Curious Asides” with a last link that takes to another page that displays “Stubs via Del.ico.us”, “Moments via Twitter”, “Photos via Flickr” that we can all subscribe to. Both homepage and single post’s page feature a large three-columns section above the footer with interchanging sections: the featured articles, comments, conferences and “Snippets from the Silo” with some very helpful design tutorials/articles are on the homepage, while the latest posts, comments and blogroll on the single post page. Article’s page is once again uncluttered: Jon displays some post-related meta data at the top of the sidebar and once in awhile an auxiliary related data, appears on either sides of the article, making the experience similar to reading a textbook.

6. Astheria

astheria

If you thought of Andy Rutledge’s and Jon Tan’s sites being very minimalistic, check out these next two blogs. Astheria is designed by Kyle Meyer, who explained the reasons behind his blog’s super minimalistic design being the result of frustration when “every time I come across a website and am forced to bump the text size up or wait for all of the imagery to load up so that I can enjoy the content“. On Astheria the content definitely gets the royal treatment: the homepage features the most recent post, with a huge font size set in 4.4em, two columns with five latest articles and posts (not sure though how does Kyle determine what is what), a single line footer with the subscribe link, a very simple menu (with a link to archives that features all articles in a chronological order) and even a simpler logo. The single post’s page once again starts with a huge headline and ends with a collection of Related Reading links and social bookmark — no sidebars, no footers in sight.

7. Andrew Ricmann’s Perspectives

arickmann

If Kyle has placed a tiny logo on Astheria, Andrew decided that the HTML title of the blog is sufficient for readers to see the blog’s name. He also ruled against having a dedicated homepage on his blog, and greets visitors with a full article, completed with a comment form and readers’ comments that start somewhere in the middle of the post in a right sidebar. The navigational menu comes with a drop down list for archives and categories. A similar drop down appears in the post’s breadcrumbs.

8. Warpspire

warpspire

Kyle Neath’s impressive tricks start with a usage of an image underneath the Featured Article, which can be swapped with the Blog’s Archive, or Experiences or links from Interwebs when you click on the menu items in the “30 Second Tour” section below the banner-like image. I also like how you can switch between listing Tips/Resources, Reviews and Marks—very space efficient. When viewing a single post, the reader can check out the Hot Topics on the sidebar or visit Kyle’s other projects.

9. I Love Typography

ilovetypography

What can be said about John Boardley’s beautiful site that hasn’t been said yet. Recently John updated the look of iLT’s main navigation to make it more prominent amongst the site’s rich information architecture. ILoveTypography is one of a few sites that display a complete list of all articles ever written on a sidebar. With twice per week posting schedule John has managed to publish over 100 posts in less than a year of iLT’s existence. However, not everyone can get away with such a long list of past posts on a sidebar, unless you tend to publish very long articles that are so characteristic for iLT. John even created a long list with his favourite typefaces on the second sidebar of the site that’s updated with new type names/links every month.

10. A List Apart

alistapart1

Of course, everyone knows this mecca for all designers and developers, but it’s worth taking a second look at ALA’s information architecture. If this site has managed to handle elegantly its vast amount of articles and pages, then no personal blog has any excuse for a poor site structure and navigation. There are four ways how a reader can navigate A List Apart: viewing a complete list of articles by clicking on the first menu item—Articles; clicking on Topics provides us with a short list of the site’s main topics (that also appear on the sidebar) along with a description and links to subtopics; clicking on linked topics in the breadcrumbs of a particular article we read; searching ALA via search box.

11. Bearskinrug

bearskinrug1

Kevin Cornell’s site is not only pleasing to look at, but also a joy to browse and explore. The content area of the homepage is split into three columns: the first column is reserved for the actual article, the second column features three latest articles, the last column starts with a ravishing search box, followed with the list of Recent Links where Kevin shares interesting snippets from the Web. On a single post page, the content in the last two columns is replaced by Comments in the middle, and on the far right the Recent Articles are presented as little thumbnails with post’s title and date placed into ALT and TITLE attributes of the corresponding image. Also make sure to check the tabbed section on the right of Bearskinrug’s Store section—such an artful solution to display tabs as illustrations.

12. Rob Goodlatte

robgoodlatte

Rob Goodlatte’s stunning web site utilizes various navigational elements—top menu, right sidebar and big footer area. The most recent posts gets the spotlight on the homepage and is followed by four previous posts split into two columns. The content of the sidebar changes depending on whether you’re on the homepage or reading a post. The footer always displays the latest tweets, features three posts from four categories and links to Rob’s social activities. I really like how he displays three most popular posts on the single post’s sidebar—the text links are indented with “-9999px” and instead replaced with the images of well-crafted magazine-like titles.

13. Designing The News

designingthenews

Dave Bowker’s elegant site sports a three-column layout with a very minimalistic middle column, where he displays only a limited post related meta data, which give lots of breathing room to articles on the site. The last column showcases links to other sites divided into five different sections. I especially like the way Dave’s portfolio page is organized.

14. Veerle

veerle

Veerle’s blog is one of the most well-known web sites on the Web. She’s got lots to offer to her readers: art projects, tutorials, articles, workshops, job ads. There’s certainly lots of information on the site, but Veerle has victoriously dealt with the complex structure by integrating various navigation options for her readers and visually separating the main content of the site from the auxiliary data. As soon as you switch to the single post view the complex structure is replaced with a simple user-friendly layout, where the article gets the prominent spotlight on the site.

15. Design Adaptions

designadaptions

Recently Charity’s site has received a fabulous makeover. I really like her implementation of the data organization on her blog. Depending on whether you’re on the homepage or reading an article on the single post page, the surrounding navigation aids you in finding a relevant and valuable information and keep you glued to the site, exploring it. The homepage features a horisontal row with the photos from Flickr, followed by the set of external links that encourage visits to other sites. Even though the tabbed section stays on a single post page, Charity complements it with the “possible related” posts. The footer links are changed as well, and turned into a showcase of the most popular posts from three different categories.

16. RA Project

raproject

When browsing RA Project you can sense that Ronald Huereca has put a considerable amount of thought into improving a user experience on this site, after all the site’s purpose is to place readers first. The homepage features an excerpt from the most recent article, that’s complemented with the list of five recent articles on the right. AJAX carousel is a geeky and quick way to present readers with a whole bunch of recent articles that they can easily browse. Three articles from different categories are featured below with the list of related posts. The footer presents readers with a short about section, del.icio.us links and Readers First award recipient. Since it is a multi-authored blog, Ronald cleverly displays the author’s short bio before each post, followed by a number of links from the same category as the post, and more articles from the same author.


I hope you got inspired by the examples above to perhaps re-think or improve the information architecture of your site. You may also find helpful two of my previous articles on blogs with unconventional layout and elaborate footers.

What other sites would you include to this list? How do you browse other blogs as a reader? What are the first things you look at after reading the post that you liked? What do you find most frustrating when browsing an unknown to you site for the first time? What would you like to see on a web site that you visit regularly?

Recent Bits
Related Bits
Meticulous Design: Image Styling
Information Overload
8 Security Bits
8 Worthwhile Weekly Bits of Information – Part 1
Feeling Adventurous
A Candid Interview With Mr. Typography
Web Design Dissected Into 8 Bits
Google interviewed
Comment Bits

9 Insightful Bits in response to “Meticulous Design: Information Architecture”

  1. Aw, yay! Thanks for the mention, Vivien. You put me up there with some other very impressive sites.

    important to pay an extra attention to how we structure our blogs without adding a clutter to the site

    So true! And in addition to the other things you noted about the evolution of blog design is that we mainly use right hand navigations instead of left hand. I think that’s quite interesting and I like it much better because the deeper nav is closer to the scroll bar. It makes perfect sense to me.

    Thanks for the link to Chris’ article on categories. I have seen it before, but it wasn’t totally relevant to me at the time. Now it is. I definitely need a better way to for visitors to browse my articles.

    These details give me a lot to think about. It’s not too late to slightly restructure some aspects of my blog. And I like how you brought AIGA into the mix, too, as a large site with lots of sections.

    I would like to add NxE as an example of good homepage info organization, though I wish they didn’t have the whole article archive there. What I like best is that the header area has the newest article, so when you visit the site, it really looks like the author is updating the content often.

    Good questions at the end. I look at either related articles or popular articles first–and I don’t believe these necessarily have to be reader popular articles, I think they can also be articles that embody what the blog is about, though maybe a more appropriate title for those would be Recommended Reading. I’m not as likely to look at those, though. I also like it when the author makes it super easy for me to Stumble or bookmark the article with the ShareThis (or similar) button.

    Most frustrating? No contact info, no author info and no dated articles or comments. As an author, I originally thought it would be great to have “timeless” articles, but the nature of blogs is that they are dated and it annoys me to no end now when I can’t find a date (because inevitably you will publish an article that is time-dependent–like a contest announcement or a WP fix–and I will find it 2 years later and try to use it).

    For a site that I visit regularly (like this one), I want a super easy way to find that article from three weeks ago that is relevent for the article I want to post tomorrow. I see this as two parts: a title that accurately describes what is in the article and a simple, single page chronological archive of posts (for older blogs or blogs that post 5x/day, maybe this can be divided into separate pages for years or quarters). This doesn’t have to be displayed as a list of monthly archives, just a link, maybe in the search area (liked that example from Hell Yeah Dude) or main nav to Archives. Increasingly I’m not liking categories for searching because what makes sense to be filed in Graphic Design to me, might make sense in Web Design to you.

    Phew! Enough feedback for ya? ;)

  2. Thank you for the very kind words! It means much more than you might think. Loving this Web site — keep up the great intellectual and motivational work!

  3. That Pearson article is good. You always get me thinking. I’m almost scared to read your posts sometimes, as I know that they will mean rethinking things and therefore more work for me ;)

    I’m really struggling to find a good way of helping readers find older articles. That list in my sidebar does not include every article, but almost. The problem is, that it’s getting longer and longer. In ten years, it will take you as long to scroll to the last article in the list. So that’s something I need to think about. I was relieved to hear what Pearson said about “categories”. The difficult thing in all of this (as you pint out) is attempting to permit easy access to everything, without cramming the page.

    I like the Warspire site. I played with a similar tabs thingy for iLT, but it just looked like a train wreck. Warspire’s is very nice; I may have another go at it.

    Vivien, you’ve obviously put a lot of time into this article. It’s great, and I really appreciate it. Thank you. Now I’m off to do my homework!

  4. Lauren, thanks so much for your valuable feedback. I was thinking of adding NxE to this list, but then decided against it – that site indeed has an unconventional layout which I featured on iBit before, but I’m not crazy about their IA, they could add things like Most popular/Related or Recommended posts.

    I don’t mind Johno’s long list of articles on the sidebar only because I’m a regular reader of iLT, but I have to admit it is hard sometimes to look for a particular article on iLT. For example, I was trying to locate where did John mention how many posts he already has on iLT, and it took me awhile (the search function didn’t help me here) to find it among the other Sunday Type articles, which goes back to your point on a descriptive title, but then that’s the nature of Sunday Type posts that are jam packed with type goodies. On the other hand I really like the long list of featured fonts on iLT.

    Patrick, you’re very welcome. And welcome to Inspiration Bit. Thanks for your kind remarks about iBit as well, hope to see you around here again.

    Thanks, John. It does take me a long time to put these research articles together. I’m considering on taking a break and posting shorter articles for awhile, as my TODO list gets very long, similar to yours. I too find it challenging to organize a site like yours, that’s why I’ve also included AIGA and ALA in this list to get some ideas on the way they dealt with their Information Architecture. Good luck with iLT’s IA :-)

  5. Vivien,

    I’m honored to have our site listed among such great company. Thanks for the mention.

    I love Lauren’s site re-design by the way.

  6. Thanks Ronald :)

  7. I should point feedburner to this article. I get lost there ever time I login.

  8. You’re very welcome, Ronald. RA Project deserved to be mentioned here.

    Seo blog, you got me laughing out loud with your comment ;-)

Pingbacks and Trackbacks

  1. Meticulous Design: Image Styling » Inspiration Bit

    [...] Bit Knowledge comes from inspiration – one bit at a time « Meticulous Design: Information Architecture Behind The Scenes Of Exquisite Web Typography – Part Four [...]

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach, play with my daughter and try to balance family, work, friends and a somewhat active social life on