Friday, January 29, 2010

Web 2.0 and Designing Guidelines

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:


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.


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


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

Diagonal Line Pattern

Gradient background

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


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

Photoshop to make reflected logos and shapes, links :

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

Light box

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

Light box


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 RSS to syndicate your contents, also use the syndication icons in your site to make it easy for your visitor to feed your contents.


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

Bookmarking Section to know about the bookmarking services

Large Fonts

Use large and clear fonts in your web 2.0 design.

Web 2.0 Fonts to choose a good font for your logo

Bright Colors

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

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.

Beta version

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


Wednesday, January 20, 2010

40+ Beautiful Free Fonts for Web 2.0 Design Trends

The web 2.0 design trend is rich with creative and amazing fonts, and the choice is enormous. So today we would like to present 40+ Beautiful Free Fonts for Web 2.0 Design Trends which you can use for web or print design. This collection will sure help you improve your typography skills! Let’s take a close look at some of the most beautiful fonts we’ve found on the web. Some amazing fonts are missing? Let us know!


Eurofurence - preview.


Cicle - preview.


Share - preview.

Reznor Broken

Reznor Broken - preview.

Alte Haas Grotesk

Alte Haas Grotesk - preview.


Abrosia - preview.

Babel Sans

BabelSans - preview.


AUdimat - preview.

Folks TT

Folks TT - preview.


Bedizen - preview.


tondo - preview.


Birth of a Hero

Birth of a Hero - preview.

Everyday Ghost

Everyday Ghost - preview.

Times New Yorker

Times New Yorker - preview.


Grymmoire - preview.


District - preview.


Ginga - preview.


Sidewalk - preview.


Trashco - preview.

Dirty and Classic

Dirty and Classic - preview.

Laundromat 1967

Laundromat 1967 - preview.

84 Rock

84 Rock - preview.

Vintage / Retro

Americana Dreams

Americana Dreams - preview.


Vintage - preview.

02.10 fenotype

02.10 fenotype - preview.


Automania - preview.


Chick - preview.

Deftone Stylus

Deftone Stylus - preview.

Groove Machine

Groove Machine - preview.


METRO-RETRO - preview.


Registry - preview.


Mexcellent - preview.

Swingtime MF

Swingtime MF - preview.

Hand Drawn / Painted

Joe Hand 2

Joe Hand 2 - preview.


advent - preview.

Sunday Morning Garage Sale

Sunday Morning Garage Sale - preview.

Rough Draft

Rough Draft - preview.

Burst My Bubble

Burst My Bubble - preview.

Loved by the King

Loved by the King - preview.


Angelina - preview.

Sebastián Font

Sebastián Font - preview.


Karabine - preview.

Loveable Scruff

Loveable Scruff - preview.

AE Scrawl

AE Scrawl - preview.


Edo - preview.