Make UI shadows realistic
source link: https://uxplanet.org/make-ui-shadows-realistic-f66ed05916aa
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK