One of the greatest misconceptions among designers is what “Web 2.0″ means. Clearly feeling left out, web designers have decided to take things into their own hands and bring a Web 2.0 slant to design. So forget about the technology, mind frame and fancy words like “long tail” while I dissect some of the common design elements for the latest rage of websites.
Gradients
A lot of Web 2.0 websites use a very simple layout without much design at all. But you would be hard-pressed to keep out of it altogether. One of the most basic elements of Web 2.0 design is a gradient.
The recent popularity has more to do with the bandwidth surfers are becoming accustomed to. With more than half of Internet users browsing with a high-speed connection they can also download images much quicker. Since gradients require the use of an image it’s taken time to adapt. But wait no longer! One of the easiest ways to punch a website is with a properly placed gradient.
Diagonal Lines
Seems like an annoyingly simple element to consider an important factor in Web 2.0 design doesn’t it? Just add diagonal lines. Before you click away from this page give me a second to explain. Similarly to the use of gradients diagonal lines has a lot to do with designers being more bold with the use of imagery in their layouts.
Besides being a great tool for breaking up different elements within a design, diagonal lines an add depth immediately. The most common use of diagonal lines is in the background. Try putting your solid blocks of content on top of a diagonal background and watch your layout come to life!
Large Text
If you ever visited a designers portfolio site pre-2000 you’d know that the trend was to use lots of space and tiny text. Very sexy! I believe the use of large text in Web 2.0 design is the result of collaboration between designers and coders. A large part of Web 2.0 is creating websites that are easy to use and easy to grow. That means lightweight, dynamic sites bring us back to some of the limitations of Web 1.0.
Fortunately, we weren’t learning how to design for the first time. Making content easy to read in an organized fashion has always been a problem and using large text has always been a great tool. A website full of large text doesn’t work, but the balance is key and can display how good a designer really is. When you want something emphasized on a page use large text. When you want to create a visual hierarchy use large text. When you want something to be easy to read… you got it, use large text!
Soft Shadows
Probably one of the most beneficial increase in Web 2.0 design is the use of soft shadows (AKA drop shadows). Despite being trapped in a 2-dimensional world designers can make website visitors believe they’re seeing 3 dimensions. A soft shadow is one of the best ways to do that.
Make a button pop off the screen with an appropriate placed shadow. Emphasize specific elements on the page with a shadow under them. But if you want to go that extra mile try combining a soft shadow with one of the other Web 2.0 design elements. Warning! If shadows are used with diagonal lines you may impress yourself to the point of extreme satisfaction! Please do not try with too much caffeine.
Rounded Corners
When websites switched from pure HTML design to integrating more graphical elements designers were no longer limited to square boxes for everything.
Like any element, HOW you use it is much more important than the element itself. The proper use of rounded corners can be a cool effect and help separate your website from the next guys’. However, most of the benefits of this Web 2.0 design element come down to preference. My surfing has led me to excellent Web 2.0 websites with and without rounded corners.
3D Icons
Apple.com is commonly credited with the advent of 3D buttons. However, Web 2.0 designers have been using it long before them. Like a lot of the things they do, Apple did it right and made this glassy button super popular. Because of it’s stronger reliance on graphical elements this, more than the other elements, has benefited from the greater bandwidth for downloading information from a website.
Adding a highlight with appropriate lighting color shifts you can make something very realistic. Combine 3D effects with a shadow and you might confuse a website visitor into thinking it’s real.
Reflections
Similar to 3D icons, reflections create a simulated real-world scenario to an otherwise flat medium. By suggesting that certain elements have a perfect reflection visitors to a website get a sense of a futuristic look and feel, exactly what Web 2.0 stands for.
The key to success with reflections is its sparing, appropriate use. Unlike shadows or rounded corners a novice designer can easily overdue this cool effect.
The cool thing about each of these elements is that they can be used individually or all at once. You can usually tell when a seasoned designer has had their hands no a website design because they can blend together all of the elements to create a Web 2.0 design that knocks your socks off.
It’s difficult to officially combine the popular term “Web 2.0″ with anything design related but it’s certain that there is a next generation of website designs. So in that sense these elements are the most popular keys to a good Web 2.0 design.
No tags
chris · June 18, 2007 at 10:49 am
http://news.yahoo.com/s/pcworld/132787;_ylt=AkqNgIh9WW38a4kqDnAVDT5hr7sF
Possible upcoming websites to watch.
» The Rules, 2007 · June 20, 2007 at 9:03 am
[...] 2.0 is now coherent enough to have standards? We used to joke about rounded corners and gradient blends being the rule, but something more has indeed emerged. O’Reilly defined Web 2.0 by example, [...]