New home page

Tuesday 15 April 2008

For the last six years, the home page of this site has been pretty plain. Mostly it was my name, the star logo, and a few links off to the rest of the site. Here’s how it started in 2002.

I finally got around to doing something more with it. Check out the new design. It is still just a jumping-off point for the rest of the site, but improved. The design has more energy, and there’s more content there to get you started: one-sentence exceprts from the last four blog posts, a quick tag summary for the blog, three featured code projects, three featured text articles, a bit about me, and a search bar.

My design aesthetic has always been strongly typographic, with little or no color. In designing this site, I’ve looked at the spectrum of other similarly designed sites. At one end are the minimalists, currently epitomised by Ryan Tomayko. His site is about as stripped down as you can get and still care whether people can find stuff or not. When he recently redesigned, I was amazed to see how spartan pages could be.

At the other end are structuralists like Khoi Vinh at Subtraction. His site is impressive for its disciplined use of an eight-column grid for design, and for the way every page is packed with tabular information about the site and about the information itself. Vinh goes overboard in some places. Do blog posts really need a table up top where the date is labeled “Posted”, the author is labeled “Author” and the post itself is labeled “Body”? I think people will understand what the information signifies without the labels.

In the middle are sites like goodonpaper.org and rc3.org, both of which continue the mostly black type on white background theme.

I’ve tried to find my own middle ground, with generous navigation and metadata, but identified implicitly where possible, so as not to beat people over the head with it. For example, at first I had two separate lists of blog tags and blog archives on the home page. Then I realized that tags and years are both different ways of slicing blog posts, so I combined them into one list, but with a bullet between them. Then I removed even that distinction and didn’t label it at all beyond “Blog”. People will get it.

One way that my site differs from all four exemplars is that they all use the home page as their blog, or at least an extensive table of contents for their blog. I’ve always felt that my blog is just one part of the whole site, and so the home page shouldn’t be just a proxy for the blog.

There’s something very satisfying about being able to focus on one small thing, in this case, a single page, even just a single screenful, and polishing it. I looked at examples, thought about navigation, and considered graphics. I fiddled with the typography, adjusted the content, and played with the punctuation. I’m not a designer, so I’m sure someone else could have done it better, but it’s my work, and I like the result a lot.

Comments

[gravatar]
matt harrison 11:07 AM on 16 Apr 2008

I think you found a good balance. Looks nice (even though you say you are not a designer). Good job.

[gravatar]
Edward O'Connor 11:43 AM on 16 Apr 2008

Very nice.

[gravatar]
Steve Campbell 11:54 AM on 16 Apr 2008

The star on the home page is very bold, almost intimidating. It says to me "this site is owned by an interesting, confident person".

It took a while for my eye to stray from the star. When it did, it went down to the short bio below it, and across to the text on the right. I found the blog links easily enough, and liked the ability to jump to 2008. I think my eyes skipped over the headings above the blog links, but that could just be because I was focused on the blog. My eyes totally missed the top row of links next to your name.

You have 4 different styles of hyperlinks on the home page (blue, plain, soft italics, and bold). Since its a page of links, I guess thats ok. If it were me, I'd test what it looked like without the blue hyperlinks - they're a little distracting.

Overall, I think its a very attractive site.

[gravatar]
Dan Dunn 11:55 AM on 16 Apr 2008

I like it - I think you did good things with the graphic in particular. I'd suggest some sort of visual clue that the most recent blog posts are different than the rest of the menu. The blog posts are transient; the rest of the items are permanent. I think you should signal that.

But maybe I'm just too utilitarian.

[gravatar]
susan senator 4:34 PM on 16 Apr 2008

:-)

[gravatar]
Ned Batchelder 10:48 PM on 16 Apr 2008

Thanks everyone, for the positive feedback.

@Steve: The blue links in the blog posts may be too distracting, you're right. I may make them invisible links like the rest of the page.

@Dan: I know what you mean about the different lifetime of information in the blog posts vs. the featured code and text. Not sure what to do about that yet...

[gravatar]
Daniel 9:08 AM on 17 Apr 2008

Very, very nice! Will that design propagate to the rest of the site or is it home page only?

[gravatar]
Ned Batchelder 9:20 AM on 17 Apr 2008

@Daniel: good question. My son Max's comment about the design was that it didn't match the rest of the site (or vice-versa). I would like to lighten up all the other pages, but that may be another few months down the road if history is any guide.

PS: I made the links on the home page much subtler to make them less distracting.

And @Dan: I remembered now what I had done about the temporality of the blog posts: I put the "Posted April 17" label on them as a subtle cue. Too subtle I guess.

[gravatar]
Jeff Atwood 4:48 AM on 20 Apr 2008

Outstanding -- big thumbs up!

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
URLs auto-link and some tags are allowed: <a><b><i><p><br><pre>.