I am available for freelance work - HIRE ME

Thinking in Shadow: Effect and Light in Design

posted by Les James on Oct 14, 2010.

You’ve seen it before. I’ve done it and you probably have too. Photoshop effects abuse is the third leading cause of poor website design (okay I just made that up). Seriously though, before you apply your next drop shadow there are some things I want you to keep in mind, so read on.

We love effects don’t we? Admit it, the first time you ever fired up Photoshop all you did was play with effects and filters. I’ll admit right now that’s all I did the first time I played with it. I spent hours seeing what would happen to an image as I applied filter after filter. Seriously, there was nothing cooler than throwing some text on the screen and then applying every single effect possible to it. I think my personal favorite was Pillow Emboss… ah, good old Pillow Emboss.

I didn’t realize it at the time, but there was a big problem brewing. I was given these great abilities to style without any background or understanding on why or how I should use them properly. Before Photoshop came along, what probably took a graphic artist hours to create was taking me seconds. It means that at that moment I had zero respect for the power I was wielding because all it took was a pirated copy of Photoshop and a pulse.

I think that we can all agree I wasn’t the only person to go crazy with my new found powers. The Internet is littered with sites that overuse shadows, bevels and gradients. We didn’t mean to make the net look like crap, we honestly believed that we were making it cool. It’s what separated us from the guy who had Microsoft FrontPage and a pulse. The result was an unfortunate side effect of what happens when powerful tools become cheap and require no training to use.

We are making progress though. Sites like Dribbble are showing aspiring designers every day that beauty comes from subtle, proper use of these effects. It doesn’t require extensive training or art school to wield them either, just a solid understanding of the principles behind them and attention to detail.

Adding Effects with Purpose

When you get ready to add some effects to your design take the following steps in your head. First ask yourself if it’s even necessary. Will shadows and gradients help the site perform better or is it just eye candy. Deep in the back of your head you should know that adding these won’t make a bit of difference to the analytics needle. But that’s not going to land your work on the next great list post so let’s at least use them responsibly.

What do textures, shadows, highlights and gradients all have in common?

Figure it out yet? They all have to do with lighting. When you see a web design that looks like all of these effects were just puked onto the page it’s because the designer didn’t think about their light source. Without a light source, you don’t see the subtle peaks and valleys in a texture. Shadows don’t get cast and highlights don’t shine on that letterpress text without lighting.

Imagine that you are building this design out of real materials on an easel in front of you. Now take a lightbulb and shine it over your design. Where should you position the light? Should it go above the design, overhead or below? Is it focused like a spotlight or diffused? Is there more than one light source? What about the ambient light in the room?

It’s a lot to think about right? How often do you think designers think about this when slapping these effects into a design? I’ll leave it to you to answer that one.

It gets more complex though. Now picture the actual pieces of your design. Ask yourself what kind of highlights and shadows your light source creates on your composition. Is your design seamlessly flat or is it layered? If it’s layered, how should your light source cast shadows? What kind of materials are you using to build your site? Are they reflective or matte? Are there edges for your light source to reflect off and create highlights?

Think for a second about that awesome texture you found the other day on that textures roundup post. It’s really going to jazz up your background right? But does that texture match your light source? It shouldn’t. Why you ask? Because whoever made that texture didn’t position the light bulb in the exact same spot as you.

Every time you add one of these effects ask yourself if it’s true to life? Does that button really cast that hard of a shadow? Are the lighting angles and altitudes consistent throughout your design? Don’t just add a gradient because you think they are cool, but because the object and lighting demand a gradient to make it look natural.

Calculating all of this takes experience so if there is one thing to remember from this post it should be this: being subtle and discreet is the best policy when adding effects. Sometimes the nicest effects are the ones that are just barely noticeable. We don’t view websites under a 5pm summer sun so lighten up on those textures, highlights and shadows. If you are designing in Photoshop and you don’t move your effect’s opacity slider down to the teens then it’s most likely too much. Squint your eyes… did the effect disappear? Then it’s just right.

