Datafeed Management by Three Legged Toad

The Web 2.0 Style

Editor?s Note: In this, the third installment of our series on good design, Yahoo! visual designer Lynn Chang (right) discusses the Web 2.0 style and how to create it to offer your users an experience that will help keep them coming back.

What is Web 2.0?

In a nutshell, Web 2.0 is where the Web becomes the intersection between people and applications. Web 2.0 services are, in essence, online applications that help you share information and accomplish certain tasks, the way that desktop applications did traditionally?storing and sharing media (Flickr, Yahoo! Video), disseminating information, (WordPress, Typepad, del.icio.us), promoting real-world events (Upcoming.org), etc.

Web 2.0 services are not only changing how we do things, they?re changing the style of the Internet and of the web sites that we encounter. In the Web 2.0 world, the old rules of desktop-based software, which often required 3,000-page manuals to understand, don?t apply. With Web 2.0, simplicity is the key.

Whether your site is a an earth-shaking Web 2.0 app or a site simply designed to help bloggers add bling to their blogs, the following lessons can help make your experience more intuitive and your site more popular, helping to keep users coming back.

The Web 2.0 Style
Web 2.0, as a design style, can make your web site look updated, eye-catching and modern. While there are no official standards for what makes a web site ?Web 2.0,? there are certainly a few common characteristics. Web 2.0 design uses larger, bolder fonts and greater contrasts in color for easy user comprehension and navigation. The Web 2.0 style is intended to make completing any task seem easy.

Here, we pick out the six distinctive features that can make a web page look fresh, appealing and totally “Web 2.0.”

Layout
With the advent of scrolling mice and trackballs, many left-oriented and liquid layout (full-width) websites have been replaced with center layout design, with increased font size and lots of white space. Web sites are more likely to be spread downward than be jammed into one screen.

Example: icebrrg

Gradients
Gradients are another popular design element of Web 2.0. They?ve become a lynchpin of modern web design. The basic gradient is very versatile, and provides everything from depth and dimension to shine and polish. (Here’s a tutorial on how to create gradients in Photoshop.)

Example: Sizeasy

Strong and Contrasting Colors
Web 2.0 sites are strongly distinguished by color. They always use bright, almost fluorescent, cheery colors?lots of blue, orange and lime green, combined with a lot of white space to create a fresh, energetic and clean look. Here?s a sample of a Web 2.0 color palette.

3-D Icons
Many Web 2.0-style web sites include large, colorful icons, sometimes with reflections and drop shadows to give them a three dimensional appearance. There are many services across the Web that specialize in providing icons that you can take advantage of.

Rounded Corners
The days of tables and square boxes are gone. The Web 2.0 era has ushered in the pleasing sight of rounded corners. This may not sound like much, but they can keep your site from looking like some clunky Commodore 64 application and put your users at ease. Below are some links to tutorials that will get you started creating your own rounded corners from Webcredible, A List Apart and SearchParty.

Example: Blog.com

Oversized Text
Web sites that cram way too much text in tiny fonts are going the way of the dodo bird. In their place, friendly, oversized fonts have come into style. Nowadays, Cascading Style Sheets (CSS) give us much finer control over the appearance of text at larger sizes. They enable you to start using plenty of oversized text to make important messages stand out. Of course, not all of the text on your web site should be super-sized, but the most important text on the page can be bigger than your normal text.