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 map­ping recent­ly, and look­ing for a way to escape the stan­dard boxy top-down view. In search­ing for exam­ples of dif­fer­ent ways to present the infor­ma­tion, that are pleas­ing to look at but still imme­di­ate­ly con­vey mean­ing, I found a num­ber of inter­est­ing examples.

Below are the pick of the results, along with a few that don’t quite work, and some old stand­bys. I want­ed to include images to illus­trate this, but in most cas­es the license did­n’t allow.

First, the less suc­cess­ful attempts. I’ve used iso­met­ric views before, but this one feels a lit­tle too cramped and does­n’t allow any focus on the third-lev­el pages. Like­wise, this one (from the same set) only real­ly shows the rel­a­tive sizes of sec­tions, not how they con­nect to each oth­er.

The design­er of this radi­al sitemap has had a very strong attempt at cre­at­ing a new for­mat, but it’s not imme­di­ate­ly obvi­ous what all of the sym­bols rep­re­sent, and you have to real­ly work to find the order in here. With some tweak­ing, how­ev­er, I think this could be made to work.

Of the exam­ples that work, the first two are fair­ly tra­di­tion­al but work because of care­ful design; this first one has love­ly bal­ance and uses colour well, while this sec­ond one uses typog­ra­phy to show hier­ar­chy and a sim­ple band of grey to demon­strate group­ing (Update: unfor­tu­nate­ly, this image has been removed).

My favourite, for real­ly being dif­fer­ent while still mak­ing a lot of sense, is this one of a per­son­al home page / port­fo­lio, which incor­po­rates not just pages but feeds, wid­gets and tags. There’s a lot of infor­ma­tion, but it’s very clear; this brings order to the social web. It also reminds me of the tube map.

But for a more phys­i­cal ver­sion of a sitemap, it’s hard to beat this one.

Update: Here’s anoth­er inter­est­ing one which shows plain­ly which action each link will per­form; sort of a hybrid sitemap and wire­frame. Although there are per­haps too many arrows, which con­fus­es the dia­gram slightly.

Comments are closed.