Web 2.0 Design Guide

Web 2.0
A web applications that facilitate interactiv.

1. information sharing
2. interoperability
3. user-centered design
4. collaboration

Such as:

1. social-networking sites
2. video-sharing sites
3. wikis
4. blogs

Technology:

1. Broswer-side
2. CSS
3. Ajax
4. DIV

Features of  Web2.0

Simplicity: 2.0 design means focused, clean and simple. User-Generated Content.

Why simplicity is good?

* Web sites have goals and all web pages have purposes.
* Users' attention is a finite resource.
* It's the designer's job to help users to find what they want (or to notice what the site wants them to notice)
* Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice,
and the less likely a user is to notice the important stuff.
* So we need to enable certain communication, and we also need to minimise noise. That means we need to find a solution that's does its stuff with as little as possible. That's economy, or simplicity.

How?

There are two important aspects to achieving success with simplicity:

1. Remove unnecessary components, without sacrificing effectiveness.
2. Try out alternative solutions that achieve the same result more simply.

Simple navigation:
* 2.0 design makes global navigation large, bold, clean and obvious.
* Inline hyperlinks (links within text) are typically clearly differentiated from normal text.

Why simple navigation is better?

Users need to be able to identify navigation, which tells them various important information:

* Where they are (in the scheme of things)
* Where else they can go from here
* And what options they have for doing stuff

Following the principle of simplicity, and general reduction of noise, the best ways to clarify navigation are:

* Positioning permanent navigation links apart from content
* Differentiating navigation using colour, tone and shape
* Making navigation items large and bold
* Using clear text to make the purpose of each link unambiguous

Bigger text
Making things bigger makes them more noticeable than lesser elements. This effect has been used throughout the history of print design, on headings, title pages and headlines.


Rich surfaces
Realistic surface effects (like drop-shadows, gradients and reflections) help make a visual interface feel more real, solid and "finished".

They may also remind us of certain tactile or aesthetic qualities of real-world objects, such as water droplets, shiny plastic buttons, and marble floors. Making stuff look solid and real can make it look "touchable", which is likely to appeal.

Cute icons
Icons can be useful when they're easily recognisable and carry a clear meaning.


Improvement:

• Layout: the designer's job to help users to find what they want
• Improvement: focused, clean and simple. minimize noise.
• Main menu is important: navigation is not obvious.
• Revolution (800 x 600) is too small: 1024x768 is better
  http://www.w3counter.com/globalstats.php
  January 2010
  1 1024x768 27.16%
  2 1280x800 20.24%
  3 1280x1024 11.03%
  4 1440x900 8.61%
  5 1680x1050 5.57%
  6 1366x768 4.30%
  7 800x600 3.51%
  8 1152x864 2.39%
  9 1920x1200 2.04%
  10 1280x768 1.54%