Web 2.0 design and layout tips

Ben Hunt at webdesignfromscratch has posted an excellent article on current Web 2.0 design trends, giving some recommendations on features that make a website appealing and easy to use.

Ben gives some examples of good Web 2.0 sites, including LinkedIn, Mozilla.org, and Protolize, as well as some tips which we list after the jump...

Simple layout - Ben point outs that simple pages work better:

“These pages read in a straightforward way from top to bottom, and you don't find your eye skipping around trying to work out what to look at. It's a much calmer and more solid browsing experience than in times gone by.”

Centered orientation - The examples cited are all laid out around a central axis:

“The wisdom has always been that we should try to get as much information 'above the fold' Liquid layouts achieves this.”

“However, today we seem to be more comfortable with scrolling, and we're willing to put up with scrolling for the benefits of increased white space and line height.”

Soft, neutral background colours

“All the hotties have a plain background, the most popular being white and greyscale fades. These give a cool, neutral, soft base against which you can flash strong colour to draw the eye.”

Plenty of white space

“Your eye needs space round stuff to help you clearly and cleanly identify things. In general, the more white space the better. It's very rare that I look at a page and think: "Gosh, they really need to cram that page up a bit!"

Nice big text

The most important text on the page should be bigger then normal text:

“Like the other design techniques we've seen, it works when used in moderation. If all your text is big, then none of your text is big.”

“Use bigger text to help your visitors see quickly what the page is about, what's most important, and figure out where they want to look next to find what they want.”

Further Reading:
Current Web Style – webdesignfromscratch.com
Measuring Web 2.0 – The death of the page impression

Add to Del.icio.us  |  Digg this  |  Add to reddit  |  Add to Y! MyWeb