Shadows and Blur Effects in Modern UI Design

https://blogs.adobe.com/creativecloud/xd-essentials-shadows-and-blur-effects-in-modern-ui-design/

by babich • 10 years ago

75 66 10 years ago

blogs.adobe.com

freelancezombie• 10 years ago

Why is this here?

bbx• 10 years ago

I've always been confused by this type of animation: http://blogs.adobe.com/creativecloud/files/2016/10/blur07.gi...

The shadow grows, hinting at the fact that the element is elevated, and moves closer on the z-index. What bugs me is that since the element is moving closer, shouldn't the element itself grow bigger as well?

The right and bottom animations show the blue button as getting closer, but the end result on the left doesn't reflect that at all.

pvdebbe• 10 years ago

Oh yeah, it should. Would look rather nice as well. The size gain doesn't have to be more than couple percents, maybe 3-5?

Swizec2• 10 years ago

Maybe it doesn't come closer enough for perspective to kick in?

Why is it coming closer in the pressed state? Aren't I pushing it down?

nnq• 10 years ago

EXACTLY! "Material design" is very much opposed to how "real-world material interfaces" would look like in anything above the basics. Think about fucking ripple & light efects, but on otherwise solid-looking and matte-looking surfaces!

I mostly label this whole "material design" crap as "flat & minimalistic (metro-like) design" + "minimal volumetric efdects backported from the abandoned skeumorphic design bandwagon" in order to give the user some "visual cues".

In truly like the style and cues of material design practically... but there is a subconscious "uncanny valley intuition" about it that triggers a primitive warning sign in my primitive bran or something... kind of like "fear/stress about something that is practically the right thing but it... deceives you in a way and maybe also in others". I find both flat/minimalistic and rich/skeomorphic interfaces more soothing / calming / trust inducing.

I think most banks and ecommerce and enterprise/infrastructure UI professionals also share this intuition with me: you see in most banking, AWS etc. UIs always "a touck of skomorphism" plus "a lack of unnatural/magical effects", and it makes you trust more the app, be more *relaxed and confident" and willing to open you soul & wallet to it...

moeffju4• 10 years ago

It's not a physical button. In material design language, the button rises up towards your finger.

DonHopkins6• 10 years ago

Maybe the button is staying in the same place vertically, but you're pressing the entire background and all its other contents except the button away from you. :/

louhike• 10 years ago

I think it is inspired by industrial drawing/design where real perspective is not taken into account.

cyxxon• 10 years ago

I guess that growing it would throw of the balance of the UI elements in the grid too much visually... /shrug

What I find much worse is that the pressed state has a bigger shadow, meaning it is further away from the plane it casts the shadow on. Isn't that the wrong way around, or is the labeling wrong here?

pluma2• 10 years ago

The shadow can be explained if you consider that it moves closer to the light source as well.

moeffju4• 10 years ago

It's correct in the article, the intention being that the element rises towards your finger.

on_and_off• 10 years ago

well as long as it projects a shadow it is enough for you to know that it is a button.

They can decide that the button raises when you touch it, since you are not touching it anyway, just the surface in top of it.

So at least it is coherent with the material principles.

amelius3• 10 years ago

What bugs me is that since the element is moving closer, shouldn't the element itself grow bigger

Depends. If they used parallel projection, then not. See [1]. This corresponds to an infinite focal length.

[1] https://en.wikipedia.org/wiki/Parallel_projection

vvanders• 10 years ago

Yup, also traditional perspective is also incredibly non-linear so the distance from button -> back face is in the range where large perspective changes happen compared to where the virtual camera is.

Also depends on what their lighting model is and a whole host of other factors.

teekert• 10 years ago

Now that you have mentioned it, the button seems to shrink when coming up. Stranger still is that nobody seems to find it strange that it comes up when pressed, sure there are such physical button but pressed should mean further down imo.

onion2k• 10 years ago

The button isn't a physical button though, so it doesn't have to behave like one. Sometimes you can make a better UI by ignoring reality - for example, in this case, bringing a button in to focus and apparently nearer to the user could make it much more obvious that it's the one you're about to press, rather than making it smaller and farther away.

bluthru• 10 years ago

The only thing that animation suggests is that the white background is lowering and that's frustrating.

adgasf• 10 years ago

I think that the blur effects are the worst part of the latest iOS iteration... why make the background for your content a muddy, distracting smudge of colors?

mrich2• 10 years ago

Don't understand this either, it makes the OS look a bit cartoonish. I like the material look much better.

huhtenberg2• 10 years ago

