How To Use Shadows And Blur Effects In Modern UI Design

Sponsored ArticleHow To Use Shadows And Blur Effects In Modern UI Design

• By Nick Babich
• February 22nd, 2017
• Experience DesignUIUser Experience
• 7 Comments

When you examine the most successful interaction designs of recent years, the clear winners are those who provide an excellent functionality. While functional aspect of a design is key to product success, aesthetics and visual details are equally important — particularly how they can improve those functional elements.

In today’s article, I’ll explain how visual elements, such as shadows and blur effects, can improve the functional elements of a design. If you’d like to try adding these elements to your designs, you can download and test Adobe XD¹for free and get started right away.

Shadows And User Interface Discoverability Link

There’s a reason GUI designers incorporate shadows into their designs — they help create visual cues in the interface which tell human brains what user interface elements they’re looking at.

Design Affordance Link

Since the early days of graphical user interfaces, screens have employed shadows to help users understand how to use an interface. Images and elements with shadows seem to pop off of a page, and it gives users the impression that they can physically interact with the element. Even though visual cues vary from app to app, users can usually rely on two assumptions:

• Elements that appear raised look like they could be pressed down (clicked with the mouse or tapped with a finger). This technique is often used as a visual signifier for buttons.
• Elements that appear sunken look like they could be filled. This technique is often used as a visual signifier for input fields.

You can see how the use of shadows and highlights help users understand which elements are interactive in this Windows 2000 dialog box:

Create a Visual Hierarchy and Impression of Depth Link

Modern interfaces are layered and take full advantage of the z-axis. The position of several objects in the z-axis act as important cues to the user.

⁴

Shadows help indicate the hierarchy of elements by differentiating between two objects. Also, in some cases, shadows help users understand that one object is above another.

⁷

Why is it so important to visualize the position of an element within three-dimensional space? The answer is simple — laws of physics.

Everything in the physical world is dimensional, and elements interact in three-dimensional space with each other: they can be stacked or affixed to one another, but cannot pass through each other. Objects also cast shadows and reflect light. The understanding of these interactions is the basis for our understanding of the graphical interface.

Let’s have a look at Google’s Material Design for a moment. A lot of people still call it flat design, but the key feature is that it has dimension — the use of consistent metaphors and principles borrowed from physics help users make sense of interfaces and interpret visual hierarchies in context.

¹⁰

Provide Visual Feedback Using Elevation Link

One very important thing about shadows is that they work in tandem with elevation. The elevation is the relative depth, or distance, between two surfaces along the z-axis. Measured from the front of one surface to another, an element’s elevation indicates the distance between surfaces and the depth of its shadow. As you can see from the image below, the shadow gets bigger and blurrier the greater the distance between object and ground.

¹³

Some elements like buttons have dynamic elevation, meaning they change elevation in response to user input (e.g., normal, focused, and pressed). Shadows provide useful clues about an object’s direction of movement and whether the distance between surfaces is increasing or decreasing. For users to feel confident that something is clickable or tappable, they need immediate reassurance after clicking and tapping, which elevation provides through visual cues:

¹⁵

Blur Effects Link

Blur Effects for Mobile Apps Link

When Apple introduced iOS 8, it raised the bar for app design, especially when it came to on-screen effects. One of the most significant changes was the use of blur throughout, most notably in Control Center; when you swipe up from the bottom edge of a screen you reveal the Control Center, and the background is blurred. This blur occurs in an interactive fashion, as you control it completely with the movement of your finger.

¹⁶

Apple moved further in this direction with the latest version of iOS which uses 3D Touch for the flashlight, camera, calculator and timer icons. When a user’s hand presses on those icons, real-time blur effect takes place.

¹⁸

Blur technique has the following benefits for modern mobile interfaces: Link

Make User Flow Obvious

Blur effects allow for a certain amount of play within the layers and hierarchy of an interface, especially for mobile apps. It’s a very efficient solution when working with layered UI since it gives the user a clear understanding of a mobile app’s user flow.

The Yahoo Weather²⁰ app for iOS displays a photo of each weather location, and the basic weather data you need is immediately visible, with more detailed data only a single tap away. Rather than cover the photo with another UI layer, the app keeps you in context after you tap — the detailed information is easily revealed, and the photo remains in the background.

²¹

Direct the User’s Attention

Humans have a tendency to pay attention to objects that are in focus and ignore objects that aren’t. It’s a natural consequence of how our eyes work, known as accommodation reflex²³. App designers can use it to blur unimportant items on the screen in an effort to direct a user’s attention directly to the valuable content or critical controls. The Tweetbot²⁴ app uses blur to draw users attention to what needs to be focused on; the background is barely recognizable, while the focus is on information about accounts and call to action buttons.

