Web 2.0 design

Web 2.0 design means "cliche" to many. Designers aching to fit into the current aesthetic are overusing rounded corners and pastel colors on new sites. But at its core, Web 2.0 design is about building services that are clean, simple, fast, and interactive. Designers who get this are making sites that are leagues ahead of those from the previous generation.

Simplicity
The hallmark of Web 2.0 is simplicity. This is both a discipline and a byproduct of economics and technology: If you want to build a site quickly and for little money, your best bet is to strip extraneous features out of your product. And if you want a Web site to load quickly, you want a simple page.

WuFoo
Click to enlarge

This has led to clean and simple products. A Webware favorite is the forms creation tool WuFoo, a database product masquerading as a simple forms builder. What WuFoo lacks in features it makes up for in ease of use. It makes the creation of a Web forms easy enough for anyone to use it.

37 Signals' Basecamp takes a similar approach to team management. It's a tool workgroups can use to keep everyone in sync on their projects. That's a tough thing to simplify, but Basecamp's open design makes it much easier to see who's supposed to be doing what than previous systems have offered.

Zillow
Click to enlarge

Visualization
At the other end of Web 2.0 simplicity is richness, especially in data visualization. Today's Web browsers, juiced up by Flash, Ajax, and mashups, can display a huge amount of onscreen information, tailored to the individual user.

Facebook FriendWheel
Click to enlarge

Zillow provides deep data on local housing sales. Mashing together Google maps with sales data that the service collects itself, Zillow makes it very easy for home buyers and sellers to get the temperature of a local market, and appropriately negotiate home value. Most people are not aware of the amount of data they are taking in when they use Zillow, because the map-based presentation of the financial data is so intuitive.

Geni
Click to enlarge

Personal connection
One of the big remaining challenges with Web design is how to represent, in a comprehensible fashion, the complex and interconnected networks of friends we build on social sites such as Facebook. Scrolling through pages of listings is unrewarding. Some new services help you visualize who's who in your network. For example, the Facebook FriendWheel app shows you a giant circle of all your friends, with lines connecting the relationships. More usable designs can be seen at the genealogy site Geni, which offers a very Web 2.0 interface to building a family tree.

TrustedOpinion
Click to enlarge

Social network visualization can be used for other purposes. For example, the recommendation site TrustedOpinion shows a "radar" view of your friends and friends-of-friends, and lets you quickly see those you know who have reviewed a movie you're interested in.

Beyond the browser
Web 2.0 is not just about the browser. Web apps are breaking out of it. Technologies like Adobe AIR are making possible the easy creation of Internet-based applications that don't live inside the confines of a browser and are not constrained by its user interface.

FineTune
Click to enlarge

The music site FineTune and the microblogging service Pownce, for example, both have AIR interfaces to their services. If you use the services, these standalone apps are completely optional, and they work more like traditional software than the services' Web sites do. At the moment, most standalone apps that link into Web sites are not as full featured as the original Web versions, but they're mostly easier and faster to use. We may see major sites come out with their own standalone applications in the near future.

Pownce
Click to enlarge

And even browser-based applications are becoming more like traditional desktop applications. With many e-mail services like Yahoo Mail, your in-box is no longer put onto multiple pages. Instead, you get a continuous list, as you would in Outlook. You also get desktop-like interface touches such as custom right-click functions and drag-and-drop support.

Hot design discussions now on CNET

More on design from CNET.com

• Free online course: Customize your PC
• Video: Samsung UpStage's split personality
• Widgets and desktop enhancements
• Free design software downloads
• Design duel: Dreamweaver CS3 vs. Expression Web
• Web design software reviews
• Learning Hub: Design and imaging