This experiment plays around with drop shadow. In the experiment, I played with drop shadows in an aesthetic dashboard design to explore more possible options that can be made with it.

What is a Drop Shadow?

In graphic design, a drop shadow is an effect that gives an object the appearance of having a shadow. Drop shadow enhances an image and give it some dimension and depth. 

Drop shadows are typically decorative and serve to enhance the look of images.

Common Use Cases of Drop Shadow

Drop shadows are commonly used for on-hover effects / card designs. This is because drop shadows make an object appear as if it is hovering.

Drop shadows are also used in the famous Skeuomorphism / Neumorphism UI Trends. Note that in these effects, the drop shadow are not always black (#000000), they can be any color that fits the design.

Experiment Outcome

In my experiment, I used drop shadow for on-hover effects as well as the separation of "metric cards" in the dashboard.

I noticed that drop shadow is very useful in differentiating an object from its background, especially when they have similar colors. The floating effect draws the users' focus more towards the information on the object itself, and in this case, the numbers for each metric.

View more on this experiment here!

________________________________________________________________________________________

Hey dribbblers 👋🏻

Feel free to send me your feedbacks to limjunyi03@gmail.com.