Text Link

Basics

A collection of insightful tips and guides to help you become a great designer.

<path d="M6.6729 18.3516C8.50093 18.3516 9.79065 18.989 10.3738 19.3626C10.5757 19.4725 11.0804 19.7802 11.215 19.8352V2.38462C10.4075 1.04396 8.23178 0 6.03364 0C3.06168 0 0.672897 1.62637 0 2.9011V18.5714C0.011215 19.5824 0.594392 20 1.30093 20C1.81682 20 2.13084 19.8352 2.48972 19.5714C3.16262 19.044 4.71028 18.3516 6.6729 18.3516ZM17.3495 18.3516C19.3009 18.3516 20.8486 19.044 21.5215 19.5714C21.8692 19.8242 22.1944 20 22.6991 20C23.4056 20 24 19.5824 24 18.5824V2.9011C23.3383 1.62637 20.9607 0 17.9888 0C15.7794 0 13.615 1.04396 12.7963 2.38462V19.8462C12.9308 19.8022 13.4355 19.4835 13.6486 19.3626C14.2206 18.989 15.5103 18.3516 17.3495 18.3516Z" fill="currentColor"/>
Apply Shadow in Design

Apply Shadow in Design

In this design article, we 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.

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.

Natural shadows:
They are created by sunlight. The angle of the sunshine supply determines the length of the shadow.
Artificial shadows:
This includes all shadows that are created by artificial light.

The Shadow Application in Design

The placement and behavior of shadows are important considerations in design. Gradients, highlights, and drop shadows create dimension in your design elements and direct the attention of the viewer. The use of shadows can dramatically improve the overall aesthetics and functionality of your design 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 they should blend into the design effectively.

To be able to use shadows effectively in your design process, you need to understand the basic laws of shadow casting and its key elements first.

Gray toned illustration of shadow components
Image source: paintdrawpaint

The Light Source

The light source defines the direction and position of the incoming rays of the light source. Natural light has the position of the sun 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 that is facing the light source and closest to it.

The Shadow/Core Shadow

The shadow/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 areaof the shadow is called the core shadow.

The Cast Shadow

The shadow itself is on the object, but the cast shadow is created by the object itself. The cast shadow is projected on the surface the object is resting on. The cast shadow always points in the same direction of 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 as 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 get frequently over-used.

Shadows in Skeuomorphic Design

Especially in the Skeuomorphic Design period hat 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 that created 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)
Windows 95 Setup screen, Apple skeuomorphic Homescreen icons
Image on the left: Windows 95 Setup screen, image source: extremetech
Image on the right: Apple skeuomorphic Homescreen, image source: materialdesignblog

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.

Comparison Flat Design card and Material Design card blue background with red dot
Comparison Flat Design and Material Design. Image source: medium

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 a z-axis made the incorporation of shadows in the UI elements redundant.

The Material Design language, originally developed by Google, incorporated the z-axis in its clean and simplistic approach and focused heavily 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 made room for completely new opportunities to use color and space.

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 the 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 nevertheless completely different in the material and neumorphic design style.

Three caculators in purple, black, grey and white with analog buttons
Comparison Skeuomorphism, Flat Design and Neumorphism. Image source: justinmind

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 completely different.

White Neuomorphic card and white Material/Modern card with Hex color codes
Comparison Neumorphic card and Material card. Image source: uxdesign
White Neuomorphic card and white Modern/Material card with Hex Codes
Comparison Neumorphic card and Material card. Image source: uxdesign

Why You Should Incorporate Shadows in Your Design

The purpose of shadows in 2D/UI design is not primarily to simulate 3D objects as realistic as possible for the user but to direct and ease the navigation of the interface in a subtle way.

The integration of shadows with a subtle, and 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 the opacity, angle, or color of your shadow 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 attention of the user to previously overlooked design elements.

Remember the basic guidelines we have given you and have fun playing around with the shadow attributes!

Download
Download the PDF version here.
https://www.toptal.com/developers/javascript-minifier/