So far, I’ve been blabbing about very general and hopefully commonsensical aspects of web design. This time I’m going to get a little more specific, talking about some finer details.

I mentioned before that a couple major rules to follow are to keep things consistent and to focus on busting out some quality details. This is the foundation to every good website.

The trends spreading throughout the Internet now circle around subtle 3D effects, like adding shadows and highlights. Some of the easiest things you can do to capture these effects for yourself is to add drop shadows and gradients. Keeping it simple is usually the way to go. So no cosmic eclipsing of drop shadows--keep the numbers in single digits.

For gradients, you can add both shadows and highlights in one object, but a dark gradient is guaranteed to work. Just remember to keep things soft and subtle (unless you’re building a hardcore, contrasty site that is devoid of anything soft). Creating a hazy halo effect is always good, usually in a header bar. It accents the very essence of your site, by accentuating your title or logo. Like giving off an awesome first impression.

A third secret touch is the ultimate pixel perfect line: a single solid-colored line that subtly separates adjacent elements. Say you have a green header containing your logo and a tagline, while beneath that is a dark gray menu bar. What you can do to add the touch is draw in a single pixel line the length of those two elements. You’ll need to create a new layer, if using Photoshop, and use the marquee tool to draw the line at the base of the header. I suggest zooming in really close to make sure to get only one pixel all the way across. Next, fill the selection with a slightly lighter green than your header. Zoom out to check it. Repeat this for the line at the top of the menu bar where it touches the header. Fill this one with black. POOF! You’ve created the pixel perfect 3D effect. This makes it look like your two previously flat-colored site elements are now actually two separate objects butted up against each other.

But don’t stop there! Keep going!

Now you can pull out a gradient across both sides and the top of the header, but keep in mind the source of light. Even in web design we have to follow the rules of science. Last step is to add a soft drop shadow to the bottom of the menu bar. This will push it out above the main content of the site, keeping the focus pinned to that magic at the top. It’s basic, but looks top notch.

An excellent source for all this special design stuff and inspiration can be found here: Quality Within Web Design. I used this myself as a kind of checklist. I also recommend searching through Digg.com for similar web tips and design articles.

Again, the key to good design is in the details. And consistency is a must. This will give you the power of the touch. Use it well.