²⁵

Make Overlaid Text Legible

The purpose of text in your app is to establish a clear connection between the app and user, as well as to help your users accomplish their goals. Typography plays a vital role in this process, as good typography makes the act of reading effortless, while poor typography turns users off.

In order to maximize the readability of text, you need to create a proper contrast²⁷ between the text and background. Blur gives designers a perfect opportunity to make overlaid text legible — they can simply blur a part of the underlying image. In the example below, you can see a restaurant feed which features the closest restaurants to the user. Immediately, your attention goes to the restaurant images as they feature a darkened blur with text overlay.

Blur Effects in Web Design Link

Blurred effect can seamlessly blend into the website design.

Decorative Background

Together with full-screen photo backgrounds, frequently used for website decorations, blur backgrounds have found their niche in modern website design. This decorative effect also has a practical value: by blurring one object, it brings focus to another. Thus, if you want to emphasize your subject and leave the background out of focus, the blurring technique is the best solution.

The website for Trellis Farm uses an iconic image of a farm to give visitors a sense of place for its website. For added interest, the photo is layered with a great typeface to grab a visitor’s attention. The blur is nice because it helps the visitor focus on the text and the next actions to take on the screen.

²⁸

Progressive Image Loading

As modern web pages load more and more images, it’s good to think of their loading process, since it affects performance and user experience. Using blur effect you can create a progressive image loading effect. One good example is Medium.com, which blurs the post image cover as well as images within the post content until the image is fully loaded. First, it loads a small blurry image (thumbnail) and then makes a transition to the large image.

³⁰

This technique has two benefits:

• It helps you serve different images sizes depending on the device that makes the requests, optimizing the weight of the page.
• The thumbnails are very small (just a few kilobytes) which combined with the blurry effect allows for a better placeholder than a solid color, without sacrificing payload.

If you want to reproduce this effect on your site see the Resources and Tutorials section.

Testing Websites’ Visual Hierarchy

Blur effect can be used not only as visual design technique but also as a good testing technique for page visual hierarchy.

A blur test is a quick technique to help you determine if your user’s eye is truly going where you want it to go. All you need to do is, take a screenshot of your site and add a 5–10 px Gaussian blur in Photoshop. Look at a blurred version of your page (like the Mailchimp example below) and see what elements stand out. If you don’t like what’s projecting, you need to go back and make some revisions.

³¹

Mailchimp’s homepage passes the blur test because the prominent items are the sign-up button and text copy which states the benefits of using the product.

When Blur Effect Can Cause Problems Link

Overuse of Blurs in Mobile Apps

Blur effect isn’t exactly free. It costs something — graphics performance and battery usage. Since blurring is a memory bandwidth and power intensive effect, it can affect system performance and battery life. Over-used blurs result in slower apps with largely degraded user experiences.

We all want to create a beautiful design, but at the same time, we can’t make users suffer from long loading or empty battery. Blur effects should be used wisely and sparsely — you need to find a balance between great appearance and the resource utilization. Thus, when using blur effects always check CPU, GPU, Memory and Power usage of your app (see section Resources and Tutorials for more information).

Blur Effect and Text Readability Issues

Another factor that you should remember — blurring is not as dynamic. If your image ever changes, make sure the text is always over the blurry bits. In the example below, you can see what happens when you forget this.

³³

Blur Effect and Content-Heavy Pages

Blurred background can cause a problem when it is used for screens filled with a lot of content. You can compare two examples below. The screen on the left using blur effect looks dirty, and the text seems unreadable. The screen without blur effect is much clearer.

³⁵

Resources and Tutorials Link

The following resources can help you implement blur effect into your design:

• Adobe has a pretty nice tutorial on how to add creative blur to photos³⁸
• In his article “How Medium Does Progressive Image Loading³⁹,” José M. Pérez provides solutions on how to incorporate progressive image loading using blur effect using CSS filters or HTML canvas elements.
• The article, “Creating A Blurring Overlay View⁴⁰,” provides examples of applying the blur effect to images in Apple iOS 8+ using the UIVisualEffectView class, with both Objective-C and Swift code samples. This is a native API that has been fine-tuned for performance and great battery life.
• In his article, “iOS App Performance: Instruments And Beyond Igor Mandrigin⁴¹,” show how to measure performance of the different areas of the app.

Conclusion Link

