4 Small Web 2.0 Design Tricks that Make a Big Difference

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.

Line with 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

Depth in Line Depth Line Depth Line

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.

Plain, Boring Color Box

Reflective Gradient Shine

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.Tutorial
  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.)Tutorial
  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.Tutorial
  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.
    Reflective Gradient Shine

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.

Cheesy Drop Shadow Stylish Drop Shadow

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.

Square Box Better Better

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.

Written By Kayla

Kayla Knight is a 20 year old college student, part-time web developer, freelancer, and blogger. Webitect is where she spends too much of her freetime, sharing interesting finds and valuable resources. Be sure to check out her portfolio.

9 Comments

  1. Jack

    July 2nd, 2009 at 08:58 am

    I dunno, this seems a little old now?

    Though I completely agree about the drop shadows… there are a lot of designers have still haven’t realised that light simply does not work like that and use HUGE black shadows around objects.

    Thanks for the post though – I’m enjoying all of these so far.

  2. clairessa

    July 2nd, 2009 at 09:31 am

    nice. some was a bit explanatory about the ugly drop shadow but this will definately give some help to young designers that are just starting. I like the lines point. very nice point :)

  3. Adam Brewer

    July 2nd, 2009 at 09:44 am

    Basic ideas but effective nontheless – a useful post, especially for less experienced designers!

  4. Kyan Blue

    July 10th, 2009 at 03:42 pm

    The first tip was the most useful, since it’s a subtle but clever effect, and you included some good examples for where it was used.

    The other tips, I would have preferred better examples…the lime green doesn’t make it look too good, either.

  5. priyanka

    July 13th, 2009 at 04:28 am

    Simple and Smarter..WEB 2.0 tricks..

    I find them useful..

    Looking for more

  6. Debuglife.com

    July 24th, 2009 at 12:47 am

    very useful post. I am in the process of redesigning my site, so i hope to incorporate these tips.

    however, i could use some help with #4. now quite sure how to do that.

  7. Kevin May

    September 17th, 2009 at 10:59 am

    Very basic design tricks, most people know them already.

    *Web 2.0 has nothing to do with how something is designed visually.

  8. Morgan & Me Creative

    November 24th, 2011 at 11:15 am

    Old or new, certainly still good knowledge to possess otherwise. Thanks for the tip!

  9. web designing course in chandigarh

    January 22nd, 2013 at 12:44 am

    thanks,
    this good help the blog good knowledge to web design possess otherwise .

What Do You Think?