Erm... nice screenshots and all, but isn't this a trivial rehash of UI patterns that are plain obvious? I don't quite understand who the target audience of this sort of article is.

sime2009• 10 years ago

It isn't plainly obvious to the Apple and Microsoft UI designers...

neppo• 10 years ago

Microsoft doesn't use shadows at all

deliriousferret• 10 years ago

How do you achieve the blurred background in CSS?

EvilTerran2• 10 years ago

Looks like "backdrop-filter: blur(<length>)" would be the way to achieve the effect shown... but it's not supported by anything yet:

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-fi...

But if you want to blur a whole element (eg, your main page content while a modal is open) instead of just the part behind another one, that would be "filter: blur(<length>)" - and works in all modern browsers except IE (even my Android Firefox displays the demos on this page correctly):

https://developer.mozilla.org/en/docs/Web/CSS/filter#blur()_...

And IIRC there's some non-standard way to achieve the same effect in IE.

madeofpalk2• 10 years ago

backdrop-filter is supported by Safari.

pluma2• 10 years ago

Platform support for backdrop-filter: http://caniuse.com/#search=backdrop-filter

Basically just Safari and only with a prefix.

joshontheweb• 10 years ago

I use this on the background element.

  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  filter: blur(3px);

mrich2• 10 years ago

Those UI animations are all fine and dandy until you log in via remote desktop or similar, over VPN on a not-so-fast network. Then you learn to hate it.

Is there an easy way to disable such animations in the browser, e.g. via Firefox extension?

scq• 10 years ago

You could use Stylish and something like:

    * {
        transition-delay: 0ms !important;
        transition-duration: 0ms !important;
        animation-delay: 0ms !important;
        animation-duration: 0ms !important;
    }

I believe setting delay/duration to 0ms should still fire events for the animation/transition (unlike "animation/transition: none") which should avoid breaking anything that relies on those events.

amelius3• 10 years ago

You can also create the illusion of 3d from a moving display panel, and adjusting the image according to the position of the viewer. Can't find an example now.

cuu508• 10 years ago

Are you thinking of parallax, parallax scrolling?

amelius3• 10 years ago

Yes, but the scrolling should happen depending on the viewpoint of the user.

I've seen a demo where the user tilts a tablet, and the image on the tablet is adjusted to create a 3d effect.

DonHopkins6• 10 years ago

Check out Johnny Lee's awesome "Head Tracking for Desktop VR Displays using the WiiRemote"!

https://www.youtube.com/watch?v=Jd3-eiid-Uw

More great stuff: http://www.johnnylee.net

vwbigurgiuh• 10 years ago

the shadow elevation effect can also been seen as a flat surface lying on top of another flat surface with all dust surrounding it, or as a rectangular hole inside a surface with stains around it

leonatan2• 10 years ago

Another feature iOS has is the subtle parallax motion effect, driven by the gyroscope. I think this effect also helps perception of UI layers.

GRiMe2D• 10 years ago

Why button from material design rises when you press it? Can someone explain me why google decided this?

moeffju4• 10 years ago

Yes, Google can right in their Material Design guidelines. The button rises "up" to meet your finger.

ethanbond5• 10 years ago

That's more of a description than an explanation. If they're trying to establish metaphor to the real world then this obviously simply doesn't meet the bar.

kalekold• 10 years ago

tl;dr Shadows and blur provide visual cues that allow users to better and more easily understand what is going on.

agumonkey• 10 years ago

Biased by growing up with CUA GUI design principles, I can't help but to think that no amount of amazing code (html, css3, js jit) will give a significant advantage compared to that Win2K form screenshot.

I feel like the "magazine" trend gave way more expressiveness to talk to the user (finer more dynamic layouts) but not much more bandwidth the other way around.

DonHopkins6• 10 years ago

Hardly "modern", but here's a description of the graphical design of The Sims pie menus [1] that I impemented in 1999 and wrote up in 2001:

The classic papers on transparent user interfaces include Toolglass and Magic Lenses: The See-Through Interface (1993) [2], and A Taxonomy of See-Through Tools (1994) [3]. The pie menus in The Sims [4] use a combination of desaturation, darkening, and alpha blending to feather the edges of the menu.

Why transparency and the other effects? I didn't want the pie menus to obscure too much of the scene behind them. You can see through the pie menu as the animation continues on in real time behind it. The head of the currently selected person is drawn in the center of the pie menu, and follows the cursor by looking at the currently selected item.

I found it necessary to somehow separate the head from the rest of the scene, otherwise it looked like a giant head was floating in a room of the house! Drawing a solid opaque menu background would obscure too much of the scene. But even a partially transparent menu background still did not visually separate the head from the background scene enough. It looked muddy and cluttered, instead of crisp and bright.

