Techcrunch’s previous design, which I’ve done around June 2005, resisted for almost a year and accompanied the blog in it’s tremendous growth to the 53.000 daily readers mark. Despite all its flaws (because there were a few, particularly to my eyes), it was recognized by the industry as a clear exercise on what “Web 2.0″ blog design was about. It’s not up to me to agree or disagree with that statement because I’d probably be biased, but this post clears up on what the line of thought was, on designing the previous Techcrunch (now only seen on the screenshot).

The main goal: readability

Content readability is the most important thing on a blog. Users have no time for reading, so if their first visit to a website (or blog) stresses them out, they won’t come back or subscribe - even if you have the best content out there. So in designing the previous Techcrunch, a lot of attention was given to the way people view the main content section - the posts themselves.

The basic guidelines for readability, as implemented on the previous TC, are:

• Correct line height, increasing readability of each line of text
• Constant word spacing (meaning, no justified text)
• High contrast between foreground and background (text and page background)
• Clear distinction between posts, in a non-obtrusive way
• The right font-size for the line-height (spacing proportionality)

Some of these may seem simplistic, and some may seem like they wont have much of an impact on a blog’s success, but let me give you an example using the second rule of no text justification:

Now, the only difference between the two blocks above - apart from the color - is the text-align property: while the first is justified, the second is not. The thing is, people are used to justifying text on printed documents using text-processing software. However, the computer screen is not a sheet of paper, and the varying space between words on justified text is confusing to the eye - particularly when reading long blocks of text.

The justification example shows how simple changes can have an impact on how (and if) people read what you write on the web. Think about this (and the set of rules I describe above) when designing your next weblog template.

Secondary goal: Pleasing the eye

Obviously, every innovative weblog and website needs a little eye candy to grab your attention. However, a common mistake is to add the eye candy before considering the main goal of users - which is to read what you write, not look at pretty gradients. So, Techcrunch needed its own share of pretty design, in a non-obtrusive way.

The gradients and pastel colors were all picked and created to give the users something to lean on when they were resting from reading the blog posts - even if this seems like yoga training speech, bare with me, because it’s true. People need that sort of thing when they’re reading. If your blog is shock-green people won’t feel at ease because once they move focus from text into the layout, they’re greeted by colors that are too vibrant, and just want to get rid of the browser and fall off the chair.

The yummy bit: On the new techcrunch

People often criticize radical change - that is a known fact. Whether Techcrunch’s new look is good or bad is up to each person to decide. There are a few things wrong with it, though - my number one concern is the lack of focus on the content, and how cluttered it has become with ads and green: readability just wasn’t thought of.

My previous design suited the Techcrunch that existed - one focused on the content. It clearly needed changes to accomodate the wish of monetizing the pageviews it had. Maybe, as some people say, the changes should have been soft and slow, instead of a complete redesign. The future will tell. Meanwhile, the discussion goes on in the blogosphere.

Me, I’m just happy people recognized my work as influential by people I have respect for, and happier even that there’s actually enough people waking up to the fact that design is in fact, one of the most valuable assets in any online application, site or blog.

Previous stories and related discussion:

My early notes when we launched the previous Techcrunch are here. Also, Mike Rundle has a pretty good view on the new design by Rachel here. And Technorati is a helpful tool, as always.