Where are shadows most effectively used in design?
TL;DR
Shadows are most effectively used in design to improve visual hierarchy and indicate functionality, particularly on elevated cards, buttons (including Floating Action Buttons and regular buttons in hover states), and various types of menus (like dialogs, dropdowns, and navigation bars). These shadows create depth and focus, making interfaces more intuitive and engaging by clearly distinguishing interactive elements from the rest of the design.
Detailed answer
Shadows are most effectively used in design to improve visual hierarchy, indicate functionality, and suggest interactivity and depth. Here are some elements where shadows are commonly applied:
Elevated cards
Shadows on cards, such as in Material Design, suggest elevation and separate them from the background, making the content more digestible and the layout more dynamic. This is especially helpful in dashboards or content-heavy platforms where different sections need to be clearly separated visually.
Buttons
For both Floating Action Buttons (FABs) and regular buttons, especially in a hover state, shadows indicate interactivity. The changing shadow depth on hover also reinforces user interaction, enhancing the feeling of engagement with the interface.
Related reading: Is it a good idea to use shadows on buttons?
Menus
Whether it's a dialog, dropdown menu, drawer, bottom sheet, or navigation bars, shadows create a layered effect. They distinguish these elements from other components on the screen, focusing user attention on the menu content and aiding in navigation. This is particularly important in complex interfaces where multiple interactions occur simultaneously.
Related reading: When is it better to avoid shadows?
🤝 Credits
Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!