Analysing Inman’s Compost Heap
Shaun Inman’s site is no longer .com/plete, it seems to have decomposed over night, and is now nothing but .com/post. Though the main attraction seems to be the ageing algorithms that mean content will slowly change colour over time the real thing that has interested me is the design and typography.
“whoa, this is the best typography I think I’ve ever seen on a blog, Inman!” Is a pretty clear statement, but I’m sure I am not the only person who feels they don’t understand why the site has brilliant typography. In this analysis I hope to gain a bit of understanding and I am hoping I can share some of what I find with you.
The basis of this analysis is taken from screen-shots gathered using Firefox 1.5.0.7 on a Mac, the font-size is set to normal.
The Grid
Using the magic of paparazzi and photoshop I have managed to put together a little image to show what I consider the typographic and structural grid of the Heap to be, please behold - figure one.
The site is clearly divided into 3 columns, the centre being the widest, and the two flanking columns being equal width. This sets up the content nicely, right in the centre of the browser where you want it. Interestingly the site appears to be weighted to the right hand side of the browser as the post and content meta information is contained within the right hand column whilst the left column remains empty.
Vertical Rhythm
One of the things that is clear once you look at the underlying grid of the site is the vertical rhythm Inman has created using strict text placement. All text on the site is set on a baseline grid of 16px. Larger Text overlaps the grid, but it is always set on the 16px baseline grid. This allows for a constant line rhythm and thus increases readability.
Visual Hierarchy
The heaps design is already (on the surface) pretty basic, but lets strip it down to it’s bare elements replacing the text with simple rectangular items, we will also remove the beautiful ever changing tones for simple white and grey. Everybody but your hands together for figure two.
Even is this basic form the visual hierarchy of the site is clear. Every element on the page adheres to the grid, and allows for clear areas of white space which help control the page structure.
The two dark grey circles (the SI logo mark and mint logo) are the layouts wild-cards. Circles are visually, the strongest geometric shapes drawing a lot of attention to themselves but this does mean that they can be used to create balance or tension in a layout. Visual interest can be created effectively because circles to not need to adhere to the rules of the grid. Shaun has in fact used the circles to add emphasis to important elements of the design.
The first, the SI logo mark (which is a design triumph in itself) is used to emphasis common site items; the title, navigation and search box. The items overlap the logo mark which creates a relationship between them, tying them all together and the way the logo mark hangs off the page adds to the interest and breaks the page rhythm in an exciting manner.
The second circle, the little mint icon (ok, it’s not quite a circle, but it’s close) could easily be considered the most powerful element on the page, it is a rich graphical icon on a simple page, it just screams for attention.
A conclusion of sorts is probably needed on an article like this, which has turned out to be my own wandering discussion of the Heap. Trouble is the conclusion was already drawn, in the comments on the release post and even by the design its self: The site is rock solid, structured and very readable, just what it needs to be.
A note to all: I am not a design expert, heck I have only just started to try and learn, but I hope this post will spark a discussion so everyone can take away a little bit of extra design know how.
A note to Shaun: This post is meant only as a learning tool, and a journey into the complexity of your latest design. If, of course, you feel I have over stepped the mark please let me know and I will remove/modify the post.
Matt
November 13th, 2006 at 10:56 pm
Am I the only one who doesn’t ‘get’ the new design? The typography is nice, sure, for all of the reasons that you suggested, but the main concept behind the site just doesn’t really do it for me.
It’s an interesting idea for sure, and the time that he put into the css is awe inspiring, but after 5 minutes, I was like, that’s it? I think it’s because the colors assigned to points of the year, and to aging, are random. They are his best interpretation of association of colors to seasons, and to age, but they are still simply his interpretations of those things, so if I look at a post that is two years old, it’s like, “Wow, there’s a grey stripe beside it”. Give me back .com/plete, with it’s enhanced usability, and it’s stylish look, over The Heap, anyday.
Andy Pearson
November 14th, 2006 at 11:08 pm
Hey Matt, great first comment! Unfortunately, since I posted this article, Shaun sneaked out an update to the heap, meaning this is a bit defunct now.
I certainly don’t think you are the only person who doesn’t ‘get’ it, the whole reason for this post was to try and lay down some understanding for myself as well as others.
I think that Shaun was (and still is) making a statement about the current web trends of today, it seems to be all smooth, shiny and strongly against the laws of reflection. The Heap is a harsh typographic design which goes against the grain, and in my opinion succeeds, though I am not so fond of the new tweaked “bar down the side” version.
Mackie
November 20th, 2006 at 8:21 pm
I like Inman’s new site design, meaning the typography and layout. However, the heap thingy just doesn’t seem to work for me. Problem is the fading content, it should only fade as far as to be readable, having to restore the contast with every page is pretty pointless. The colors are neat though.