Wednesday, December 2, 2009

Subtle Details in Web Design

I found a great article on the web design ledger called Subtle Details: Taking Web Designs to Another Level.

I often stumble upon beautifully designed websites and cannot pinpoint what exactly makes the design so magnificent. This article gives some really great examples of subtle details that significantly improve the webpage design.

The first point is "Pixel Perfect Line Work." By using a simple 1 px line along the top of a navigation bar the designer is creating an illusion of depth. When a lighter color line is used against a darker background the illusion is created. However, it is important to make this color change a very subtle one as to not overpower the effect.

The next idea is to use "Shadows with Restraint." Shadows also create a nice illusion of depth in a 2 dimensional medium. Subtlety is also key in this technique. The darkness of a shadow should correspond the the background color. For example, when shadowing a white navigation bar against a white background, you would not want to do a dark, overpowering shadow.

The third pointer is to use "Simple Gradients." A nice way to use gradients to enhance web design is to incorporate them into buttons. Using a simple and very subtle gradient on a button creates a nice pop up effect. The buttons look almost like really buttons that are in a 3 dimensional space. Again, overdoing the gradient by using 2 colors with a large difference of shade will cause the gradient to lose its effect.

No comments:

Post a Comment