Shadows and blur. Basics of UI design

Shadows, blur and how they relate to neomorphism πŸ˜‰

Welcome to Part 3 of this series on UI Design Basics. This time, we will look at two of the most commonly used effects – shadows and blur

Shadows

Falling shadow

Outside shadows (or drop shadows) are the most common effect used in user interface. A typical shadow depends on off-center (x, y, or both), blur, and opacity. In the example above, the shadow is moved 20 points down the Y-axis and then blurred on the left.

Shadows and blur.  Basics of UI design

Some tools, such as Sketch, also have a “spread” value, which makes the shadow look like it was being cast by a smaller element.

The most important parts of any shadow are the X, Y and Blur axes. The latter value must be a number greater than 0, while the X and Y position can be negative numbers, moving the shadow in almost all directions.

Shadows and blur.  Basics of UI design

You can also stack shadows by adding more than one shadow to one object for some pretty interesting results. In the example below, there are three shades of different shades of blue (each darker than the previous one), each shaded 3 points down.

Shadows and blur.  Basics of UI design

Neomorphism

We must again mention neomorphism. This shadowing and negative X and Y values ​​are the basic principles required for neomorphism to work.

Shadows and blur.  Basics of UI design

Natural look, soft shadows

A natural looking shadow is one of the elements that can have the greatest impact on a design. The most important part of a natural look is to avoid pure black shadows and use shadows based on your base color instead. Pure blacks create too much contrast, making the shadow look unnatural. If you study real-life shadows, you will notice that they often vary in hue and tone.

Shadows and blur.  Basics of UI design
The default shadows are often too dark and can overshadow the rest of the design.

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

Shadows and blur.  Basics of UI design

Inner shadows

Inner shadows are relatively rare in interfaces. They have the same parameters as the drop shadow, but they appear inside the object.

They are not as popular because most interfaces are a series of layers overlaid on top of each other. In this case, the outer shadow makes sense as it provides depth to the design. The inner shadow suggests that there is a hole in the object.

Shadows and blur.  Basics of UI design
The example on the left uses a classic layer stack like most interfaces. Adding an inner shadow to any of the layers (right) will create the illusion of a hole in the layers. This can break the visual structure of the stack.

The only use cases for this style are input fields in forms (both form fields and check boxes or radio buttons) and extruded forms used in neomorphism. In some cases, they can be used to give objects a more natural look, but they should be used sparingly.

Shadows and blur.  Basics of UI design
You can achieve this effect by using inner shadows and reversing the X and Y direction.

The main problem with neomorphism is the use of inner shadows and extruded shapes as the “selected” state. The perceived difference between standard and selected states is so small that even non-visually impaired users sometimes cannot see it. This, in turn, leads to one of the biggest disadvantages of neomorphism – the accessibility issue.

Shadows and blur.  Basics of UI design

Blur

Most design tools nowadays use Gaussian blur, which expands the effect evenly in all directions. Its main meaning is radius. The larger it gets, the more noticeable the blur effect.

Gaussian blur is the most commonly used type of blur. You can use it to transition between screens or to show a little realistic depth of field by selectively blurring the background.

Shadows and blur.  Basics of UI design
The higher the blur value, the more blurry the image is – this is quite obvious πŸ™‚

Gaussian blur as shadow

Shadows and blur.  Basics of UI design

This type of blur can also help you create custom spot shadows under objects. Just blur the ellipse and place it under the object casting the shadow. You can use it alone or combine it with standard drop shadow for a more unique result.

Blur background

Background blur became popular when Apple started using it in its OS to achieve a smoky glass effect on some screens. A subject with this effect blurs everything underneath.

Shadows and blur.  Basics of UI design
In this example, a square overlay with 90% opacity and background blur is placed to the right of the image. As you can see, the three white dots behave differently when placed under an object using the background blur effect

Motion blur

Motion blur simulates the movement of an object in the direction specified by an angle value. The blur value works the same as with Gaussian blur.

Shadows and blur.  Basics of UI design

Zoom blur

Zoom blur occurs when an object becomes blurred from the inside. This technique is often used in photography, but not in interface design.

Shadows and blur.  Basics of UI design

For this particular type of blur, you can set the source of the blur. By moving this point, you can achieve interesting effects.

Shadows and blur.  Basics of UI design

Basics of UI Design

That concludes our three-part series on the basics of shapes, objects, and effects used in user interface design. They are based on free book chapters πŸ“˜ Designing User Interfaces… You can download these chapters for free πŸ’ Learn design basics with videos from this YouTube playlist: Design Basics!

Articles from the series:

Part 1: Fills and Borders. Basics of UI design

Part 2: Everything you need to know about shapes and objects. Basics of UI design

Part 3: Shadows and Blurs. Basics of UI design

Part 4: Screens and Pixel Density. Basics of UI design

Part 5: How to start designing a mobile application. Basics of UI design

Part 6: 5 Tips to Improve Button Design Basics of UI design

Leave a Reply

Your email address will not be published. Required fields are marked *