3 ways to go beyond Web 2.0 design
Written on January 19, 2008 – 8:04 pm
Sjors Timmer, Front-end web developer
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.
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.
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)
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.
I hope you like that post!
Do you have a start-up that we should write about? Contact us! Thanks for visiting and hope you come back again!
Email
Facebook
Netlog
Linkedin
Twitter
The Next Web Blog is closely associated with The Next Web Conference which is held annually in Amsterdam, The Netherlands. At this event speakers from all over the world come together to talk about, and show of, the future of the Web. (
By Michiel van Vlaardingen on Jan 19, 2008
Very true I think. And it works well combined with the guideline that you should remove visual elements that do not have any function. (I’m not sure about the original source)
By Martha on Jan 19, 2008
What is common to all of the examples you mentioned is the feeling of clean and uncluttered pages … lots of content without lots of noise.
By Sjors Timmer on Jan 20, 2008
@Michiel, that sounds a bit like the Bauhaus and modernism design ideology. When you remove everything that isn’t necessary and in the end what remains will be your perfect product. It has one downside though, the decision about what is necessary or not is sometimes more based on emotions and feelings than on hard facts. An can therefore differ from person to person.
Many teenagers probably love their custom made Myspace pages because it communicates who they are, for others though, this clutter of unstructured information is a true nightmare. Another example is that some websites are there to communicate a brand experience. Heineken for example, so they believe they should put as many things on the website as possible. And who knows the true idea behind web2.0 design was showing that it was new, shiny and different.
The sites that I used as examples are all sites where you go to to do something that is different from experiencing the site, you read articles, you watch movies, or you browse trough photos, it’s the content that matters, so in my opinion especially those sites where content matters should be about clean and uncluttered pages.
By Maro on Jan 20, 2008
What’s wrong with large fonts? I use opera with the minimum font size set to 18px to keep my eyes from falling out, even though it messes up just about every site’s intended layout. It’s a simple case of usability over design.
By Steven Carroll on Jan 20, 2008
This is the essence that I use on myplaylist.biz, I personally think that if it has a good signal to noise ratio then you can get the essence across quicker and thus make a more successful application. What is interesting about my experience with myplaylist was when I changed the design to automatically do the donky work, the site literally took off and over night was set loose. What this shows is that ease of use must be the main criteria for adoption.
By Marek on Jan 20, 2008
What is more important, monitor resolutions tend to be increasing, so that some sites become unreadable unless you have your nose stuck to the screen. Small 12″ or so laptops with 1280 pixel widescreens are becoming more common. Try reading a 8px footnote from a screen like that and you know what I mean.
By Sjors Timmer on Jan 20, 2008
@Maro, there is noting structurally wrong with large fonts, but to use extremely large fonts to get tasks done as “download” “click here” “do this” “do that” seemed more a trend than an actual useful feature.
@Steven I do agree with you, I’m starting to think there are tree kinds of websites on the web with all a different design aproach, you have the brand identity sites - getting the feeling across. The view content sites - clean design, let the content speak. And third the kinda sites where you can actually do something, like webmail, photo-edit, or creating play lists, that need a kind of stimulating clean design.
@Marek Monitor resolutions are also becoming lower with the rise of smartphones. Unreadable footnotes should be a point of bad typography use?
By Maro on Jan 20, 2008
Addendum: well-designed sites mostly survive the imposed 18px fontsize minimum. Examples include thenextweb, techcrunch, google, gmail..
By Berco on Jan 21, 2008
I’m suprised you mention cnn.com as a good example. Looking at it I can come to no other conclusion that cnn.com is a noisy mess. It loooks like a random collage of functional sections. You may praise them for not using the web 2.0 design idiom, but they fail on every other usability account.
By Maro on Jan 21, 2008
May I suggest you turn off the spam feature of your blog? Yes, I can opt-out and I did, but still, what a turn-off. Stop doing this by default.
By Boris Veldhuijzen van Zanten on Jan 21, 2008
Hi Maro, what spam feature do you mean? I’m not aware of any spam features here…
By Maro on Jan 21, 2008
Boris, after you posted your reply “Hi Maro, what spam…” I got this in the mail:
“There is a new comment on the post “3 ways to go beyond Web 2.0 design”.
http://thenextweb.org/2008/01/.....20-design/
Author: Boris Veldhuijzen van Zanten
Comment:
Hi Maro, what spam feature do you mean? I’m not aware of any spam features here…
See all comments on this post here:
…”
Funny thing is, I got some of these yesterday, and I clicked the “Block [all] notifications” button on the Subscription Manager, I guess that doesn’t work.
By Boris Veldhuijzen van Zanten on Jan 21, 2008
When I search for your emailadddress in the subscription manager it says that your emailaddress “is not subscribed to any posts on this site.”
That would mean you aren’t subscribed anymore. But if you get more notifications please do let me know so we can fix this.
The option ‘Notify me of followup comments via e-mail” is checked by default but easy to uncheck. We found our that most readers love to get notified of these comments and that is why we added the option and made it default. If we get more complaints I will reconsider. Anyone else annoyed with this feature?
By Maro on Jan 21, 2008
The exact scenario was: I posted, and left the checkbox checked. Received email. Went to the manager, and clicked “Block notifications”, but didn’t remove the subscription to the particular post. Then I got additional mails, so I went back and additionally also removed my subscription to this post (that’s why you didn’t find me). So, my recommendations:
1) Clicking the “Block notifications” should actually block notifications, even if I’m “subscribed”.
2) The “Notify me” checkbox should be off by default. I suspect you will get these kinds of complaints in the future once your traffic picks up if you don’t.
That’s all.
By David Petherick on Jan 21, 2008
I think visually, it’s slightly problematic at present.
It would benefit if you moved the tick box up to be ABOVE the [Submit Comment] button, and make the tick box sit NEXT TO the phrase ‘Notify me of followup comments via e-mail’ to make it clearer. Viewing on Firefox and Safari, it currently appears below the tickbox.
I think the default should probably be UNTICKED, and the phrase might be better as ‘Receive e-mail when there are further comments’ or ‘E-mail me about further comments’
Regards, David
By Wei on Jan 23, 2008
Interesting examples to say the least… is your Mac giving you speech issues on the keyboard too?
Two times in the article you mentioned tree websites instead of three websites. I keep picturing a cute lil 3yr old telling me about “tree websites” =)
By Boris Veldhuijzen van Zanten on Jan 23, 2008
Thanks Wei, fixed it right away!
By Sjors Timmer on Jan 23, 2008
Macs do like apple trees a lot more than three apples. But I shall be more strict on them next time, no more trees. Thanks!
By Social Networking Web Design on Jul 17, 2008
THANK YOU for this article. All web 2.0 sites end up looking exactly the same as their competitors. Websites that make a lasting impression are ones that create something NEW.