Web 2.0 layouts

21 11 2008

For years one strong rule that influenced designing a web layout was to avoid a vertical scrollbar as far as possible. The user was expected to lose interest if the content is not right in front (without scrolling down). So in order to achieve that, we would design a layout and then try to cram content into it, have hidden menus, small text, small logos etc.

However, times have changed and over the years the user has become quite scrollbar friendly. And the result is that we can design a layout that is more user friendly than ever. These layouts generally follow a similar trend and are termed “Web 2.0 layouts” as they evolved in 2006 at the same time “Web 2.0” became a buzzword. Some of the characteristic features of these layouts are:

  • Bright colors
  • Clean
  • More whitespace
  • Big fonts
  • Center aligned
  • Fixed width
  • Horizontally divided in columns
  • Use of gradients
  • Less navigation items on top
  • Detailed footer
  • Badges and Flowers (to highlight a section/feature)
  • Top part has less content and more marketing info to attract users
  • More content as the user navigates down the page
  • Rounded corners for boxes
  • A very short sign up form. User can update the detailed profile info later.
  • Text based logos with reflection
     

Following are some very good examples:

Firefox:

Firefox

Firefox

 

Cork’d:

Corkd

Corkd

 

You can study the Web 2.0 layout trends in more details at the following urls:

http://www.styleignite.com/articles/view/analysis-of-web-20-design-layout-trends-part-1-clean-colorful-and-horizontally-divided

http://webdesignfromscratch.com/current-style.php