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.
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.
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.
转自：http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/