Monday, January 1, 2007

Your Web 2.0 Guidelines

Note:

This article is posted by Web 2.0 Sites

Introduction:


Web 2.0 is the next version of web sites, the world is going to change their
websites to be more attractive, simple, usable, scalable, bright and sharable by
designing it with web 2.0 standards. web 2.0 is not changing the web design
concept it's also changing the web marketing concepts, programming
concepts, and usability concepts.


To be able to imagine what is web 2.0 look at the following logos:













Web 1.0 LogosWeb 2.0 Logos

Now we are going to create our web 2.0 site, after reading this tutorial you will be able to design your web 2.0 logo, create web 2.0 site, make your site rich in contents, publish your site and distribute it.


Design Considerations:


Simplicity


web 2.0 design should be simple free of noise, with little
contents, more images and large fonts. look at the following screenshots it will
help you to imagine what is simplicity in design:













Centralized Contents


The contents of the page should be in the
center of the page like the following samples, as you can see the contents are
in the center of the page and the left and right space are filled with gradient
background








Navigation


In web 2.0 the horizontal navigation is the most recommended style, the
navigation should be in large fonts, and very clear.
























Backgrounds


The backgrounds in web 2.0 have several forms, either to be gradient
colors or diagonal line pattern.














Diagonal Line Pattern


Gradient background



Use
photoshop to make the gradient or diagonal line pattern, links :

Gradient tutorial
,
Diagonal
Line Pattern tutorial


Reflection


One of the web 2.0 standards is to make some reflection on your images. Look
at the following screenshots


















Reflection on white background

Reflection on solid color
Reflection on solid object


Use
Photoshop to make reflected logos and shapes, links :

Reflected logo tutorial


if you don't know how to use Photoshop, use Web 2.0 Logo
Generator


Round Corners


The new style in corners is to make the corners rounded, in contents boxes or
in buttons














Round Corner Box


Round Corner button



Use
Photoshop to make round corners, or use
Round Corners Generator


Light box


Light box used to show large version of an image,
warning message box, large map and many other applications.




Light box



Use
Light
Box Library
to make this feature


Ajax


when we say web 2.0 we usually say Ajax with it, Ajax features
will make your site more usable, attractive and fast. Don't forget the Ajax
indicator.





Use
Ajax Load generator
for the Ajax indicator, and use

Ajax Beginners Tutorials
to learn Ajax


Syndication


use RSS to syndicate your contents, also use the syndication
icons in your site to make it easy for your visitor to feed your contents.





Have a look
at Rss
Section
to know about the feeding services


Bookmarking


use digg, delicious and reddit icons in your site to make your
visitors bookmark your site





Have a look
at

Bookmarking Section
to know about the bookmarking services


Large Fonts


Use large and clear fonts in your web 2.0 design.




Use

Web 2.0 Fonts
to choose a good font for your logo


Bright Colors


Use bright (strong) colors in your web 2.0 design.






Color schemer
will help you to choose your colors, and use the
web 2.0 colors
pallet to choose the colors


Introduce Your Service


it's a good idea to put an introductory text about your service
in the home page, put it in large text, bullets and support it with images and
icons

























Summary up the contentsLarge text

Bullets and imageLatest Products


Web 2.0 star


You will find the web 2.0 star in most of the web 2.0
sites. usually used in numbering, new icon and beta icon.















Use
web
2.0 star tutorial
to make the web 2.o star


Beta version


most of the web 2.0 services are in beta version, don't















Users contribution


Let your users contribute in your contents either by making
comments section, wiki section, contents sharing.


Examples




  • Wikipedia : wiki based



  • Digg : contents sharing



  • wordpress: comments sections and ratting




Get Some Videos


One of the best ways to make your site more attractive and rich is to embed
some videos in it, you can check the
video section to
see the several web site that can help you to upload and embed videos.


I recommend
YouTube because
it's the most rich one, and it includes many videos in all categories.






YouTube Sample video



Note:

This article is posted by Web 2.0 Sites