Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors

Drop-shadows and gradients are two of the most common design elements on the web.

You’ll find them accompanying many different styles. They’re handy effects for web designers because they’re attractive, useful and easy to create with any graphics program. But they have a dark side: they’re frequently abused.

Using amateurish drop-shadows or gradients is almost as bad as affixing a scarlet letter to your shirt to let the world know you’re a beginner or a hack. Even subtle, barely noticeable mistakes can create tensions that undermine otherwise beautiful and effective designs.

In this article, we’ll look at what drop-shadows and gradients do, we’ll talk about how to use them effectively and we’ll look at some examples of mistakes and how to fix them.

 

What Do Drop-Shadows and Gradients Do?

The job of a web designer is to create patterns of color for glowing two-dimensional screens. (There are a few exceptions to this: websites can be viewed on, say, a Kindle screen, which doesn’t glow; and websites can be printed out on paper.) These screens do not reflect the real world; they’re not even very much like the real world. For this reason, we have no real imperative to make the patterns on our websites bear any relationship to objects in the three-dimensional world we live in.

Operating systems like Unix and DOS have an interface that is nothing but colored text on a screen. Others, like Windows and Mac OS X, are filled with the illusions of real objects. OS X, for instance, has a dock that looks like a table with a shiny surface that recedes in the distance, a menu bar whose beveled edges make it look like it bulges out slightly, and scroll bars that appear to have translucent lozenges.

All of these effects are metaphors. They treat certain elements that we can interact with on screen as though they were three-dimensional objects that interact with light sources in the way that objects in the non-digital world do. It’s a funny thing to do, in a way: all of these light sources and edges and shapes are pure fantasy. Because the objects on the screen are imaginary, why should we relate them to the objects in the real world?

The illusion of space connects the imaginary to a world we are comfortable living in.

The most important reason why we relate imaginary objects to real-world ones is that we are experts at interacting with objects in our three-dimensional world. We have experience in dealing with three-dimensional objects, and we have accumulated knowledge of the visual code that tells us about the relationships of objects to each other in space.

It’s partially because the feat of interpreting light is so remarkable that we take such pleasure in illusion, or in creating the appearance of objects. We are often more engaged by dramatically life-like paintings of common objects like houses and apples than we are by the objects themselves. We humans have created drawings for thousands of years that are intended to present the ideas of objects. Illusory lozenges and tables on the screen are nothing but the most recent manifestation of this long tradition.

There’s more to it than pleasure, though. Shape and position give us information about how objects relate to each other. The long vertical lozenge shape of the scroll bar in the Safari window, for instance, creates the illusion that it sits “higher,” or closer, to me than the elements surrounding it. This gives it greater importance in the design, which is appropriate because the scroll bar is an essential interface element for navigating the page.

Visual metaphors create perceived affordance.

By appearing as an object, the scroll bar creates “perceived affordance.” That is, it links itself by way of metaphor to the properties of real objects that lend themselves to particular uses. A beveled button on a web page, for instance, communicates that it affords pressing. We can make anything on a page clickable, but associating a clickable element with the image of something pressable suggests its function in a clear, obvious and even pleasing way.

Drop-shadows and gradients are basic tools for creating the illusion of space.

Drop-shadows and gradients are two tools that help create the illusion of three-dimensionality and suggest the spatial relationships of objects on the page. When done well, this three-dimensional information makes a design more beautiful and more understandable.

In the real world, drop-shadows are created when an object blocks a light source from striking a surface that is behind it. This is one of the reasons why people say that drop-shadows make two-dimensional designs “pop”: because they make objects appear to stick out from, or float above, other elements.

Gradients appear when one part of an object is closer to a light source than another part. As a result, the closer part appears lighter, and the farther part appears darker. (Gradients get more complex, of course, when multiple light sources interact or when light sources have different colors.)

So, by mimicking the effects of light in the real world, drop-shadows and gradients communicate information about metaphorical objects, imaginary light sources and their relationships.


 

How To Use Drop-Shadows and Gradients Effectively

Here is one possibility: don’t use drop-shadows or gradients at all.

I mean this, seriously. This is the surest way to avoid drop-shadow and gradient mistakes, and the option should always be considered.

