This link has been bookmarked by 220 people . It was first bookmarked on 23 Nov 2006, by Crm Revolution Proyect.
-
11 May 12
-
08 Dec 11
-
07 Nov 10
-
09 Aug 10
-
04 Mar 09
Thomas Zucker-ScharffAdventures in web and graphic design. The regularly updated journal of Jonathan Nicol.
-
19 Jan 09
-
11 Aug 08
-
16 Jun 08
-
11 Jun 08
-
04 Jun 08
-
03 Jun 08
-
26 May 08
-
27 Apr 08
-
06 Apr 08
-
24 Mar 08
-
21 Mar 08
-
17 Mar 08
-
06 Mar 08
-
01 Mar 08
-
18 Feb 08
Hendy IrawanIf you’ve got to convince visitors to sign up for your killer app, giving away FREE accounts surely can’t hurt. Most Web 2.0 sites devote prime real estate to the message that they offer a free service. If that message can appear inside of the ubiquit
web2.0 webdesign design web style css typography article business blogs blog arts articles art 2 for:linewisherman
-
28 Jan 08
-
Keep it simple stupid
Most Web 2.0 applications add an additional technological or organizational layer to the user’s web experience. Be it managing links with del.icio.us, sharing photos with flickr, or organizing tasks with Backpack, we have to familiarize ourselves with a new technological process and devote time to managing our content. A good Web 2.0 app ought to be lightweight and easy for users to grasp, and clever visual design and copywriting can help remove barriers to entry
-
Big is beautiful
As far as Web 2.0 is concerned, bigger is definitely better. Bigger text, that is. Large text is easy on the eye, and coupled with snappy copywriting makes information easy to absorb. And now that accessibility is cool, it’s possible to be a hotshot web designer and use enormous type. Admittedly this craze for giant text strays too far into Jacob Nielsen territory for my taste - when a web page’s body text is set at larger than 13 point it looks like a “learning to read” book to me
-
Breathing space
-
The layout of Web 2.0 sites might be described as minimal. With a focus on legibility and ease of use, good use is made of white space. White space allows important information to stand apart, provides rest for the eye, and imparts a sense of calm and order. Generous leading also makes text copy easier for the eye to follow. Some Web 2.0 layouts are so minimal that they verge on boring, but designed well, an uncluttered page can be incredibly tasteful
-
-
21 Jan 08
-
31 Dec 07
-
01 Dec 07
-
28 Nov 07
-
23 Nov 07
-
08 Nov 07
-
31 Oct 07
Joitske Hulseboscharticle describing the general visual aspects of web2.0 sites
-
18 Oct 07
-
12 Oct 07
-
04 Oct 07
-
29 Sep 07
-
07 Sep 07
-
21 Aug 07
-
11 Aug 07
-
10 Aug 07
Devis BattistiYou won’t find any stock photography of smiling support staff on a Web 2.0 site - that’s a tactic favored by small companies trying to mimic large corporations. Simple icons and screenshots are the order of the day when it comes to imagery on Web 2.0
-
01 Aug 07
-
30 Jul 07
-
25 Jul 07
-
13 Jul 07
-
05 Jul 07
-
30 Jun 07
-
29 Jun 07
-
15 Jun 07
-
11 Jun 07
-
15 May 07
-
08 May 07
-
28 Apr 07
-
31 Mar 07
-
26 Mar 07
-
22 Mar 07
-
13 Mar 07
Julia Lesagealso cites a little tiff in wikipedia about removing statements about web2.0 visual design.
business design Internet multimedia tech tips composition digitalculture
-
12 Mar 07
-
04 Mar 07
-
21 Feb 07
-
19 Feb 07
-
17 Feb 07
-
04 Feb 07
-
31 Jan 07
-
30 Jan 07
-
29 Jan 07
-
19 Jan 07
-
17 Jan 07
-
16 Jan 07
-
08 Jan 07
-
03 Jan 07
-
01 Jan 07
-
31 Dec 06
-
21 Dec 06
-
11 Dec 06
-
07 Dec 06
-
06 Dec 06
-
02 Dec 06
-
29 Nov 06
-
28 Nov 06
-
27 Nov 06
-
-
26 Nov 06
-
The visual design of Web 2.0
If you didn’t blink, you may have noticed that for a few days recently Wikipedia’s entry for Web 2.0 included a subsection describing the visual elements of Web 2.0. Gradients, colorful icons, reflections, dropshadows, and large text all got a mention.
A few days later the “visual elements” addition had been removed after a vote by wikipedians. The objection, I suppose, is that no set of visual criteria can accurately define something as being characteristic of Web 2.0 - if Web 2.0 can be understood as an approach to generating and distributing content, then it needn’t be tied to a particular visual style.
Nevertheless, it’s true that many Web 2.0 sites do share a distinctive aesthetic. Wikipedia’s editors may not think it’s a worthy part of the Web 2.0 discussion, but I say bring it on! Let’s take a look at the some of the communication issues facing a Web 2.0 site, and see how the “Web 2.0 look” can help to solve them.
-
Trust me, I’m Web 2.0
Integral to Web 2.0 is harnessing the input of website visitors. Users can generate content for a web service, promote it in a “viral” peer-to-peer fashion, and improve it’s data quality through their opinions and preferences.
But to convince a visitor to contribute their time - and data - to a web application, you need to get them to trust you first. Most Web 2.0 sites come across as friendly, approachable and small-scale, using subtle design decisions to gain our trust.
Green is the new grey
Bright, cheerful colors dominate Web 2.0 sites. Green is the unofficial color of web 2.0, but saturated blues, oranges and pinks are also favourites. Bold primary colors suggest a playful, fun attitude and also help to draw attention to important page elements.
Rounded everything
New CSS techniques for achieving rounded corners have helped make this style hot again. The friendliness of rounded corners is in keeping with the comfortable, informal tone of many web 2.0 sites.
In a great FontShop article analysing the logos of Web 2.0, it was clear that rounded typefaces are all the rage. This smooth approach to type lends a modern playfulness to a company’s visual identity.
Free, as in beer
If you’ve got to convince visitors to sign up for your killer app, giving away FREE accounts surely can’t hurt. Most Web 2.0 sites devote prime real estate to the message that they offer a free service. If that message can appear inside of the ubiquitous ’starburst’, all the better.
No (stock) photos please
You won’t find any stock photography of smiling support staff on a Web 2.0 site - that’s a tactic favored by small companies trying to mimic large corporations. Simple icons and screenshots are the order of the day when it comes to imagery on Web 2.0 sites. 3D and beveled icons can lend elegance and polish to a page design that is otherwise fairly stark.
-
Clever copy
Friendly, informal copywriting allows a more personal relationship with website visitors. A List Apart singled out Flickr and Photojojo for an honorable mention in this department, and it’s a lesson that many Web 2.0 sites put into practice. WebTango isn’t just free, it’s “free of additives, cholesterol, ozone-depleting CFCs, and most importantly, free to use”. Tioti doesn’t just have tagging and RSS, it has “tagging and RSS up the yazoo”. FAQQLY founder David Liu isn’t a isn’t a faceless entity, Dave is “your first friend once you register”. And the toolbar on eSnips isn’t just flexible, it’s “a toolbar you can use in a bunch of cool ways”. You get the idea.
Odds and ends
There are a couple of visual tendencies amongst Web 2.0 sites that don’t seem to answer a particular design problem, but deserve a mention nonetheless. The ‘wet table’ look, ’starbursts’ (also known as ‘flashes’ or ‘violators’), and ‘glass’ buttons, provide a lot of Web 2.0’s eye candy. Apple’s marketing department sure has a lot to answer for.
Conclusion
So that’s my quick tour of the visual design of Web 2.0. Who knows, the “Web 2.0 look” may be out of vogue a year from now, but I think it offers good lessons about effective design for the web that deserve to have a much longer lifespan.
Further reading
What is Web 2.0?
Straight from the horse’s mouth.
The Logos of Web 2.0
Examines trends in Web 2.0 logo design, and identifies the most popular typefaces.
Current style in web design
The inspiration for this article. Sums up the current trends in website design.
The Web 2.0 Awards
Discover a gazillion Web 2.0 sites you never knew existed
-
Keep it simple stupid
Most Web 2.0 applications add an additional technological or organizational layer to the user’s web experience. Be it managing links with del.icio.us, sharing photos with flickr, or organizing tasks with Backpack, we have to familiarize ourselves with a new technological process and devote time to managing our content. A good Web 2.0 app ought to be lightweight and easy for users to grasp, and clever visual design and copywriting can help remove barriers to entry.
Smart use of layout, color, type and copy can go a long way towards easing the pain.
Big is beautiful
As far as Web 2.0 is concerned, bigger is definitely better. Bigger text, that is. Large text is easy on the eye, and coupled with snappy copywriting makes information easy to absorb. And now that accessibility is cool, it’s possible to be a hotshot web designer and use enormous type. Admittedly this craze for giant text strays too far into Jacob Nielsen territory for my taste - when a web page’s body text is set at larger than 13 point it looks like a “learning to read” book to me!
Breathing space
The layout of Web 2.0 sites might be described as minimal. With a focus on legibility and ease of use, good use is made of white space. White space allows important information to stand apart, provides rest for the eye, and imparts a sense of calm and order. Generous leading also makes text copy easier for the eye to follow. Some Web 2.0 layouts are so minimal that they verge on boring, but designed well, an uncluttered page can be incredibly tasteful.
-
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.