This article was published on January 19, 2008

3 ways to go beyond Web 2.0 design


3 ways to go beyond Web 2.0 design

Not long after the phrase Web 2.0 emerged, also Web 2.0 design appeared. An unwritten set of guidelines that demanded that a decent webpage should have gradients, round corners, some mirror effects, a badge, and the important stuff should be in a font size of at least 48px came to existence.

I’m still not sure what they were thinking back then. Did the designers really think users where that stupid that they needed big letters screaming at them? Was it all about showing off Photoshop skills, or had it something to do with the idea that Web2.0 should be clearly recognizable as something different, something totally not Web 1.0.

Well let’s no longer talk about the past, and bad examples, let’s search for good ones that are available to us now. Because I have the feeling that we’re slowly moving to a new set of design guide lines. I’ll present you three websites, that – although they are different – have a lot in common too.

First:

Flickr.com probably one of the oldest Web 2.0 companies that didn’t go along with the bling hype. The interface is clear and simple, but still looks shiny cool.

flickr.jpg

Second:

Cnn.com, got a new fresh design last year, and is one of the finest examples of how to make a site without gradients and without drop-shadows behind each box.

cnn.jpg

Third:

Hulu.com, only around for a few months now, and a living proof about designing a good site that mainly exist out of white space. (It It is still in beta, but you can get a login within a day, check for some more screenshots here)

hulu1.jpg

three ways to go beyond Web 2.0 design

So what is it that all these site have in common?

1. Grids and white space
Order your site with mathematical precision, create a grid where each column has a certain width, and stick to that format. Another thing is making things stand out not by making them really big, but by adding a lot of white space around it, some things on Hulu just needs to be clicked because there is noting else that catches the eye. Mark Boulton wrote a good tutorial about it, Khoi Vinh wrote a blog post accompanied with a pdf for it.

2. Typography.
There is a lot more into typography than only choosing which font you are going to use. Without even changing the font you can already differ two text blocks from each other in different line-height, different grey scales, and different sizes. Once again Mark Boulton wrote a wonderful series. Another good point to start with is Oliver Reichensteins article about typography.

3. Colors, and shades of grey
I already mentioned the use of different shades of grey to differ texts in importance, and especially sticking to one or two colors and grey can be easy tools to create an attractive yet clean site. Flickr especially manages the grey tones pallet very well. Veerle wrote a good article and ColorLovers and Adobe’s Kuler are worth visiting too

To sum it up: master your grey skills, keep your distance, and get some mathematical madness for order running through your blood. And you will be on your way to go beyond the drop-shadows and big starry things with text in it.

Get the TNW newsletter

Get the most important tech news in your inbox each week.