Because tossing drop-shadows on random objects is so easy, they can be an excuse to avoid simpler, better solutions to problems. For bits of text that need to be more prominent, for example, designers will often neglect color, size, weight of the type and many other elements in favor of a drop-shadow.

Similarly, designers often use gradients to make a field of color seem less boring, without figuring out why the overall composition is not dynamic.

If you’re working on a comp for a website, save three-dimensional touches such as drop-shadows and gradients for the end, if at all possible. Use spacing, placement and color to make the design effective before adding the final layer of polish. If you focus on making your designs work without these tricks, you may find that you don’t need them as often, and that they are more effective when you do use them.

Before you plop in a drop-shadow or a gradient, ask yourself, “Is a three-dimensional metaphor necessary for this design?” Am I using it to add useful information about the way objects are related or as an effective component of a sound aesthetic approach, or am I using it as an excuse?”

 

The Subtler, the Better

For drop-shadows, almost never use Photoshop’s default settings. Photoshop’s default drop-shadow is very dark and is cast to the lower-right corner of an object (the default global light source being 120°, in the upper-left).

Shadows tell you about the light in your environment. Suppose you’re in a dark room with no windows, and you turn on a flashlight. Any object that you shine it on will cast a shadow that’s almost black. That’s because the object is blocking light from the only light source, meaning that no other light is coming from anywhere else to brighten that area.

Now, the shadow won’t be completely black because of the reflected light. Some of the light from your flashlight will bounce off the walls and hit the shadowed area from a direction that’s not blocked by the object. And if you turn on a lamp in another corner of the room, the shadow will brighten considerably. The object will cast a second shadow: the new shadow will appear where the light from the lamp is blocked but will be filled with the light from the flashlight, while the area of the first shadow will still be blocked by the light from the flashlight but will be filled with the light from the lamp.

When we add drop-shadows to our designs, we suggest an imaginary environment for our web page. Dark, hard-edged drop-shadows suggest a dark room with a single light source. Light, soft-edged drop-shadows suggest a room rich with diffuse light.

A well-lit room is the most comfortable environment for users, because it is similar to the kind of environment where we use our computers: an office or study. Unless we deliberately want to avoid that comfort zone, we should bring the drop-shadow settings in Photoshop way down from their defaults. Bring the opacity down to 30 or 40%, or even lower.

Also, keep things simple so that people understand the metaphor without thinking about it. A light source at 120° does not makes much sense. Mac OS X, for instance, puts its light source at 90°, or straight above, which seems more logical. I like to make it even simpler and put the light source directly perpendicular to the screen. To do this, just bring the distance setting on your drop-shadow to zero (this represents the distance from the object that casts the drop-shadow to the object beneath it). At this point, global light doesn’t matter: it’s simply as if a big diffuse light source is coming from behind the user to illuminate the design.

This effect is very common in “trompe-l’œil” designs, the most common of which features the background image or frame of a desk surface, as if one were looking at it from straight above. Film directors such as Alfred Hitchcock, Martin Scorcese and Wes Anderson employ the same effect for their signature God’s-eye-view shots. Such web designs have a kind of effortless comprehensibility, and maintaining consistency across a design becomes easier for the designer.

If you’ve brought the distance setting down to 0 and the opacity down to about 30%, you’re at a good starting point for a drop-shadow. Play around with the size to change how far the surface of the object appears to be from the background on which it sits. Setting the size to 1 pixel, for example, gives you a beautiful effect that’s almost invisible but quite pleasing. Designer Dan Cederholm has made small, simple effects like this an integral part of his style (as demonstrated in his seminal A List Apart article on “Mountaintop Corners“).

You can certainly bring the opacity up if the effect is invisible, but starting subtle and then dialing it up is much better than the opposite. The effect should not be the slightest bit more overt than it needs to be.

For gradients, Photoshop has a lot of fancy defaults. These may have some good uses, but they certainly have unlimited poor uses, so steering clear of them is usually wise.

