Wednesday, July 25, 2007

Web 2.0 Design Principles

Hello All,

In this post i would like to discuss about Web 2.0 design principles. Comments and Suggestions are welcomed. As per our session on Web 2.0 the fundamentals of design are:
1. Website should be compatible with Google A rated browsers. [e.g. IE 5.5 and above, FF 1.0 and above, opera, and safari]

2. Fluidity [Crtl + (+), Crtl + (-)] should increase the font size. Firefox displays it correctly.
a. Use em units rather than px units while specifying font size in CSS.
b. Font size should be between 11 to 13 units
c. Non IE Browser: X/13 em
d. IE Browser: X/13 * 0.9759 em
e. Use lesser images.
f. Avoid tables, instead use divs
g. Change in screen resolution shouldn’t break up the page layout.

3. Simplicity
a. Areas of action should be clearly evident. Each website has some goals and each web page has some purpose, these should be clearly evident.
b. Central align pages, with simple straight fonts.
c. 2-3 Columns max, bottom of the page can have more columns
d. Central Column should have main content, which actually emphasize on the purpose of the page.
e. Top section should be clearly separated, i.e. making the top area for branding and navigation.
f. Make it more visible by putting on vibrant colors.
g. Colors used should be soothing to eyes neither too flashy nor too dull.
h. Navigation should be clearly shown by bands, bold clear fonts.
i. Separate navigational links from normal text, this includes for inline hypertexts too.
j. Hyperlinks should be in different color and size, may be putting a highlight color is also feasible.

4. Logos
a. Logo should be clear and sharp, emphasizing the statement.
b. Logo should work in its own words in a visual way.
c. Color combination should be visible on any background. Remember, that same logo can be used for any purpose, be it printed page or web.
d. Lingo’s and statements in bigger text.

5. Main Introduction
a. Headlines in different fonts and colors.
b. Use color gradients and reflections (glassy effect, water droplets, shiny surface etc.)
c. Icons should be big and catchy.
d. Rounded Corners on the images and page

These are few of the design principles that are used for Web 2.0 compatible web page design. Please share your views and comments on this.

1 comment:

Varun said...

Examples of websites that are web 2.0 compliant would be of great help to the readers