Is this a “web 2.0″ design? 26 characteristics to look for
A breakdown of most common characteristics of "web 2.0" websites.
Every "web 2.0" website has some of the following characteristics, I would estimate at least 10. No, I didn't use any scientific method to get to this number, it's just an intuitive estimation.
Here is the list:
1) Use of AJAX: It's synonymous with web 2.0, the less times the page refreshes, the more "web 2.0" the site is. Use of features like search suggest or drag and drop make it even more "web 2.0" and more user friendly. Example: gmail who made AJAX famous
2) Big fonts in headers and text. Example: 37signals
3) Big buttons and big text fields in forms. Example: digg signup
4) Gradient boxes. Example: kaboodle. Photoshop Tutorial in Web 2.0 Design Kit
5) Diagonal stripes. Usually in the background. Example: techcrunch. Photoshop tutorial: designmeltdownÂ
6) Centered layouts. It's rare to find a left aligned layout anymore. Example: videoegg
7) Highlighted text. Example: amberjack
Reflections. Usually in logos. Example: fluxiom. Photoshop tutorial: planetphotoshop
9) Shades. Example: ning. Photoshop Tutorial in Web 2.0 Design Kit
10) A live counter. How much space in gmail, how many clicks tracked with crazyegg, how many calories burned with traineo.
11) Trademark round flashes. These "sign up" or "free" star shape graphics are everywhere. Example: traineo sign-up graphic. Photoshop Tutorial in Web 2.0 Design Kit
12) Cute icons. Example: itsdex
13) Rounded corners. Example: crazyegg. Photoshop Tutorial in Web 2.0 Design Kit
14) Links with highlighted background on mouseover. Example: flickr
15) The "BETA" notice near the logo. Some projects never escape the beta mode... Example: kosmix
16) A tag cloud. This is a must have. Example: 43things
17) RSS feeds with the well known "subscribe me" buttons. Example: feedburner
18) Neutral colored fading backgrounds. Example: edgeio
19) A link to the blog. Example: mobissimo
20) Big footer. Example: linkedin
21) Use of shades of green. Green is the color of web 2.0 and a common choice for web 2.0 websites. Example: ning
22) The word "Free" is often mentioned. Most web 2.0 websites are free and depend on advertising to make money. Example: wikipedia
23) Instant validation and yellow-fade technique. When you edit something on the page a yellow highlight briefly spotlights the change when the page reloads. Example: 37signals who made it famous
24) A lot of white space that makes text easier to read. Example: linkedin
25) Friendly and funny error message when the website is down. Example: funny error 404 page
26) Members' thumbnails (avatars) featured on the homepage. Most web 2.0 websites have a community. It's all about social networking after all... Example: mybloglog
November 10th, 2006 - 10:31
Errata, Wikipedia doesn’t depend on advertising, it depends on contributions to make money.