Instead, select the default black-to-white gradient. Then select both the black and the white and make them both the base color of your element. Now that you have a base, pick either the dark side or the light side and adjust it to be just slightly darker or lighter. Again, the subtler, the better. (Some of the best gradients I’ve come across I had to verify with the eyedropper tool in Photoshop to make sure they were there at all!)

The greater the contrast between the light and dark, the rounder the surface will appear. For some things, such as navigation menus and buttons, some roundness is appropriate. But for objects that should appear flat, keep the contrast low.

And remember, the lighter side should face the direction of your light source.

This kind of gradient is wonderful because it mimics the gradients we see around us all the time. Nothing in the real world is truly a single color field, because it always has some kind of relationship to a light source. Look carefully at the pages in a book or at the ceiling around your overhead light: you’ll find gradients everywhere.

 

Examples of Mistakes and How to Fix Them

The web has many obviously ugly gradients, but these are not usually done by professional designers. Rather than show egregious mistakes, I’ll illustrate a few ways in which subtle errors can create tensions in otherwise excellent designs.

Uniform Shadows for Overlapping Objects

Overlapping objects imply a difference in their distance from you (determined partly by their thickness). Designers, though, frequently use identical drop-shadows for overlapping objects. So, the information conveyed by the drop-shadows conflicts with the information conveyed by the overlap, undermining the illusion of dimensionality.

Seeing conflicts such as these makes me uneasy, and the more I focus on them, the more my head hurts. Users should take pleasure in your design, not feel pain!

You can read more about this issue in “Build a Better Drop-Shadow,” a guide by Jacci Howard Bear on About.com.


Abrupt Edges

The corners of real drop-shadows wouldn’t have hard edges unless they had absolutely no reflected light—which would be a very unusual situation. Rather, their corners are usually rounded by the rays of light that creep around them.

Here’s a drop-shadow with an unrealistically hard edge:

This otherwise lovely design has almost no dimensional illusion anywhere but has a drop-shadow along the right sidebar. The designer perhaps wanted to lower the sidebar’s hierarchy on the page, an effect that its blue background helps achieve. Not only is it unnecessarily dark, though, but the implausibly hard edge stares the visitor in the face.

At the bottom of the sidebar, you can see a rounded transition, where the designer has created a more plausible effect. But you can see why he didn’t repeat it at the top, because it would jar with the clean horizontal line set by the well-aligned top elements. Rather than demand the realism of this rounded transition, let’s fix it by toning down the drop-shadow as much as possible.

Here, I have made the drop-shadow so light that it does little more than suggest it is sitting farther back. Because it’s so light, the clean line of transition isn’t ugly or distracting.


What the heck is going on behind that object?

Sometimes, a drop-shadow goes nuts for no obvious reason, as with the blue box surrounding the W3C logo below.

Why is the drop-shadow so far back from the object, and so rounded? The more I try to understand the story being told by this drop-shadow, the more confused I get. My guess is that the designer wanted to give more prominence and weight to the logo, which the drop-shadow helps accomplish, but it disrupts the harmony of the page so much that it’s not worth it.


Don’t let your gradients suggest different light sources.

In this otherwise excellent design for WolframAlpha, objects on the page have gradients ranging from white to pale orange. The problem is that the gradient in the header region has white at the top, implying light from above, while the page elements lower down have white at the bottom, implying light from below.

You could argue that I’m over-thinking this, that gradients don’t have to match up with light sources. That’s possible, but subtle gradients like these have an inherent metaphorical relationship to the gradients we see in the real world. Let’s switch the direction of the gradients lower down on the page so that they imply a light source from above:

And we get light source harmony.

 

Ultimately, you’re free to do as you please.

Because the objects on a web page relate to real objects only by metaphor, their effectiveness is essentially subjective. The connection between an image of a button and an actual button has no reality beyond the mind of the user.

We designers are not required to make our metaphors consistent with reality, but being thoughtful and careful about the many levels of communication in a design helps us make our websites more harmonious.

And our care and consistency helps make the user’s experience of the website comfortable and even delightful.


Written exclusively for WDD by Nate Eagle. He studied philosophy in college, an education that prepared him perfectly to design and develop web pages for PBS KIDS. You can read more from him and his PBS co-workers at Design.PBS.

