Member-only story
The 2nd Usability Heuristic
Make UI shadows realistic
An interface that follows real-world harmony and natural order allows users to understand and react to interfaces in a logical and obvious way.
My first attempt to write on Medium with the same concept as this article had the best stats to date:
As a starting point, let’s examine the physics law of light:
This image shows how the shadow of an object with a point source of light will appear as a solid called an umbra.
Generally, there isn’t a point light source, so we perceive objects using light sources similar to those in the image. Thus, we see a penumbra.
With a change in distance between surface and object, shadows and penumbras will change.
How close an element is to the user determines its importance in user interface design. Therefore, the penumbra can create a visual hierarchy.
Figma’s blur option can be used to create this illusion for UI elements.
By default, X and Y are set to simulate holding a phone or sitting in front of a computer, where the light source is usually above our heads.
We are not done yet. There is one more thing to consider.
We usually have multiple light sources in the real world, which means an object will cast multiple shadows.
For this reason, I recommend using multiple shadows on the UI element. SmoothShadow is an excellent plugin in the Figma community that allows you to create multiple shadows.
