1. Lines and Borders with Depth

This feature is often used in amazing sleek web designs, but overlooked by beginners trying to create a similar feel. An example of this effect is below. On the left are two lines, that could possibly be used as a line or border in a web design, and on the right is the same, but with a bit more depth.

As anyone can see, the line with depth is a lot more visually appealing.

How to Create a Line with Depth

1. Create a new layer on top of the background color.
2. Instead of a 1-pixel solid color line, create two lines: A 1px black line on top of another 1px white line.
   (For a horizontal line, as one can guess, just put a 1px wide black line next to a 1px wide white line.)
3. Set this new layer to overlay, then merge the new layer on top of any bottom layers as necessary.

Examples Used in Web Design

2. Reflective/Gradient Shine

Anything that looks glossy can just about be considered Web 2.0. The use of a few short techniques to add gradient and gloss can spice things up. The example below is what it looks like in action, just applied to a rectangle of solid color. The same effect can be used on logos, the background for content areas, text, images, and more.

How to Create a Reflective/Gradient Shine

1. Create a new layer over the original image. (In this case, the plain green rectangle.)
2. Using the Elliptical Marquee tool, create a portion of an ellipse on the top part of the rectangle.
3. Create a white to transparent gradient vertically upwards. Make sure the white is on the bottom. (To create a completely vertical gradient, hold down the shift key.)
4. Change the layer’s blending mode to Soft Light.
5. Press “Ctrl [Cmd], Shift, I” to invert the current selection. Then, create another new layer.
6. Create a black to transparent gradient in this selection, with black on the bottom.
7. Change this layer’s blending mode to Overlay.
8. Put the opacity of both gradient layers down by about 50%. Alter the opacity of both until the image looks right.
   

3. Drop Shadows

Drop shadows are used surprisingly often in Web 2.0 design, despite their bad reputation for being old-fashioned and cheesy in the web design world. This is because they are great for adding a sense of realism to a design, like a realistic sense of a flat piece of paper (or other material) setting on another flat surface. That’s the effect we get on the right.

However, on the left, it’s easy to see the effect is cheesy, old-fashioned, and should never be used. On the left, the dropshadow gradient is so large that it seems as though the green block is unnaturally floating above the flat background.

The trick is to use dropshadows to make things realistic. Don’t use dropshadows just for the sake of using them.

4. Rounded Corners

They’re not included in the new CSS3 for nothing. Rounded corners are often times a great way to add a bit more appeal to a design, especially a modern design. Many sleek and modern product designs often feature smooth curves and edges. Blocky feels old and clunky — smooth is new and modern.

Wrapping Up

Not all of these have to be used simultaneously for a great Web 2.0 design, but they are a closer look at some simple tricks one can try to see if the effect will improve a sleek web design. In the end, though, good design comes from experience and a good eye for design.

These are, of course, very basic principles and are meant for beginners in web design. Anyone looking for the next step, or for anyone looking for more advanced techniques, should check out How to Accurately and Effectively Research a Web Design Style. The article goes over how to discover your own techniques when learning Web 2.0, or any other design style for that matter.