Do you think this level of detail is important when designing drop-shadows and gradients? Do you have your own pet peeves about how drop-shadows and gradients are used?


0 shares
  • http://templatecustomization.org Template Customization

    Very useful the article for design. Thanks a lot.

  • http://design.pbs.org Nate Eagle

    By the way, there’s an awesome tutorial by Mike Rundle called “Crafting Subtle & Realistic User Interfaces” that I HIGHLY recommend that gets even more practical about shadows, highlights, and the little things that make life worth living.

    http://flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php

    • http://www.stetestilz.com/wordpress StetEStilz

      This is great reading Nate. I will definitely integrate it into my UI design.

  • Bert Johnson

    I really enjoyed your article – especially the cringe I get when I see the 20px drop shadow for something two px ‘above’ and something else 100 px ‘above’… I would guess the rounded drop on the W3C header was to intone some sort of arcing height, it seemed the gradient was attempting to give that effect as well, albeit not very well. Or maybe they were just blindly trying to emulate the Adobe light source on it’s logos? Je ne sais pas.
    Some constructive criticism though: if there’s one thing that I notice designers who write consistently do, it’s end apologetically. It seems to lighten the argument, one in this case, was well thought out and presented.
    BTW – the three year old lives for PBS kids. Friggin’ Dragon Tales is better than Disney for her…

    • http://design.pbs.org Nate Eagle

      Bert,

      That’s a really good attempt to articulate what’s going on with the W3C symbol: but, yeah, any arc is contradicted by the flat interior shadows on the W3C letters. The similarity you noticed to the Adobe letters is spot on, though.

      As for your constructive criticism, I think you have a really good point. Apologizing is a bad habit in writing, and something that’s good to overcome no matter how hard it is. I do think, though, that it’s important to emphasize the freedom that’s inherent to design: because images are all pretend, ultimately, you can’t say anybody HAS to be consistent, or HAS to do anything in particular: you can just do your best to clearly articulate what’s at stake when one makes design decisions.

      As to your three-year-old, I’m absolutely delighted to hear that she’s a PBS KID — hope she keeps watching!

  • http://www.twitter.com/ubermatik Theo Hodkin

    Absolutely brilliant! This will prove very helpful, I’m sure, and should guide me in giving my next website design a comfortable and naural look.

    On a side note, the W3C logo looks almost as if it is bulging in the mddle, like it lifts off the surface and towards the reader… insteresting, but it still doesn’t look right!

    Thankyou!

  • Mj

    The shadow in the W3C blue box is a common one I see (and use sometimes). The purpose of that shadow shape is to imply that the box is a flat object that is anchored to the page at the sides but bulging out toward the viewer in the center. If this were the case with a real world object with the light source coming from the top of the page, you would expect to see a drop shadow bulge implying the relative distant of the object from the background with respect to its light source. It wasn’t particularly well executed in this case, but that is what a drop shadow like that is meant to imply.

    • Kelsey

      That’s what I was thinking Mj. I also think that gradient can imply a subtle curve rather than just a light source (sure that takes a light source into account too.. but ah well).

  • http://www.visualswirl.com Chris Thurman

    If you can’t understand how to properly use a tool, you shouldn’t use it at all. This applies to so many areas of life, especially in web design. Great post!

  • kursus

    Excellent post, thank you!!

  • http://www.web4half.com Jaisa — I LOVE WEB DESIGN

    Thanks for the nice tutorial and I will try this for my daily design challenges :D

    They are all very impressive. Thanks for putting this together.

    Muchas gracias!

  • http://www.rohnerstudios.com Angela

    Thanks for the in-depth article Nate! It’s very informative.

  • http://sexidesign.com Melody

    It’s incredible how much something as subtle as a drop shadow really makes or breaks the entire design and layout. Great tips..

  • http://www.dotworks.pl macias

    i knew it’s something wrong aobut the W3C logo shadow… nice article

  • http://www.soapboxdesign.com.au Lisa [Soapbox Design]

    Nice Article Nate! I particularly like your comment about uniform light sources and avoiding whacky drop shadows… it always looks wrong if such things are illogical or inconsistent … good design should “make sense at a glance” and be “easy to look at” – so it makes sense to be considerate here.

  • http://www.kaplang.com/blog michelle

    Very useful post and written really well, thanks Nate

  • Ws

    Great article!!!

  • http://www.insidethewebb.com/ Inside the Webb

    This is awesome! Really great collection of gradients, I love finding these posts on your blog. Keep it up!

  • D Ross

    The reuters sidebar’s shadow is near perfect. It’s to let you know that there’s something under the main content white area. Click that “Open” button up top. The whole sidebar slides out. Something we haven’t seen on too many sites but I’m sure will become a popular trend very soon. If the sidebar’s shadow was much lighter you would think it’s a normal sidebar and not as much of another layer.

  • http://www.abwebdeveloper.com Anxo Botana

    Nice article, but when you write: “Operating systems like Unix and DOS have an interface that is nothing but colored text on a screen.” I think you forgot the last 15 years in *nix evolution.
    In *nix (Unix / Linux systems) you have some different Desktop Environments, like KDE, GNOME and others. KDE, for example, has some features that Windows 7 would like to have, even one year before the “great and modern” Windows 7 were released.
    Take a look in youtube to view some KDE feature demos.

  • http://www.jordanwalker.net Jordan Walker

    This article has a great perspective on shadowing site elements. I found it very helpful.

  • Ricky

    Really enjoyed Reading this. Especially about affordances in design, I think some times I need to catch myself on to stop using inappropriate/unneccessary methods Thanks very much good reminder.

  • Jeff

    Without proper training, this is one of the many details in designing which you know you’re doing wrong but have no clue why. I love those aha! moments where it all becomes clear.

    Thank you for this.

  • http://www.imageworksllc.com Joshua Briley

    Nate, this was well executed and well timed. You guys have an uncanny way of presenting the info I need, at the times I need it most.

  • Paul Walker

    Gradients that oppose the light source, such as the wolfram alpha example, imply inset elements. They are, for example, common on pressed button states. Not an issue at all.

  • Brian Jones

    Great tips – some I never would have thought of – thank you for sharing!

  • http://www.yogapuntadeleste.com/ Alvaro Hernandorena

    very instructive

  • http://www.Twitter.com/TylorSkory Tylor Skory

    I really enjoyed this article! Some nice tips and good information!

  • http://www.creativeindividual.co.uk Laura

    Nice article, thanks Nate. I like how you suggest trying the “less is more” route before adding the finishing touches such as drop-shadows and gradients, so that your design works better because of layout and colour harmony. And then realising how little of these design elements you need to use to give it the WOW factor. Lots of chew over there and good examples too, thank you.

  • http://cooljaz124.com cooljaz124

    Hey…Im confused with W3C Shadow effect as well !

  • http://fluidmarkup.com Chris

    This article was pretty timely for me, because I have recently been trying to pay attention to this specific issue in my web designs.

    However, I must mention one use of the inverted (dark-to-light) gradients. If you have an object that reflects light and you bend it so that it is concave, the gradient will be dark-to-light if its on the same 2 dimensional field as the light source.

    To help this effect I have used a 1px white highlight at the top and a 1px dark highlight at the bottom, showing where the light source is and bringing the concave metaphor better into play.

  • http://www.nopun.com Noel Wiggins

    I appreciate your creative direction on making sure gradients and drop shadows should make since with the website. and I love the idea of making sure all effects follow the same light source.

    But I gotta say sometimes and element looks kick ass and should be used just because it kicks ass.

    Like in the w3org website. I think that drop shadow is a great addition to the layout, and don’t think it has to have any meaning behind it, sometimes we can over think things, and realize that if it looks good then it just looks good.

    We are designers not philosophers, and we are designing websites not finding a cure for cancer, so lets not take what we do so seriously sometimes if it looks good it looks good and hopefully the client want interject their ideas or smother something you feel proud of.

    Thanks and Regards

    Noel for Nopun.com
    a graphic design studio

  • Jure

    Definitely one of the more helpful articles this week.

  • http://www.rk.net.au RK

    Great article. Although I have to disagree with the point made regarding Wolfram Alpha. Gradients don’t just portray light sources, but also portray three dimensional objects. If the right hand side boxes had the opposite shape than the header box (concave rather that convex) then a darker gradient at the top would be technically correct.

  • tripdragon

    Sooo build your website in real 3d then! Either Blender, After Effects or does CS4 cast shadows now? Why fake it?

  • http://maiconweb.com Maicon Sobczak

    Great article! The details and explanations was great. I want more like this.

  • http://www.flavioh.com.br Flavio

    Really good Article!

  • http://www.thephuse.com James Costa

    Excellent article – very well thought-out. As a colleague once told me, gradients should be used as subtly as possible. You almost want people to not notice them, although they make a huge difference.

  • http://www.classesandcareers.com/colleges/state_palau/degrees_liberal-arts/courses_art-design Teacher Teacher

    I had never heard of the concept of “perceived affordance.” I can see how using an image that suggests its very function would be a subtle but effective reinforcement for someone new to a website. Or, to use marketing lingo, it would also serve well as an aid for any call to action. Sorry to you purists, but since most websites exist to make money, that’s the way it goes.

  • http://tweeaks.com/ Jared

    Thank you!! I find so little information on this, so this is a big help!!

  • http://freshreleased.com Rinewalt

    Nice one bro…. Can relate on the article when the time I was starting web design….

    Cheers

  • BAM

    I am new here. I love this site so much I will be your fan..!! Happy New year !!

  • http://www.designlovr.com DesignLovr

    Great and informative article!
    I completely agree with you that gradients and drop-shadows should be very subtle elements of a design as well as they should give the impression of a uniform light source, not 20 completely unrelated ones.
    Hopefully some people will read this and apply what they learned to their next designs.

  • http://www.crearedesign.co.uk James

    You have given some great tips here. It’s always nice to see a well constructed website that considers light sources, and doesn’t just slap gradients and drop shadows here, there and everywhere.

    Very useful information for people to know.

  • http://www.zoombits.co.uk 2010 winter olympics

    Thanks for this excellent article. It has superb information. Thanks for sharing the information.

  • John

    no images

  • http://www.rsandagon.com rsandagon

    Pretty impressive analysis on the use of gradients and drop shadows. I think one of the common mistakes of designers is to use the default drop shadow in Photoshop and other software, which results to this confusing overlap of interfaces. I would like to note, however, that some websites create great exaggerated effects, even though the shadows and gradients appear unrealistic. But these are the exemptions, and the designers probably knew what they were doing.

    All in all, this article is very good :)

  • tareqf1

    nice article.
    but I have one question about gradient in the wolfram alpha, should gradient be applied considering the whole page is one thing (which makes sense of the gradient in wolfram because the light source is coming from TOP so the header portion get light but the mid portion is orange because it’s not getting the light) or it should be different for different object?

  • http://clint.dk Clint

    I think you are right in all your basic points. I also have a hard time coping with sites that show drop shadows going in all directions and inconsistent depths.
    However I disagree with your gradient argument:
    “The problem is that the gradient in the header region has white at the top, implying light from above, while the page elements lower down have white at the bottom, implying light from below.”
    This is simply not true. The header has white at the top implying that it bulges outward (so that the top of the element is more subjected to direct light) where the page elements lower down simply bulge inwards (implying that the lower part has more direct light from the top)

    (Example here: http://dl.dropbox.com/u/2685190/light.jpg )

    This doesn’t mean that there is inconsistent lighting, and hence is not a mistake IMHO

  • rullator

    too sad, i cant see any images…

  • http://davidboni.net David Boni

    Excellnt article. I’d like to thank you for the explanations and reasonings behind using these elements; coming from a dominant print design background, I used to bash the trendy use of faux-3D effects on the web… but always wondered why interface designs that make abundant, yet subtle, use of them felt so appealing and natural. Your example about how an artist’s rendering being more interesting was the eye-opener for me.

  • Nicolas

    Great article, but it would have been even greater if the images had loaded. As it is now some of your points are lost to me… since I can’t see what you’re trying to describe.

    /Nicolas

  • Visitor

    All your images are not shown.

  • http://www.webdesignerdepot.com Walter

    @rullator, @Nicolas, @Visitor,

    We were experiencing a temporary server problem which prevented the images from being shown. This has now been resolved so you should be able to see the images.

  • http://carbongraffiti.com Jon Aizlewood

    Nate, that article was fantastic – really well-researched, written and communicated. More, please.

  • http://www.bigtunainteractive.com Adam Hermsdorfer

    Nate, excellent article. I love your point on how gradients and drop shadows single out the hacks. I swear some people use them just so they can show others that they know how to use layer effects.

  • http://www.zoombits.co.uk 2010 winter olympics

    Excellent article. Thanks for giving an entire explanation of the same. It increased my knowledge for the subject too.

  • http://www.sametomorrow.com/blog adam

    Good indepth post about this topic, really informative.

  • http://www.filmgauge.com.au Stephan Czepanik

    Thanks for this great article

  • http://www.andcwebdesign.com AndyC

    Great article. Really helps to get a designer’s perspective, being more of a coder than a designer, this is really helpful to me.

  • http://juju-design.blogspot.com/ JuLi

    Great article!

    But “A light source at 120° does not makes much sense. Mac OS X, for instance, puts its light source at 90°, or straight above, which seems more logical.”??
    Well, neither do I live at the equator, nor is it noon all day and I don’t always wear a headlamp either. ;)

  • http://www.clippingimages.com Tanjila Jesmeen

    helpful resource.thanks for sharing.

  • http://mp3salem.com slim

    Thanks for this great article

  • http://www.deepubalan.com Deepu Balan

    Excellent post! Thought provoking and informative… Thanks for sharing this info.

    -Deepu

  • http://www.iamkreative.co.uk/blog Kevin Lofthouse

    Really nice article, great read. Thanks.

  • http://www.ne-web.com/ ne-web Design Newcastle

    Good article. I see these mistakes a lot when I’m browsing the web.

  • http://www.frankesinksuk.com Franke Sink

    A interesting and thought provoking article. Whilst tools like Photoshop provide excellent introductions and immediacy of access to “design”, as is always the case considered design is skill rather than a filter or plugin.

  • http://www.andreabarghigiani.info Pr0v4

    Very helpful tutorial.

    Now I know a lot more about the theory of drop-shadow and gradients!

    Thank you guys!

  • Andy

    WOW! You really thought this one through.
    Thanks for the insight, I’ll definitely be rethinking some of my designs

  • http://www.spark-creative.co.uk Mark Astle

    Kinda ok. But I too disagree with the Wolfram one. Your redesign simply doesn’t look as nice. And sometimes it’s as simple as that. I’m not sure the designers of that site meant the gradients to be read in a ‘3D’ way at all. People have been using grads in print for a long time without wanting to make things look 3D. It’s just a way to add a bit of background interest. (I know you qualified that bit by saying you might be over-thinking it. I think you could well be.)

    Wanna make your website stand out? Hey, how about not using drop shadows or grads at all?

  • http://www.foncannondesign.com Jessica

    Nicely stated and great examples! I especially agree with ensuring a design is solid before adding additional effects, because they truly are icing on the cake. It is evident when a designer is leaning too much on these effects and over-using them, and in effect not achieving the nice result from subtle harmony.

  • http://www.goblinridge.co.uk Yorkshire Web Design

    Excellent article. Indepth and very helpful. Thanks for putting together!

  • http://modx-systematix.com/ best CMS

    I love your point on how gradients and drop shadows single out the hacks. I swear some people use them just so they can show others that they know how to use layer effects.

  • http://www.ayomedia.co.uk ayo

    Great tips – thank you for sharing!

  • Richard Golding

    The W3C logo to me, isn’t going for a “drop shadow” but to imply that the grey column is bending upwards to the logo giving it us curvaceous depth.

  • Richard Golding

    The W3C logo to me, isn’t going for a “drop shadow” but to imply that the grey column is bending upwards to the logo giving it us curvaceous depth.

  • http://www.ayomedia.co.uk Ayo

    this is really helpful, thank you for sharing!!

  • http://xpodesignva.com David

    This is some of the simplest and most effective design advice I’ve read!
    Thank you!

black friday 2014