What Defines the “Web 2.0″ Aesthetic?

MIHMORANDUM NO. 8 | May 4th, 2007Reader Comments (1)

The term “Web 2.0″ has been around since 2004, created by Tim O’Reilly to refer to companies and technologies that were helping to shape the next iteration of the World Wide Web. Collaboration, input from users, openness to blogging, extensive database management, and realization of The Long Tail all define Web 2.0 from the economic and theoretical sides.

But what about from the design side? Most 2.0 Websites share a similar look, feel, and user experience; the following are attempts to clarify their common threads.

Color Palette
The “official” Web 2.0 color palette is baby blue, lime green, yellow-gold and reddish-pink. An overwhelming number of sites at the forefront of the technology and social media implications of Web 2.0 have adopted this scheme, which has encouraged many sites who hope to be labeled in the same sphere to turn to the same palette.

Examples: Digg, Del.icio.us, Reddit, Technorati

Color Saturation
You won’t see any pastels or shades in Web 2.0-branded sites (or very few of them). Bright colors, particularly in logos and headers, lead the way. Many Web 2.0 sites use gray or a close tint of gray as their secondary background tones rather than a true secondary “color.”

Examples: Last.fm, Rollyo, Ask, Feedburner

Whitespace
Because the typical monitor resolution has expanded beyond the original 640X480 or 800X600 that existed for “Web 1.0,” designers have more screen real estate with which to lay out their content. With increased screen resolution, sites designed in the 1990s and early 2000s feel unnecessarily cramped in terms of their spacing, navigation, and photography.

As they’ve become more comfortable with the medium, designers have learned to space key areas of content farther apart. And in some cases, Flash or AJAX technologies can be used to present multiple pieces of content in a single portion of the screen. All of this helps page layouts breathe better, even in fixed-width layouts (i.e. those that do not expand as one enlarges his or her browser window) with lots of content.

Examples: Google, Zillow, Judy’s Book

Logos
Web 2.0 identities invariably use sans-serif fonts that are often rounded at the edges. Apparently, letters with hooks on the end are “SO 20th Century” for CEOs and marketing departments in the Web 2.0 economy. Off the top of my head, WordPress, Google, and Yahoo are the only notable logos from the world of Web 2.0 that use a serif typeface…and yet they’re three of the most successful Web 2.0 properties…hmm…

Examples: YouTube, MySpace, Skype, Meebo

Visual refinements
Most designers in the Web 1.0 world were happy with flat backgrounds, hard edges, and solid colors and patterns. The design software (Adobe Photoshop and Illustrator, primarily) hasn’t necessarily added features or gained sophistication in the last five or six years, but designers seem to be taking increasing advantage of the potential those programs offer. Glassy reflections and gradients, subtle borders and shading are all prominent features of many Web 2.0 sites.

Examples: SEOmoz, Windows Live, Swicki

Text-to-graphics ratio
This characteristic is an example of design sensibilities intertwining with business necessities. Because of the rise to prominence of the search engines (and their corresponding inability to read text contained in images), the drive has been to use as few graphics and as much searchable HTML text as possible in recent years. While it was not uncommon to find sites that were 90% images and 10% text back in the late 1990’s, we’re now seeing a typical balance much closer to 95% text and 5% graphics. And of course with all of the user-generated, dynamic content out there such as reviews, product listings, and blogs, it’s simply not practical for someone to take the time to embed all of that text into an image using a fancy font.

Examples: Yelp, Boulevards, Craigslist, Wikipedia

Typography
As a corollary to the previous characteristic, designers are getting much better at picking and choosing their use of images, while still maintaining visual variety by alternating the font faces and sizes they use in HTML text. Georgia/Times New Roman and Verdana/Arial exist in harmony on a number of Web 2.0 sites, and font size that corresponds to the hierarchy of content has become a common graphical device.

Examples: WordPress, New York Times, Newsvine, A List Apart

Does anyone have additional characteristics that help define the quintessential Web 2.0 aesthetic? Leave a comment or two!


More great reviews of Web 2.0 aesthetics and websites:
http://web2logo.com/

http://www.fontshop.com/fontfeed/archives/the-logos-of-web-20/

http://www.seomoz.org/web2.0

http://www.webdesignfromscratch.com/


My thoughts on the components of the Web 2.0 aesthetic (June 18, 2007)

One Response to “What Defines the “Web 2.0″ Aesthetic?”

  1. View Private MySpace Pictures says at

    Great! looking forward to more entries from you..

Leave a Reply

You are here: Home > Blog > What Defines the “Web 2.0″ Aesthetic?