Designing Your Website for Web 2.0
September 6th, 2007 | Posted by Ben KeoghThe term “Web 2.0? has clearly taken hold but there are still disagreements about just what Web 2.0 means, with some people decrying it as a meaningless marketing buzzword, and others accepting it as the new conventional wisdom.
The concept of “Web 2.0? began with a conference brainstorming session between O’Reilly and MediaLive International. During their discussion, they noted that far from having “crashedâ€, the web was more important than ever, with exciting new applications and sites popping up with surprising regularity. What’s more, the companies that had survived the dot-com collapse seemed to have some things in common. Could it be that the dot-com collapse marked some kind of turning point for the web, such that a call to action such as “Web 2.0? might make sense? O’Reilly and MediaLive believed so and therefore, Web 2.0 was born.
What is Web 2.0?
According to O’Reilly himself, the compact definition of Web 2.0 is:
“Web 2.0 is the network as platform, spanning all connected devices; Web 2.0 applications are those that make the most of the intrinsic advantages of that platform: delivering software as a continually-updated service that gets better the more people use it, consuming and remixing data from multiple sources, including individual users, while providing their own data and services in a form that allows remixing by others, creating network effects through an “architecture of participation,†and going beyond the page metaphor of Web 1.0 to deliver rich user experiences.â€
Web 2.0 has been described as “the Web as platformâ€; for corporate people, the Web is a platform for business. For marketers, the Web is a platform for communications. For journalists, the Web is a platform for new media. For geeks, the Web is a platform for software development and so on. Web 2.0 refers to a supposed second-generation of Internet-based services that let people collaborate and share information online in previously unavailable ways to become a much more interactive Web.
Web 2.0 is a term referring to the ongoing transition to a full participatory Web, with participation including both humans and machines. Weblogs, linklogs, wikis, podcasts, RSS feeds, social software, Web APIs (Application Programming Interfaces), Web standards, online Web services, and others are all recently-developed concepts and technologies as contributing to Web 2.0. Specific examples are eBay, Craigslist, Wikipedia, Del.icio.us, Flickr, Skype, Dodgeball, Amazon reviews and Adsense.
It is important to recognize that “Web 2.0? is not anything other than the evolving Web as it exists today. It is the same Web that we’ve had all along. But the problems, issues, and technologies we’re dealing with are in many ways different, and so using the term “Web 2.0? is recognition that the Web is in a constant state of change, and that we have entered a new era of networked participation.
Visual Elements
Now we are done with the definition, let’s talk about designing your Website for Web 2.0. Designing has essentially become one of the key competitive advantages. Why has design become so important - all of a sudden? Or was it always important? Many Web 2.0 websites assert priority to their visual design and aesthetics, with the intention of providing a clear, well-organized and visually appealing site.
Your Website can be so much more than an information resource. Your web presence is a place. Today’s web designers are rapidly moving away from boxy designs to flexible curves. When designing for today’s Internet, the common design techniques include gradient backgrounds, rounded designs, nice big text, glassy effects, and bright colors. I also included some links below on tutorials that will help you create your own design.
- Gradient Backgrounds
- Large Colorful Icons
- Mirrored Logos
- Nice Big Text
- Rounded Corners
- Color
Many use solid background colors. But what if you want to use patterned or gradient backgrounds? Perhaps the most notable trend for Web 2.0 websites is the use of fading two colors together to make a gradient background. This technique is often applied to the background of the site as well as being used behind individual articles, posts, and even behind the logo.
Tutorials on creating gradient backgrounds:
http://9rules.com/blog/2006/08/a-gradient-tutorial/
http://www.ndesign-studio.com/resources/tutorials/abstract-background/
http://www.loriswebs.com/tutorials/gradientbackground.html
Sticking with the big theme, many Web 2.0 sites utilize a large colorful icon that often looks like a seal. These are used often to denote “beta†status or to emphasize a certain feature of a website.
A common trend with Web 2.0 logos is to mirror the text upside down below the original text while, at the same time, fading it into nothingness. This often makes the logo look like it has a reflection below it and is usually considered a staple of Web 2.0 designs.
Tutorials on creating mirrored logos:
http://www.photoshoplab.com/web20-design-kit.html
http://graphicssoft.about.com/library/uc/tring/mirror/uctring_mirror.htm
With the increased popularity of blogs, using large fonts for titles has become a cornerstone of the Web 2.0 visual movement. You can start using plenty of oversized text to make important messages stand out. Of course, you do not want all of the text on your web site to be super sized, but make sure that the most important text on the page is bigger than normal text.
Tables and square boxes are now gone while rounded corners are all the rage these days on the Web 2.0 era.
Tutorials on creating rounded corners:
http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml
http://www.alistapart.com/articles/mountaintop/
http://www.alistapart.com/articles/customcorners/
http://www.web-20-workgroup1-swicki.eurekster.com/rounded+corners/
It’s actually all about the color that you can attract investors or sell to the even bigger guys. Web 2.0 sites are strongly defined by their colors. They nearly always use bright and cheery colors - lots of blue, orange, and lime green.
Download color palette:
http://miles.burke.id.au/blog/2006/02/03/the-web-20-secret-weapon/
Other common design characteristics include the use of tabs, reflections, glassy effects, large buttons, and big text boxes for submission forms. Some people often mistakenly identify this particular visual style of elements as the web 2.0 style. The visual elements of the site do not determine its web 2.0 status, rather the technologies used determine the web 2.0 status.
Although we have discussed many of the design elements associated with Web 2.0, this change is much more than just an aesthetic transition. Web 2.0 is essentially about a transition in the way we experience the Internet. The new Ajax programming base allows web masters to create an architecture of participation for their users. Web 2.0 refers to the ongoing transition to full participation on the Web.
