In terms of current web design trends, many designers find it hard to go past creating a sense of depth on their design. Using some sneaky techniques, designers create the illusion of the third dimension on a screen that is very much 2D.

So how’s it done? Let’s look specifically at the most common the techniques used by designers to create the third dimension.

Shadows

The most simple way to give an object depth is to hover it above the background, and the easiest way to do that is with a drop shadow. It draws into play the perceived location of a light source that gives the shadow.

The location of this light source (known as the sun) can change, but the user’s brain is programmed to think the sun is in the ‘noon’ position: at the top of the screen, right in the center. Even though that means, in theory, you can have longer shadows the closer your object gets to the edge of the screen, its a wise idea to keep the shadows on a similar angle to prevent the perception that there’s a very small light bulb in the center of your design. Follow me?

Carl Cartee's site features an unusual use of shadow

It’s always best to slightly underestimate the shadow you need; I tend to think the subtler the shadow, the better the effect. Also, make sure similar objects have the same sense of depth so they operate together on the desired dimension. You can apply a shadow to a similar object or one of the other techniques.

Highlights

Highlights, for want of better words, are simply the glints of light reflected by a user’s imagined light source. As I said before this light source, or ’sun’, is positioned at the top of the screen. That means most highlights you will see are on the top side of an object.

Particularly useful on dark backgrounds and when paired with a shadow, the highlight gives a perception of pixel-perfect quality that many designers find very desirable. I’d argue that single-pixel highlights are the single most popular web-design fad right now. You definitely did not hear this here first.

Envato has pixel-perfect highlighting

Bevels

Bevels are the combination of two of the above, highlights and shadows, generally with a chamfered edge.

A quick disclaimer before we continue. You see, bevels — and embossings as I’m about to cover — are regarded as bad design by many in the industry. The hatred of the bevel is not unreasonable, but nor is it an opinion you have to share. I like to use bevels on the odd occassion, but when I do, I stick to a few guidlines.

For starters, try not to blend or blur the edges between the slope and the flat on your bevel. It just looks ameturish. In fact, stick to heavily-defined angles on your bevel (chisel hard, baby) and you can’t really go wrong. Use it as an upgrade of the highlight or shadow techniques in situations that require it.

If you find yourself using it for the fifth time on the one design, I think you’ve got to take a step back. Put the bevel down.

Embossings

Embossings are the opposite of bevels. It’s where the shadow is formed by the top of the embossing and the lightsource hits the bottom part of the embossing. Think of it like an awning that products you from the sun, but light still creeps in around the floor.

Whatver you place within the embossing is taken-back a step on the z-axis. Search boxes have been embossed since the start of the web and we’re trained to think of them as forms, waiting for us to enter information.

Notice the embossed search field

Don’t get too carried away with the embossing though. Our brains bypass the text in a depressed or embossed box as we are trained to think of it as a side-note. Be wary.

Gradients

Gradients are incredibly popular in web design because they are an easy way to take even the most boring and utilitarian of backgrounds up a notch on the excitement scale.

Like all of the above, the more subtle gradient, the less the user knows its there. What good is that, you ask? Well, don’t get me started on the long explanation, but on the internet, content comes first and anything that detracts from that is doing more harm than good.

Digital Mash features a long, smooth blue-grey gradient

Most often, you’ll see gradients that move from light to dark as they move down from the top. Experiment with similar tones and you’ll find something that’s tasteful. Remember good, taste and gradient are words that, before the web, were rarely in the same sentence. Let’s not ruin it for everyone — be subtle!

Uncovered angles

The final, most complex and possibly the most effective technique for creating depth is the use of uncovered angles. To trick the eye, designers reveal the two dimensional planes that interact and join to form a solid.

Basically, it’s like constructing a building on a webpage and showing all the walls and supporting fixtures that make it a structure. Think of the elements of your page as tops of skyscrapers, and you’re viewing the entire page from above in a helicopter. You see the vertical sides of the skyscrapers and therefore comprehend the depth in front of you.

Jonathan Snook is a master of the third dimension

It’s a matter of filling the in the parts we should be seeing if, like in my example, a ribbon was wrapped around a larger solid. With highlight and shadow, the third dimension can not only appear, but be really believable.

Posted on August 11th, 2009 in Web Design | No Comments

Like a member of the bomb squad or a pilot, designers are capable of stupid things that cost them their job. For freelancers, the following three disasters are a good way to make sure you get your papers stamped ‘DO NOT HIRE’ ever, ever again.

3  Deliver broken or misprinted work

For web designers, this means a broken page. For print designers, this means print work that is crooked, smudged, on the wrong media or printed with the wrong colours. For both web designers and print designers, it means pain.

The fix

For the web designer, this isn’t as easy as it seems. The main culprit will be Internet Explorer 6 and 7. The best trick is to check cross browser compatibility on all the browsers you can. That means installing Firefox, Opera, Safari, Internet Explorer 8 (with Compatability View). For IE 6, keep an old PC running it, use Multiple IE or install Virtual Windows XP. All this installing is time consuming, but it’s worth it. As often as you save, check your pages across each browser to nail problems early. The best cure is prevention.

For the print designer, the only thing you can do it flip through all the copies. Yep, all six thousand letterheads, if that’s what it takes. You can avoid this issue altogether if you convince your client to shoulder the burden of the printing. Obviously, printing is a service designers can charge for so you’d be mad to seriously consider this. Take charge. You can do it. Just be careful. If you stuff it up, pay for a reprint if you can’t negotiate a free one, and don’t tell the client what happened.

2 The Typo

Print designers need only stuff one word up and it’s lights out, simple as that. It gets worse if your client doesn’t notice until its been seen by a bazillion eyeballs before someone catches on. It makes the client look like a troupe of half-wits. Like a crusted-on barnacle, no perfect storm of proofreading and rechecking will wash a typo away.

It'll be you'res.

The fix

If you’re by yourself, you’re really up the creek here. To nail the typos, you need as many pairs of eyeballs as you can get. Ask anyone who’s a slow reader. I personally ask mum or my grandmother, because they’re not usually in a huge rush. For big projects or big accounts, employ a professional proofreader and past the cost onto the invoice. You and your client will thank you for it.

1 Forget the job or pass the work on

Your client is paying you as a designer because they want your designs. The best way to get one angry is to never deliver it or give it to someone else so they don’t get what you promised.

As a designer, you have to talk a walk in the client’s shoes once in a while. See that any contact they have with you is the only info they’re getting.

You have to understand that once they have made contact with you and agreed on a rate, they are by-and-large locked in. Furthermore, if they’ve already paid a deposit, they have a financial stake in the work. If a client doesn’t like the rate at which the work’s being done or suspects you are working on other projects and pushing them to the wayside, its not a good look. If the client doesn’t cut the rope early, they get dragged along for the ride. You can be certain you won’t work with them again.

Look familiar? Apart from the manilla folders which no one uses.

The fix

The best way to maintain a good rate of work while juggling projects is to keep open a conversation with the client and the project itself.

Email them once a week with your thoughts and how you’re progressing and even if you’ve only managed a small thing, make it appear big with a bright idea or a reflection on the process. To maintain momentum, write a short list of things you’re yet to finish for the client and try to attack them one-by-one. You’ll often find that once you finish one thing, the design juices keep flowing and its a pleasure to finish the job.

Posted on August 7th, 2009 in Design Life | No Comments