How to apply shadow in design
This design article will give an overview of the application and terminology of shadows in design.
What is a shadow?
A shadow is a dark area where light emitted from a light source is blocked by an opaque object. Shadows are shaped because light cannot transit through the opaque object. The object blocks the light and forces it to move past the blocking object and onto the next surface. The resulting shadow is a two-dimensional shape or a reverse projection of the object blocking the light.
Jumpstart your ideas with Linearity Curve
Take your designs to the next level.
The size of a shadow depends on the distance between the light source and the object blocking it. The closer the item is to the light source, the more it obstructs the light, resulting in a bigger, softer shadow. If the object is more distant, the shadow becomes sharper and smaller.
Dark, hard-edged drop-shadows suggest a dark room with a single light source. Light, soft-edged drop-shadows suggest a room rich with diffuse light.
They are created by sunlight. The angle of the sunshine supply determines the length of the shadow.
This includes all shadows that are created by artificial light.
The application of shadow in design
The placement and behavior of shadows are essential considerations in design. Gradients, highlights, and drop shadows create dimension in your design elements and direct the viewer's attention. Using shadows can dramatically improve your design's overall aesthetics and functionality and add levels of depth and realism.
In general, shadows in design should simulate the natural, real-world behavior of light and shadow-casting (key and ambient light) and blend into the design effectively.
To use shadows effectively in your design process, you must first understand the fundamental laws of shadow casting and its key elements.
The light source
The light source defines the direction and position of the incoming rays of the light source. Natural light has the sun's position as its only light source; artificial light permits multiple light sources.
The highlight
Defined as the highlight is the area that shines the brightest on an object; it is the point facing the light source and closest to it.
Unlock the Secrets of Shadow Effects
Learn to add depth and realism to your designs with our detailed guide on shadow techniques in vector graphics.
The core shadow
The core shadow signifies the darkest part of the object that is the furthest away from the light source. The darkness of shadows can vary in shade. The darkest area of the shadow is called the core shadow.
The cast shadow
The shadow itself is on the object, but the object itself creates the cast shadow. The cast shadow is projected on the surface the object is resting. The cast shadow always points in the same direction as the incoming rays but always to the opposite side of the object.
The application of shadow in design
The responsibility of a web designer is to create color patterns for light-emitting two-dimensional screens. The use of shadows creates depth and the illusion of space in 2D design. The shadow is an essential part of graphic design. There are countless ways to incorporate it into the image design process.
Drop-shadows and gradients are two of the most commonly used design elements. Other relevant elements are the shadow opacity, the shadow angle, the shadow offset, the shadow radius, and the shadow softness (often named blur).
The drop-shadows and gradient shadow elements are very easy to create with any graphics program, but the downside is that these two shadow effects frequently get over-used.
Shadows in skeuomorphic design
Especially in the Skeuomorphic Design period that peaked in its use from the early to mid-2000s, designers exhausted the layer styles of Photoshop and similar software programs to their maximum capacity, making especially screens of smaller sizes feel very cluttered and crowded. The icons were created with reflections, shadows, and correct alignment lines, creating a 3D feel.
Even though visual elements could vary, users could always make these two assumptions:
- Elements that look raised can be pressed down (e.g., buttons)
- Elements that look sunken can be filled in (e.g., input fields)
Shadows in material design
During the mid-2010s, the creative pendulum swung back to a more minimalist approach with the Flat Design trend and the development of the Material UI-design language.
The design and shadow behaviors were not about depicting objects from the real world as accurately as possible. It was all about clarity, order, continuity, and simplicity. The Flat Design approach omitted the z-axis for the ultimate simplicity. The lack of z-axis made incorporating shadows in the UI elements redundant.
The Material Design language, initially developed by Google, incorporated the z-axis in its clean and simplistic approach, focused on strict rules for its continuity and featured often animated transitions. Minimalistic shadows were used to create the illusion of depth. The new design approach allowed new opportunities to use color and space.
Get creative with Linearity Curve.
Visit our Academy for free shadow design courses.
Shadows in neumorphic design
After almost a decade of a more simplistic 2D design approach, a new design language emerged: Neumorphism is prominently featured in macOS Big Sur. The icons and UI elements are designed with shading and highlights from a 12 o'clock light source. It reconnects to the physical, haptic approach of the skeuomorphic design but without excessive layer style shadows.
The behavior and projection of shadow are entirely different in the material and neumorphic design style.
Material Design cards look like they float with an indefinite shadow.
Neumorphic Design cards look like they are extruded from the background. The shadow projection and its interaction with light are entirely different.
Why you should incorporate shadows in your design
The purpose of shadows in 2D/UI design is not primarily to simulate 3D objects as realistically as possible for the user but to direct and ease the interface's navigation subtly.
Integrating shadows with a subtle, carefully calculated projection is an ideal way to make the design more accessible for its users.
If you choose to incorporate shadows in your design, remember there are many ways to implement them. Play around and test the different parameters we mentioned in our article. See how these settings affect the look and accessibility of your design.
Changing your shadow's opacity, angle, or color can make a world of difference in how your design appeals to the viewer. You can transform your design from business style to playful and fun by just altering the shadow color attributes f.ex.
Adjusting the blur or offset attributes of your shadows can redirect the user's attention to previously overlooked design elements.
Remember the basic guidelines we gave you, and have fun playing around with the shadow attributes!
Jumpstart your ideas with Linearity Curve
Take your designs to the next level.