Understanding Shadows in UI Design


I had a feedback session with UX Team 1 where I talked a little about layers and shadows. Putting the resource out here for everyone, in case folks are interested to know more:

^I would recommend reading the shadows section; the other sections can seem too technical while starting out. Specifically in the shadows section, you can understand a lot by just looking at the pictures, even if you are unable to understand the text.

One interesting way I learnt this was by making physical prototypes of my design using thick paper and double-sided tape; the thick paper makes your UI elemets flat, and the double sided tape provides elevation. Use an overhead light, or the flashlight of your phones to see how shadows are looking, and choose the design which looks sensible to you!

Again, a very valid read for UX Team 4 cc @Sarahrp ; I would recommending reading (or even passively viewing the link above) to get a clearer understanding of how shadows make a visual difference.

Thank you @rachit_jain.
@UX-Team4-June1: Please check this out!