Web 2.0 – So What’s the Deal, Anyway?

So you hear the term “Web 2.0″ being thrown about everywhere, but what exactly does Web 2.0 stand for, anyway?

Well, I’m here to sum it up for you. Rather than iterate a specific feature or technology, Web 2.0 is more or less a term for particular trends currently seen amongst the Web. While the Web used to primarily be a source for obtaining and receiving information, the Web is now a place for collaborative information sharing, facilitated through Blogs, Social Networking sites (Myspace, Facebook, Twitter, Friendster, LinkedIn, etc.), Video Sharing (You Tube) and Wikis (Wikipedia). Along with these online tools for user collaboration, come specific stylistic patterns, characteristic of most Web 2.0 sites. So, what exactly are these distinctive styles that make these sites “oh so Web 2.0′ish?” Here are some common styles, just to name a few…

• Simplicity -

  As the great da Vinci once proclaimed: “Simplicity is the ultimate sophistication.” And yes, his philosophy is ever-present in today’s hottest designs. Out with cluttered websites filled with absolute nonsense, in with Web 2.0 designs, which reflect clean, airy, simplistic designs, with lots of white space. No need to distract users with lots of fancy extras, simplicity allows the content to be the main focus and allows the content room to breathe. Say ah….

  

• 100% Width Banners -

  Yep, this one is pretty typical of most Web 2.0 sites. Rather than have the background strictly to the center, left or right of the page, banners are now generally tiled horizontally across the page, with the content centered. Previously it was common to have websites aligned to the left of the screen, but the new central layout with full width banners omits that whole “boxy feel” that many sites used to portray.

  

• Multi-Column Layout -

  Or, more commonly known as 3 Step Navigation. 1, 2, 3 Go!! The multi-column layout is a common trend on home pages, where there are three columns below the main header listing navigational options. Occasionally, these three items can be listed in a sequential order, but quite often, they do not. What are the three main activities the user would typically use the site for? To buy something, submit something, or perhaps simply to obtain information? Whatever the three things are, those are most likely the three main home page navigational links, hence the 3 step navigation.

  

• Separate Top Section –

  This is definitely one of the most common Web 2.0 trends – having a clearly defined header. This area should be distinct from the rest of the page, with a bold logo (branding) and navigation area. Generally these prominent top section/header areas of the site are distinguised by their bright or bold colors, which differentiates this area from the main content area, which is typically a neutral or contrasting color.

  

• Big Bold Logos and Large Text -

  Yes, bigger is better! Well, at least with logos and text here… But beware….there IS such thing as a logo being too big! On most current sites, font is at least 12px or greater, with significant line height. Not only does the enlarged text allow the site to “breathe” more and look more aesthetically pleasing and balanced, but it is also better for usability purposes and accessibility. The larger text is better for people that may have visual impairments, and also people that are guilty of sitting too close to their computers (myself included) squinting at the monitor! The same goes with bolder logos, where the company’s name is the main focus, and the image is simple, bold and distinct.

  

• Distinct Call to Action –

  The call to action is the company’s main message, which generally is displayed in the header. Sites that clearly embrace Web 2.0 styles, typically have a strong call to action message stating what you can do on that site. For example, a Real Estate Company’s website may say “Own the Home of Your Dreams,” whereas a Blogging site may say “Sign Up for Free.” These distinct messages are to initially attract the user, and to clearly define the purpose of the site.

  

• Rich Surfaces –

  “But it’s so shiny and pretty…I must have it!” So what exactly are these rich surfaces that Web 2.0 sites embrace? Surfaces such as gradients, shiny glossy objects, 3-D objects, drop-shadows, reflections (such as the shiny table effect), etc., are used on objects, backgrounds and buttons, along with clean content areas give the site that extra pizazz. Rich surfaces can make the site appear similar to objects displayed in real life, which helps add to the aesthetic appeal.
  

• Large, Cutesy Icons –

  Icons are a very common feature of many Web 2.0 designs; however, these can easily be overused. Icons should not be too metaphorical and should always have a commonly known meaning, such as a phone for “contact” or a printer for “print.” Proper use of icons can enhance the site’s visual appeal, and also make the site much more usable.

  

• Star Flashes and Vector Badges –

  Ever seen those cheesy markdown stickers on items at the store? “Only $99!” Yep, these flashes and badges stem from a similar concept and are typically used to draw attention to a particular call to action on a site, such as “free,” “order now” or “call today!” These glossy babies are used to alert the user that something is of significant importance. As with the icons, these should be used sparingly, and only used on something of true significance.

  

Well, these are only a few characteristics of Web 2.0-styled sites in a nutshell. Sure, there are millions of other style patterns out there, but “these are a few of my favorite things….”