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

Advertisements

Actions

Information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: