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.

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.

 

前一阵子维基百科的Web2.0条目包含了一节内容，专门描述Web 2.0的视觉元素，讲述了渐变色、绚丽的图标、反射效果、阴影以及大号字体等等。

但是几天之后维基人投票决定撤掉“视觉元素”这一部分。推究其原因，可能是Web 2.0的特性不能通过一系列的视觉规则来精确地定义。如果 Web 2.0 被理解为一种内容生成和发布的途径，那就没必要将其禁锢在视觉效果的框框里。

尽管如此，事实上大多数 Web 2.0 网站都有某种独特的艺术风格。也许维基人觉得这不属于Web 2.0的讨论范畴，但我却认为这十分必要。让我们开始 Web 2.0 的视觉之旅，看看所谓“Web 2.0风格”起着怎样的作用。

请相信我是Web 2.0

完美的 Web 2.0 依靠着访问者的力量。用户可以为Web服务制造内容，通过流行的点对点方式像“病毒”一样传播，并依照他们的意愿和喜好来提高内容的质量。

但是要让访问者为Web应用程序付出时间和内容，首先需要让他们相信你。为获取人们的信任，绝大多数 Web 2.0 网站都通过绝妙的设计给我们带来了友好、亲切的印象。