UX

Shadows: what you need to know about them in 2023

Design should not feel sham. It should reflect a real-world experience, with a lot of attention to dimensions. One way to do it is to work with shadows.

Don’t stick to defaults, customize

A lot of design software will have a default shadow option. Don’t fall into this trap. The amateur move is to draw an object and drop a template shadow. But these shortcuts are easy to spot, appear dated, and will take away from the modern look you want to achieve.

Beautiful Shadows, a Figma plugin, will help you create elegantly compiled shadows. There is feathering around the edges, a nice blend out, and the object really pops.

To master your shadowing skills, you should consider the following.

Layering

Don’t just create one shadow. This doesn’t allow for any visual transition between the object and the surface, and it makes the illustration style seem overly simplistic. Layering shadows together creates a smoother, softer look that reflects the reality of gradients that a natural light source might cause. This example shows how layering achieves that effect:

To better understand light sources against objects, use this website.

Coloring

Shadows, while dark, are not black! It definitely requires a lot less thinking to just use a black box. But if we want to keep coloring true to reality, then shadows are actually the same color as their background, just toned down.

If you have an object popping out of a pink surface, your shadow should be deepening shades of magenta!

Sizing

Shadows can also create a hierarchy within your objects. As we add dimension, that means we are elevating certain design elements above others. The bigger the shadow, the more lifted the object, and the more attention is called to that element.

Beware of overdesign

Remain cautious of overexerting the tips above. There are also trends within the UX/UI design community that are over-eager to shadow every object.

Here, you can see a nice case, but every element of the design is shadowed to the point that the dimension of the experience is hard to understand:

Image courtesy: behance.net/gallery/155546049/Kinjo-Game-Store-App

These elements all feel like they have conflicting relationships with the background, and the excessive shadowing takes away from the legibility of the objects:

Image courtesy: dribbble.com/shots/10281231-Neumorphic-UI-Kit

Shadow toolkits and packages

Going back to Material Design examples, we can understand why they seemed more structured and formulaic. Their shadows were created based on measurements of the actual shadows when a lamp is pointed straight at a piece of paper.

Behind the scenes of Google teams’ hard work

It is a clean, good, and nice design guideline, their resources prove valuable to a lot of different styles and aesthetics. However, the result is stilted, lacking the natural variant of light in real life, and doesn’t account for the translation into digital visuals. The current trend in design displays more attention to shadows being softer, smoother, and less strict.

One more thing

Creating realistic and modern shadows in design requires more than just a click on “drop shadow” in Figma. There are many factors to consider, and it can be a complex process.

Our team at Lunacy is working on a new feature that will make the process easy for you. A new Lunacy tool will give you a solution that already accounts for the three major steps to good shadows that you just learned about: coloring, layering, and sizing. Create effects that pair well with the background and are feathered with layers. Here’s a sneak peek of a future tool:

It is just a UI draft, but you can already see how advanced it will be.

Stay tuned to Lunacy Twitter to be updated about this feature.

natalia

Recent Posts

The ultimate graphics plugin for your Miro boards

This Miro plugin has it all: icons, illustrations, and photos from the Icons8 library to…

2 weeks ago

Expanded icon library and smoother icon search in Pichon

New Pichon for MacOS got updates which make your experience even better. Let's see what…

3 weeks ago

Inside Icons8 illustration lab: 2024 trends unveiled

A list of what comes next in digital art from a professional point of view.…

3 weeks ago

Time-saving hacks on how to make a modern design for your article easily

Discover seven time-saving hacks for modern article design to stand out and captivate your target…

3 weeks ago

AI humans starring in a football game

Winning Streak Games turned Generated Photos' AI humans into playable PC game characters. Here's a…

3 weeks ago

How to take full control over your AI generations

A step-by-step guide to manage every detail of your generated photo and get AI-generated content…

4 weeks ago

This website uses cookies.