Summary

The website content provides an in-depth exploration of UI design principles, focusing on the use of shadows and blurs, and their application in the design trend known as Neumorphism.

Abstract

The article is the third part of a series on UI design basics, specifically delving into the use of shadows and blurs. It explains the technical aspects of drop shadows, including the use of X, Y, and blur values, and introduces the concept of 'spread' in tools like Sketch. The piece emphasizes the importance of natural-looking shadows using color rather than pure black, and discusses the role of Gaussian blur in creating depth and transitions. It also touches on the use of inner shadows, which are less common in UI design, and the accessibility concerns associated with Neumorphism. The article concludes by mentioning other types of blurs, such as background blur and motion blur, and provides a video resource for further learning.

Opinions

The author suggests that a natural-looking shadow is crucial for a design to look realistic and that pure black shadows should be avoided.
Neumorphism is highlighted as a trend that requires careful use of shadows and negative X and Y values to create a realistic effect, though it is noted for its accessibility issues.
Inner shadows are considered less popular in UI design, as they can disrupt the visual stacking of interface elements, but are acknowledged to be useful in specific cases like form inputs and Neumorphic design.
The article implies that Gaussian blur is a versatile tool for UI designers, useful for creating soft shadows, background blur effects, and even motion blur to simulate movement.
The use of background blur is praised for its ability to mimic real-world depth of field, similar to the effect seen in Apple's OS design.
The author expresses that while zoom blur is a interesting effect, it is not commonly used in interface design.
The piece concludes with a nod to the educational value of video content, offering a YouTube link for readers who prefer visual and auditory learning.

Part 3

UI design shapes & objects basics: Shadows and Blurs

Shadows, blurs and how they connect to neumorphism ;-)

Welcome to the third part of the UI Design super-basics. This time we’ll cover two of the most commonly used effects — shadows and blurs.

Shadows

Drop Shadow

Outer shadows (or drop-shadows) are easily the most common effect used in UI. A typical shadow relies on an offset from center (x, y, or both) a blur and an opacity value. In the example above the shadow is moved 20 points down on the Y axis and then blurred on the left side, or left without the blur on the right.

Some tools like Sketch also have a “spread” value, which makes the shadow look like a smaller element is casting it.

The most important parts of any shadows are the X, the Y and the Blur. The latter has to be a number larger than 0, while X and Y can also be negative numbers, moving the shadow in practically every direction.

You can also stack shadows by adding more than one to the same object for pretty interesting results. The example below has three shadows in three darker shades of blue, each transposed by 3 points down.

Neumorphism

Neumorphism in user interfaces

How UI trends reach for inspiration into the real world and what problems do we have to solve to make those trends…

uxdesign.cc

Knowing that we simply have to mention Neumorphism again. This stacking of shadows and negative X and Y values are the core principles necessary for making Neumorphism work.

Natural looking, soft shadows

A natural-looking shadow is one of those elements that can make the biggest impact in a design. The most important part of looking natural is avoiding pure black shadows and using a shadow derived from our primary color instead. Pure black makes the contrast ratio too big to look natural. If you study real-life shadows, you’ll notice they often vary in shade and tone.

The default shadows are often too dark and can overtake the rest of the design.

The best way to fix your shadows is to change them from black (default) to a darker shade of your primary color. In the example above the shadow is a dark purple with decreased opacity.

Inner shadows

Inner shadows are relatively rare in UI. It has the same parameters as a drop shadow, but it appears inside of the object.

They are not as popular because most interfaces are a series of layers stacked on top of one another. In that case, an outer shadow makes sense as it provides the depth. An inner shadow would suggest the object has a hole in it.

The example on the left uses a classic stack of layers, as seen in most interfaces. Adding an inner shadow to any of the layers (right) can result in an illusion of a hole created in the layers. That can break the visual structure of the stack.

The only use-cases of this style are form inputs (both form fields and checkboxes or radio-buttons) and extruded shapes in the Neumorphism method. They can be used to make the objects appear more life-like in some instances but should only be used moderately.

You can achieve this effect by using inner shadows on objects, and reverse the direction of X and Y.

The main issue with Neumorphism is the notion of using inner shadows and extruded shapes as a “selected” state. The perceivable difference between the standard and selected state is so small, that even non-visually impaired users can sometimes completely miss it. This in turn leads to one of the biggest accessibility flaws of Neumorphism.

Neumorphism will NOT be a huge trend in 2020

So… what will?

uxdesign.cc

Blurs

Most design tools nowadays have a Gaussian type blur that extends the effect in every direction evenly. Its primary value is the radius. The larger it gets, the more prominent the blur effect.

Gaussian blur is the most often used blur type. You can employ it into transitions between screens, or show a bit of realistic depth of field by selectively blurring the background.

The larger the blur value, the more blurry the image — this one should be self explanatory :)

Gaussian blur as a Shadow

This type of blur can also help you generate non-standard, point-shadows under objects. Just blur an ellipse and place it under the object casting the shadow. You can either use it on its own or combine it with a standard drop shadow for an even more unique result.

Background blur

Background blur became popular when Apple started using it in their OS to achieve that behind smoked-glass effect in some screens. An object with this effect applied blurs everything under it.

Motion blur

A motion blur simulates the movement of an object in a direction defined by the angle value. The blur value works the same as with Gaussian blur here.

Zoom blur

A zoom blur happens when the object becomes blurry from the inside out. It’s often used in photography, but not a great pick for interface design.

In this particular blur type, you can also set the origin of the blur. By moving that point around, you can achieve some interesting effects.

You can also watch me talk about shadows and blurs on video:

The basics of UI design

This concludes our three part series on basics of shapes, objects and effects used in UI design. This has been a part of the free chapters of 📘 Designing User Interfaces Ebook, and you can download these chapters free 🍒 Learn the basics of design in this YouTube playlist:📺 Design Basics!

You can find both the previous parts here:

All you need to know about UI design Shapes and Objects

Let’s talk about the very basics if you‘re considering becoming a UI designer. Part 1.

uxdesign.cc

UI design shapes & objects basics: fills and borders

All you need to know about fills and borders.

uxdesign.cc

The UX Collective donates US$1 for each article published in our platform. This story contributed to UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.