Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

My question is when, if ever, a shadowless version of an icon is preferred over the shadowed version.

By shadowed I mean the tiny, almost imperceptible little black gaussian blur below the icon.

I should also mention that it is a web application I'm developing.

share|improve this question
1  
Could the down voter add some information to Felipe to coach on why you have down voted? –  DigiKev Jan 21 '12 at 18:38
    
Upvoted, because this is not a bad question imo. –  Bart Gijssens Jan 23 '12 at 13:04
add comment

4 Answers 4

up vote 3 down vote accepted

It depends on the application.

Youtube uses these shadows to create a clear indication of what a button is. As you can see here, the Safety button is ready to be clicked. The shadow draws attention so the other buttons (these are footer elements intended to be inconspicuous) fall into the background.

enter image description here

If your visual design is very three dimensional and or involves a natural lighting scheme, these shadows can add more than aesthetics, they provide affordance.

However shadows don't always fit. Windows Metro has a crisp, flat, typographicly focused design.

enter image description here

Here buttons and icons are made apparent by their contours, not their shadows. Shadows are a 3 dimensional effect and rarely have place in a 2D plane.

share|improve this answer
    
+1 for images.. –  jberger Jan 24 '12 at 19:17
add comment

It's purely for aesthetics and to give a sense of reality to the user, things that you want to give stronger presence on the page need shadows and those that make the whole page look better also need shadows.

The shadow gives the 3d perspective so you can give shadows to things that really exists in relative your web applications or just use it for call for action buttons.

share|improve this answer
1  
It's not purely for aethetics at all as I've noted in my answer. The added affordance can be very important, especially on pages where many banners and text background effects make it hard to tell what a button is (granted those are their own design problem). –  Ben Brocka Jan 23 '12 at 21:53
    
@BenBrocka : Ya i agree thats the reason I also told that it is used to give sense of space and reality to the user. Ty !! –  Pratheep ch Jan 25 '12 at 13:18
add comment

I think the good use of shadows can make a button or icon look real, but that really depends on your approach to the design, from my own personal experience shadows work best with not so complex icons, otherwise it creates too much visual noise.

share|improve this answer
add comment

A small dark pixel line would indicate that the icon lays on the button or layer. On one side it can be just aesthetics, on the other it can increase the feeling of contrast. So it's a question of what you want it to look like or that sould be the "job" of your icons. Think about that first, then decide what would fit your application. Form follows function but make it nice and beautiful too. :-)

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.