Before we finish, let’s talk for a second about everyone’s new favorite design trend—noise. Noise isn’t really a texture. If you reached out and touched noise it wouldn’t feel rough. Noise should be thought of as the internal composition of an object. It’s kind of like a granite countertop. Think of it this way, if you were to move your light source around noise wouldn’t look any different but the surface of a texture would. Just food for thought and probably some opposing comments.

Using all of the effects we have available to us demand more critical thinking then we as an industry have given them. It’s truly what separates the pros from an amateur. Every single time you add a shadow or gradient think about where your lightbulb is. Think about the object you are adding it to. Think about the surface your object is resting on. Now think about how much visual noise this is adding to your design. Is it necessary? The pixel left alone can make your content shine more than the pixel designed.

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Les James Les James has been designing web sites for about 10 years now. His experience ranges from garage band sites to enterprise level front-end templating. He has roots in photography and is passionate about all things design. Admitted Apple fan boy and longtime snowboarder Les fits the web designer stereotype fairly well. Be sure to say hi to him on Twitter.

Like this post? Help Promote it!

Comments

Oct 14, 2010

Tom Hart says:

Awesome post describing an internal conversation I’ve been having with myself for a long time now.

Oct 14, 2010

Joseph Alessio says:

That’s quite true, the natural is what we should strive for. Paring effects and extras down is much harder than loading them on, but it’s also much more important. The trick is to have just enough to make it look quality, tactile and more real than just pixels, but not any more than is absolutely necessary.

I’d say (although not without some hesitation) that Photoshop effects are a good thing… but too much of a good thing is a bad thing–in this case, a really bad thing!

Oct 15, 2010

andrei says:

“Squint your eyes… did the effect disappear? Then it’s just right.” I really like that piece of advice. But i have to admit that i really like the effect noise brings to a background. I am all for subtle design and I’m pleasantly surprised when (rarely) a website breaks that rule and achieves a great visual effect.
Great article.

Oct 15, 2010

Matt Ward says:

I think that the squinting test is a great idea to. I’ve actually been doing that myself for some time now!

Oct 15, 2010

Ryan Martin says:

Noise is absolutely a texture. Weather you view it as ‘smooth’ or ‘rough’, is simply up to the viewer. Great post, I am always fighting with the ‘higher-ups’ about keeping things subtle.

Oct 22, 2010

Michael Hubbard says:

Great article Les – and love the comments people are posting. We just hired Les here at Media Two Interactive and we’ve already seen the benefit of his expertise – and I promise you – the “higher-ups” agree with you guys.

Oct 23, 2010

Louis Bullock says:

Nice post Les, I really enjoyed reading this. Now I’ve started to think about how my website should look, and if all the 1px white inner shadows, strokes, drop shadows and more are really necessary.

I guess my philosophy is to keep it simple and minimal, and not put all your favourite effects on every site.

Oct 23, 2010

Hitesh Chavda says:

Awesome Post.

Please make another post with some illustrations.

Oct 24, 2010

Andy Marshall says:

Very interesting.

This kind of environmental consistency is something I’ve always worked hard to achieve and found it a real problem when I see it done incorrectly – where I used to work, my boss would make bevelled buttons with a 45 degree top right light source, and then add little LED lights in those buttons with a directly overhead (90 degrees) light source – it really irritated me!

It’s something I spend a lot of time trying to get it right – my most ambitious example of this would be http://www.beanieswholefoods.co.uk/ and even there I didn’t get it perfect… something you didn’t really cover in your article is the build considerations – how do you create those drop shadows and still make it work with a dynamic website with variable heights, text lengths, the limitations of html and so on.

But yeh – a very good article with a lot to take away.

Oct 24, 2010

Stacy says:

Thank you for this very timely and excellent post. I love the idea of the “squint test”, and will be sure to use that whenever I am applying effects.

Leave a Comment

Links

  1. CSS Brigit | Thinking in Shadow: Effect and Light in Design
  2. Wochenend-Lektüre #9 – FRONTAND

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014