There are so many tutorials and guides online that teach you how to make effective use of the web 2.0 design. While most these tutorials are useful, at the same time they kill the originality in web design. For example, most “guides” tell you that web 2.0 is about having a glossy badge, stripes background, and bold fonts. Result? There are countless hundreds of designs with badges, stripes and bold big letters… and they are no different from one another. It does not matter if you make a web 2.0, web 1.0, or web 75.0 design, it all comes down to being original and memorable.

However, if can’t really find anything particularly original to symbolize your design, it’s “safer” to go with the current trends of web design. So here is a very small fragment of web design layout, and how to turn a regular layout into a web 2.0 layout.

This is what we had…

And this is what we are going to do…

We are going to work in Photoshop, using nothing but layer styles; focusing on mild gradients and shadows.

Start off by using the Rectangular shape with rounded corners, and drawing a… rectangle.

What we need to do first is give our rectangle some depth and life. Following the principles of web 2.0 design, only shadows, outlining and light gradients will give us this effect. So go to layer styles, and drop a little mild shadow. We used #96aed6 for this purpose.

To give the shape a little depth (so it won’t look like a flat object), add mild inner shadow, with darker tone (we used #304f82 )

Lastly, its important to add a little outlining. We will use the #FFFFFF white color, since our shadows from both sides are darker, we want to have a light and semi visible line that will contour the shape.

And this is what we got…

However, this won’t give us enough depth. We want to make this rectangle even more visibly curved, as it does not touch the surface evenly, but adding more shadow using the layer styles, or, making the shadow stronger won’t give us the desired effect. Use this horizontal divider offered by dezinpolio.com and add it to the middles of your shape, so that it will “fade” towards the corners, as shown below:

Now, remember we mentioned the bold letters? Web 2.0 makes a good use of fonts, preferable very easy to read, slightly cartoonish and bold. We had a hard time choosing a suitable font and decided to go with “Cooper Std”.

We are doing to add a very mild shadow (#5674a7) and light gradient from white at the top (#ffffff) to light blue (#cdd9de) …

This will give us a very cute baby design.

Web 2.0 is also about a good proportion and while designs are particularly asymmetrical, others are so to speak obsessively symmetrical. I prefer the second type, as it takes less originality and taste to create, all you need is a sense of proportion. Let’s say we add a few buttons at the bottom and side corner of our design…

Does this look good?

No, it doesn’t because the tabs look way too chaotic, so we will make sure the line of the left side tab,”meets” the line of the bottom tab, like this…

Now it looks proportional.

In case you wonder why we missed a step, the layer styles for tabs are almost identical to the ones we used for the main rectangle and same goes for the font and layer styles of the “tabs”. For learning purposes, you can download the PSD file and analyze the process. Remember that all these semi visible gradient, and 1px outlines is often what makes the difference between great web design and amature attempt in designing. Good luck!

Share This Post!

Tags: Design, Downloads, interface, PSD, web 2.0