When they gave me a task to make a web2.0 skin, I was absolutely sure: web2.0 has nothing to do with design. All 2.0 sites are 2.0 because of their functionality, not because of their appearance. It’s as simple as that. No skin on earth can single-handedly turn your application into web2.0 if it’s not 2.0 already.
So what is web 2.0?
These are user oriented applications providing services instead of selling product. Usually the service is free (gmail), or low-cost (flickr paid accounts), rarely requires installation and it is updated and maintained on a daily basis (flickr). Web2.0 apps are also exclusively data driven – they live trough their content and cannot exist without it (myspace). The content is generated and in some cases even maintained by the users, creating “the network effect” – the more people use the service, the better it gets (bittorrent). Web2.0 allows for much more intuitive categorization of information by using tags (flickr). It encourages remixing, rewriting and contribution.
Ajax plays a major part in web2.0 in terms of technology. People don’t have to wait for something to load, they see it immediately.
From a marketing point of view, web2.0 is the exact opposite to web1.0:
- In web1.0 you have a product and you try to promote and sell it trough the internet;
- In web 2.0 you build a community by providing a free service and then make a profit.
How is the 2.0 concept connecting with design?
All this results in simple, friendly, and intuitive applications. Minimalism & usability are the key words when it comes to web2.0 layouts. It is all about making things easy, soft, light, and smooth. 2.0 apps should feel like cute, big-eyed pets. These are some of the most common graphical elements that get the job done:
Oversized Fonts
It was something we all grunted about in the beginning: Why is everything SO BIG? I have only one answer to this and it’s the exact same thing the big bad wolf said to the little red hood: “So you can see it better, my child”. It’s all about improving readability. While 11 was the normal size for reading text in 1.0, nowadays 12 is the new 11 and 18 (even 20) is the new standard for titles. Big sized fonts are simply a must – ask anyone.
Arial
Web2.0 returned Arial back to its glory days thanks to oversizing. While it looks cramped when used in sizes like 8, 9 and 10, it is ok on anything above 11 and shows its full potential over the 14th pixel. Arial is much more ‘rounded’ and smooth compared to Tahoma, for example. Used in: skype, digg, last.fm, del.icio.us, etc.
Of course, Arial is not the only web.2.0 font – Verdana and Trebuchet MS are also widely used, Interstate Black (37signals) and Arial rounded (skype) are popular in logo designs.
Bright Colors
Remember when we talked about user friendly applications? Look for airy, innocent, childish palettes:
pink (candy) + blue (innocence)= flickr
green (fresh, clean, young)=newswine, wayfaring
blue(sky) + green(grass)=blinksale
blue(sky)= skype, myspace, del.icio.us
blue(sky) +yellow/orange (sun, fresh, fruity, juicy)= digg
Bigger text fields
I love those. They make user data look so important. And Big. And readable. They are suitable for username/password sections, newsletters, search fields, anything significant that needs to be seen. 2.0 apps usually have big and small text fields. The small ones are used in large forms or for less important data.
Big Icons
Icons help people navigate. Lots of 2.0 apps are using them to visually explain their content – take a look at last.fm and wayfaring. Because of their size they look like illustrations or cartoons, but still keep a slightly scientific appearance.
Blue underlined links
Jacob Nielsen’s favoriteJ. Since web2.0 is about drastically improved usability, no wonder they are such a hit. When you are building web2.0 application, you want people to know where to click.
Rounded shapes
Well, it’s not like they are a must. Of All 37singals products not a single one employs a rounded shape but they are all as 2.0 as it can get. To achieve a smooth, softer look, it certainly helps to have some, though. Examples: wayfaring, digg.
Gradients
Some use them (yahoo, last.fm, 37singals, digg) , some don’t (flickr, del.icio.us, google). They come handy when you want to achieve smooth, soft surfaces.
Shadows, Glassy effects, Reflections
I am putting these together since they are all not mandatory. I think of them more as of a fashion line that does not define 2.0-ness, but exists within the 2.0 breathing space and is therefore often associated with it. I believe minimalism is a distinctive feature in all web2.0 apps and these design approaches conflict with its idea. Still, they help achieve the innocent and smooth look and this is the reason they are used so broadly.
In conclusion
I don’t think there are rules written in stone what makes your design a 2.0. All you should have in mind is that the user comes first and design serves a greater purpose than simply promoting your skills. Be generous. Design for all people. This IS an art too.