Learning session 08: Shadows — Types and tips
Topic
After an amazing weekend spent in Peja, today I proceeded to learn what are shadows, including the types and the guidelines for casting them. Let’s continue into the land of shadows.
What I learned
In today’s learning session I familiarized myself with different types of shadows and blended these shadows into the background or foreground.
Shadows
If you imply shadows into elements it will create an aesthetic and depth look in your product.
Shadows are very helpful when you want to make element stand out from the background.
There are some rules when using shadows in design, the most important one is not to overuse or use them improperly, shadows as aesthetic they look, they can make users confused which would worsen their usability.
There as 6 more tips that I found out. It will help elements look more natural and friendly to users.
- Do not use default shadow
- Make shadow look soft
- Consider Creating Shadows As a Layer with Blur
- Make Material Colors As Shadow
- Make shadow color more natural
- Inspire yourself from the real world
Key shadows
Key shadows are produced by key lights. As a result of ambient lighting, ambient shadows are softer and emerged. To produce the most realistic-looking shadows, we frequently blend key and ambient shadows into the design.
Shadow x-axis
This shadow is the horizontal of the shadow. The shadow moves in one of two directions: left or right depending on the value, positive or negative.
Shadow y-axis
The vertical path of the shadow on the y-axis is determined by coordinates. Contrary to popular belief, negative values make the shadow rise while positive values cause it to fall. However, this convention makes more sense if you take into account that light typically comes from above.
Horizontal offset shadow
Different types of shadows are created by using the x-axis and y-axis of the system. On another hand, some of the shadows go in one direction, while the axis in the other direction remains 0. A horizontal offset shadow means represent the position only along the x-axis.
Vertical offset shadow
This type of shadow makes your element look more natural and stimulates real-world light behavior. People love a product that mimics real-life behavior.
Hard shadow
This shadow hits on top of an object. They have a darker appearance and sharp edges.
For example, if you flash out an object you can see the shadow behind the object, it depends on the angle at which you put the light.
Soft shadow
This type of shadow gives the vibe of a natural and friendly product to users. Soft shadows are an effect that displays how shadows tend to fade at the edges or create overlapping lines on objects based on many elements, including light angle and distance.
Inner shadow
This shadow gives elements depth. Some elements that use this shadow appear more natural to users, but they can be very tricky. So note this detail while using this shadow.
Shadow blur
The shadow blur implies shadow borders where it blends with the background element.
Blur improves the realism of shadows and preserves the visual hierarchy of layout elements.
Shadow spread
This shadow can make the element feel hugger than it is because of the shadow spread.
This shadow has a radius on both axes y-axis and the x-axis.
If the spread is large, the element will look larger. I found these two ways of blending the shadow into your product.
Foreground color blending
The term “foreground color blending” refers to the process of blending the shadow color with the color of the element itself with the shadow applied.
For this shadow, it’s best suited to choose a darker hue of the element than reducing the opacity.
Background color blending
This type of blending occurs in the way we pair the shadow with the background colors.
“You can enhance the shadow by selecting a similar hue as the element it’s cast on. Also, keep a lower opacity (10–30%) and set a higher level of blur (16–40px) to maintain a balanced look.”
Shadow grouping
Different elements that we see on the internet or any social media, sometimes coexist with a group.
Sometimes you will frequently need to apply shadows to multiple interface elements.
While using these shadows you have to keep in mind if you treat one element separately with causes a messy and confusing product, which leads to breaking the User Experience.
Multiple shadows
You could wish to put several shadows on several layers if you’re attempting to create a more natural-looking shadow. The number of shadows can be changed to produce smaller or bigger spreads, or the blur can be increased to give the shadows a more, dreamlike appearance.
This makes the users notice the most important element in your product, which helps maintain the visual hierarchy among the elements.
What challenged me
In today’s learning session I had my main challenge was understanding how you blend a shadow into background or foreground and what effect gives in to your product.
It was also challenging to learn which is the key shadow or the hard shadow and what are their differences. After researching and learning several times I achieved to acknowledge this information about shadows.
Thank you for coming this far. Your feedback and critique are appreciated and welcomed.