Shadows and blur effects provide visual cues that allow users to better and more easily understand what is occurring. In particular, they allow the designer to inform users on objects’ relationships with each other, as well as potential interactions with these objects. When carefully applied, such elements can (and should) improve a functional aspect of design.

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app⁴² is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app.

You can check out more inspiring projects created with Adobe XD on Behance⁴³, and also visit the Adobe XD blog⁴⁴ to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free⁴⁵.

(il, aa)

Footnotes Link

1. 1 https://adobe.ly/2knsUsI
2. 2 https://www.smashingmagazine.com/wp-content/uploads/2017/02/1-large-opt.jpg
3. 3 https://www.smashingmagazine.com/wp-content/uploads/2017/02/1-large-opt.jpg
4. 4 https://www.smashingmagazine.com/wp-content/uploads/2017/02/2-large-opt.png
5. 5 https://material.google.com/material-design/environment.html#
6. 6 https://www.smashingmagazine.com/wp-content/uploads/2017/02/2-large-opt.png
7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/02/3-large-opt.png
8. 8 https://material.google.com/material-design/elevation-shadows.html#elevation-shadows-elevation-android
9. 9 https://www.smashingmagazine.com/wp-content/uploads/2017/02/3-large-opt.png
10. 10 https://www.smashingmagazine.com/wp-content/uploads/2017/02/9.1-large-opt.png
11. 11 https://developers.googleblog.com/2014/06/this-is-material-design.html
12. 12 https://www.smashingmagazine.com/wp-content/uploads/2017/02/9.1-large-opt.png
13. 13 https://www.smashingmagazine.com/wp-content/uploads/2017/02/5-large-opt.jpg
14. 14 https://www.smashingmagazine.com/wp-content/uploads/2017/02/5-large-opt.jpg
15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/02/object-elevation-shadow-opt.gif
16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/02/7-large-opt.jpg
17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/02/7-large-opt.jpg
18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/02/8-large-opt.jpg
19. 19 https://www.smashingmagazine.com/wp-content/uploads/2017/02/8-large-opt.jpg
20. 20 https://itunes.apple.com/us/app/yahoo!-weather/id628677149?mt=8
21. 21 https://www.smashingmagazine.com/wp-content/uploads/2017/02/9-large-opt.jpg
22. 22 https://www.smashingmagazine.com/wp-content/uploads/2017/02/9-large-opt.jpg
23. 23 https://en.wikipedia.org/wiki/Accommodation_reflex
24. 24 http://tapbots.com/tweetbot/
25. 25 https://www.smashingmagazine.com/wp-content/uploads/2017/02/10-large-opt.png
26. 26 https://www.smashingmagazine.com/wp-content/uploads/2017/02/10-large-opt.png
27. 27 https://blogs.adobe.com/creativecloud/xd-essentials-typography-in-mobile-apps/
28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/02/12-large-opt.jpg
29. 29 https://www.smashingmagazine.com/wp-content/uploads/2017/02/12-large-opt.jpg
30. 30 https://www.smashingmagazine.com/wp-content/uploads/2017/02/progressively-loaded-jpg-image.gif
31. 31 https://www.smashingmagazine.com/wp-content/uploads/2017/02/14-large-opt.jpg
32. 32 https://www.smashingmagazine.com/wp-content/uploads/2017/02/14-large-opt.jpg
33. 33 https://www.smashingmagazine.com/wp-content/uploads/2017/02/15-large-opt.png
34. 34 https://www.smashingmagazine.com/wp-content/uploads/2017/02/15-large-opt.png
35. 35 https://www.smashingmagazine.com/wp-content/uploads/2017/02/16-large-opt.jpg
36. 36 https://tubikstudio.com/case-study-echo-designing-uxui/
37. 37 https://www.smashingmagazine.com/wp-content/uploads/2017/02/16-large-opt.jpg
38. 38 https://helpx.adobe.com/photoshop/how-to/add-motion-blur-effects.html
39. 39 https://jmperezperez.com/medium-image-progressive-loading-placeholder/
40. 40 http://stackoverflow.com/questions/17041669/creating-a-blurring-overlay-view
41. 41 https://medium.com/@mandrigin/ios-app-performance-instruments-beyond-48fe7b7cdf2#.y7dpuock4
42. 42 https://adobe.ly/2knsUsI
43. 43 https://www.behance.net/search?content=projects&sort=appreciations&time=week&tools=387566349
44. 44 https://blogs.adobe.com/creativecloud/design/
45. 45 https://adobe.ly/2knsUsI

↑ Back to topTweet itShare on Facebook