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.
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.
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.
Neomorphism
We must again mention neomorphism. This shadowing and negative X and Y values are the basic principles required for neomorphism to work.
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.
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.
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.
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.
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.
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.
Gaussian blur as shadow
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.
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.
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.
For this particular type of blur, you can set the source of the blur. By moving this point, you can achieve interesting effects.
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