Interesting examples of sitemaps

Warning This article was written over six months ago, and may contain outdated information.

I’ve been doing quite a lot of site mapping recently, and looking for a way to escape the standard boxy top‐down view. In searching for examples of different ways to present the information, that are pleasing to look at but still immediately convey meaning, I found a number of interesting examples.

Below are the pick of the results, along with a few that don’t quite work, and some old standbys. I wanted to include images to illustrate this, but in most cases the license didn’t allow.

First, the less successful attempts. I’ve used isometric views before, but this one feels a little too cramped and doesn’t allow any focus on the third‐level pages. Likewise, this one (from the same set) only really shows the relative sizes of sections, not how they connect to each other.

The designer of this radial sitemap has had a very strong attempt at creating a new format, but it’s not immediately obvious what all of the symbols represent, and you have to really work to find the order in here. With some tweaking, however, I think this could be made to work.

Of the examples that work, the first two are fairly traditional but work because of careful design; this first one has lovely balance and uses colour well, while this second one uses typography to show hierarchy and a simple band of grey to demonstrate grouping (Update: unfortunately, this image has been removed).

My favourite, for really being different while still making a lot of sense, is this one of a personal home page / portfolio, which incorporates not just pages but feeds, widgets and tags. There’s a lot of information, but it’s very clear; this brings order to the social web. It also reminds me of the tube map.

But for a more physical version of a sitemap, it’s hard to beat this one.

Update: Here’s another interesting one which shows plainly which action each link will perform; sort of a hybrid sitemap and wireframe. Although there are perhaps too many arrows, which confuses the diagram slightly.

Comments are closed.