So instead of simply alpha blending, I actually made it desaturate the background (removes the color so it's gray scale), and darken it (like casting a colorless shadow).

I wanted the colorful head to look sharp and bright up against the dark gray background. So the effect looks at the Z buffer to clip out the head in the menu center, so it remains bright and colorful against the dark gray background. That gives it visual "pop" that separates the head from the background. The edges of the effect are feathered, so there's no sharp line dividing the inside and the outside of the menu (useless visual clutter).

The gray shadow just gradually tapers off with distance, suggesting that the pie menu active area extends to the edge of the screen, not confined to the borders of a circle. The labels are drawn with high contrast drop shadows around the pie menu, so they stand out and easy to read, partially overlapping the shadow so they're look like they're part of the menu.

There's special code to perform that particular combination of pixel filters in real time, to every frame just after the 3D rendering phase.

The pixelated censorship effect works the same way as the pie menu shadow, like a Photoshop filter run after the 3D rendering phase. There's a special suit type that's tagged as a "censorship" suit. It consists of bounding boxes attached to the varius bones of the skeleton that you can select to censor. So if you just want to censor the head, you attach the head censor suit to the head bone. The 3D character renderer transforms the 8 vertices but doesn't draw anything, and stashes the screen bounding box away for the pixelation filter to draw later. That's how it can censor just the crotch of naked men, but also the chests of naked girls gone wild.

[1] https://www.youtube.com/watch?v=-exdu4ETscs

[2] https://research.tableau.com/sites/default/files/1993-Toolgl...

[3] http://www.billbuxton.com/TGtaxonomy.html

[4] http://www.tsomania.net/assets/images/gameguides/sprinklers_...

DonHopkins6• 10 years ago

Blurring is a memory bandwidth and therefore power intensive effect, so it's more costly in terms of battery live on mobile devices than other more local effects like darkening and desaturation. Of all the visual effects today's gui design fads could choose to fetishize, blurring is unfortunately power hungry.

If "Material Design" was intended to conserve battery life, it shouldn't have been so focused on looking blurry. ;) Of course you can draw simple soft shadows without actually blurring the content underneath, but Apple's blurry iOS gui and macOS desktop windows using NSVisualEffectView's "Vibrancy" and blurring effects require a lot of power.

3 Differences – Apple’s HIG vs Google’s Material Design Standards: http://nectardesign.com/3-differences-apples-hig-vs-googles-...

"Apple believes that mobile devices should be seen as a window in to another world. They embrace infinite depth in their applications and use components such as their alert buttons and text messages with blurred background to create the feeling that the items are floating and exist in their own space. Another example of this would be the click wheel for their timer. See how the numbers recede in to the background? That would never happen in material design."

I don't remember the exact link, but I read an article from Apple describing the GPU accelerated blurring and "vibrancy" effects they rolled out in their desktop user interface, which cautioned about how expensive they were, because the more you blur, the wider the region of support of the convolution kernel, therefore the more memory accesses you have to perform per pixel. Even on the desktop, they warned that it had a considerable cost. So it's a pity that blurring has become so trendy on battery operated mobile devices.

Maybe it was this WWDC talk -- it contains lots of useful information about NSVisualEffectView performance:

Adopting Advanced Features of the New UI of OS X Yosemite: http://asciiwwdc.com/2014/sessions/220

"You want to use the active state explicitly, very sparingly.

It can affect performance and battery life, because if you have a lot of visual effect views around they're always active, but you probably want to use it in places where you know that view is always going to be active and maybe it's a panel that can't become key for whatever reason." [...]

"So you notice that blur we had and this may not surprise you but the blur effect isn't exactly free. It does cost something, and that something is graphics performance and battery usage. And sometimes, though, the cost is worth the results. So, something you should be aware of here is you're not trying to not use this effect. You want your app to look beautiful. You just need to pay attention to striking a balance between that appearance and the resource utilization." [...]

"Corbin mentioned that layers are often required, especially for in window blurs, and layer usage is increasing just in general." [...]

"If you add a lot of VisualEffectViews to your app and all of the sudden you notice that maybe your window resizing animations or your full screen transitions have become slow, you can set this [Accessibility Preference / Display Subsection / Reduce Transparency] to Yes, and this will avoid the cost we pay when doing that blur.

So if you notice when this is turned on your performance is fine, and when this is turned off your performance is kind of sluggish, it's probably you're using a VisualEffectView that's too large or too many VisualEffectViews, and that's a cue to dial down the transparency and blurring in the app." [...]

"Something I want to point out about a lot of our drawing here is that the blur effect actually happens out of process, it happens in the Windows Server, and furthermore, it happens on the GPU, and that means that profiling your own process won't necessarily tell you as much as you would hope." [...]

"If you're just doing a lighter development on your app, having activity monitor open can sometimes be useful.

It's certainly not as in-depth as instruments but it will tell you how much CPU you're using and more importantly it'll tell you how much energy your app is taking to do what it's doing.

And if you see that operating a little higher than you're expecting that may be another cue that your VisualEffectView usage has gotten a little excessive." [...]

"And finally, you folks remember like 40 seconds ago we talked a little bit about performance, and I do hope you'll take some of those performance messages to heart when you leave."

This Ars Technica review of OS/X 10.10 also discusses the cost of the blurring and vibrancy effects: http://arstechnica.com/apple/2014/10/os-x-10-10/4/

"These visual effects aren’t free; they cost CPU and GPU cycles each time the foreground or background changes. Behind-window blending is implemented in the window server, which is responsible for compositing all the visible windows into the final screen image. (This compositing process has been GPU-accelerated since 2002.) Moving a window that uses vibrancy in the behind-window blending mode does not require the application that owns the window to redraw any content; the window server handles the re-compositing as the background changes.

Within-window blending, on the other hand, is handled by each individual application. The system frameworks use Core Animation layers (also GPU-accelerated) to apply the necessary filters, blending, say, the contents of a scrolling view with the toolbar that partially covers it.

Given Apple’s recent focus on energy saving in Mavericks, it’s a bit strange to see Yosemite lean so heavily on a dynamic effect like vibrancy. To keep things from getting out of hand, vibrant views become opaque when inactive. In practice, this means only the front-most window in the currently active application—plus the Dock, menu bar, and any notification alerts that may dance across your screen—will burn cycles artistically blending foreground and background content."

DonHopkins6• 10 years ago

As long as we've got a lot of GPU cycles to burn, I'd love to see a live video user interface with beautiful simulated vidicon camera tube blooming and overdriving effects.

Overblooming picture effects from my Sony AVC-3250CE B&W camera: https://www.youtube.com/watch?v=aKnTNHyPNrs

More target overdrive visual effects from Concord NEI-17 vidicon camera: https://www.youtube.com/watch?v=Srga4173uaY

The Tubes - White Punks On Dope (1977 R0X M1X): https://www.youtube.com/watch?v=0rpXIuTcOiI

Vidicon Camera Tube: https://en.wikipedia.org/wiki/Video_camera_tube#Vidicon

"An image orthicon camera can take television pictures by candlelight because of the more ordered light-sensitive area and the presence of an electron multiplier at the base of the tube, which operated as a high-efficiency amplifier. It also has a logarithmic light sensitivity curve similar to the human eye. However, it tends to flare in bright light, causing a dark halo to be seen around the object; this anomaly is referred to as "blooming" in the broadcast industry when image orthicon tubes were in operation. Image orthicons were used extensively in the early color television cameras, where the increased sensitivity of the tube was essential to overcome their very inefficient optical system of the other parts of the camera."

Bloom Shader Effect: https://en.wikipedia.org/wiki/Bloom_(shader_effect)

"Practical implementation: Current generation gaming systems are able to render 3D graphics using floating point frame buffers, in order to produce HDR images. To produce the bloom effect, the HDRR images in the frame buffer are convolved with a convolution kernel in a post-processing step, before converting to RGB space. The convolution step usually requires the use of a large gaussian kernel that is not practical for realtime graphics, causing programmers to use approximation methods.

Use in Games: Some of the earliest games to use the bloom effect include Outcast and Ico. Bloom was later popularized within the game development community in 2004, when an article on the technique was published by the authors of Tron 2.0. Bloom lighting has been used in many games, modifications and game engines such as Quake Live, Cube 2: Sauerbraten and the Spring game engine. The effect is popular in current generation games, and is used heavily in PC, Xbox 360 and PlayStation 3 games as well as Nintendo GameCube and Wii. Popular browser-based games such as the MMORPG RuneScape make use of the bloom effect as well."

Afterimage Shader Effect: https://en.wikipedia.org/wiki/Afterimage_(shader_effect)

"Afterimage is a computer graphics effect used by video games. The effect takes the bright parts of a rendered image of the scene, and then fades in a motion blur style fashion as the scene progresses. The result is that bright areas leave a fading trail when the camera is moving. Afterimage can be used to enhance blooming. In some games, the process is named light trail."

Shadows and Blur Effects in Modern UI Design

Related Stories