
Shadows and Blur Effects in Modern UI Design - babich
https://blogs.adobe.com/creativecloud/xd-essentials-shadows-and-blur-effects-in-modern-ui-design/
======
bbx
I've always been confused by this type of animation:
[http://blogs.adobe.com/creativecloud/files/2016/10/blur07.gi...](http://blogs.adobe.com/creativecloud/files/2016/10/blur07.gif)

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.

~~~
cyxxon
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?

~~~
on_and_off
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.

------
adgasf
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?

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

------
mrich
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
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.

------
huhtenberg
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
It isn't plainly obvious to the Apple and Microsoft UI designers...

~~~
neppo
Microsoft doesn't use shadows at all

~~~
72deluxe
As my sibling has highlighted, there is a shadow on Windows 10 when one window
hovers over another. Weirdly, the popup menu on the desktop DOES have a shadow
but the right-click menu on the start menu does not...

One disappointing part of Windows 10 is this lack of consistency. Icons are
the worst - 25 years of icons all bundled together. Looks at the icons inside
C:\Windows\explorer.exe or shell32.dll for a mishmash of graphical styles from
yesteryear. This makes programs like MMC feel out-of-place on the modern
system.

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

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

~~~
ethanbond
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.

~~~
pauloday
Material design is built out of this "material" that mimics some real world
things like shadows for user affordance, but is mostly magical. I'm pretty
sure the only real world metaphor they're trying to use for the button is a
floating panel of some magical material that floats closer to the screen when
you tap it.

~~~
ethanbond
Edit: You edited your comment, but I'll leave the stuff below for posterity.
As a response to your new edit: a selectively applied metaphor boils down to
stylization. That's fine by me, I would just prefer that they admit that no
design abstraction is airtight. What you call "magic" here can also be called
"arbitrary stylization."

To be fair, putting something like this together is obscenely difficult and
kudos to the Goog for sharing it with everyone. I just wish it were a little
less word-of-god-y. The fact is that the material metaphor is not a "unifying
theory of a rationalized space and a system of motion." It's inspiration, at
best.

\-----------

Response to your pre-edit:

Really?

> Material is the metaphor

> The material is grounded in tactile reality, inspired by the study of paper
> and ink, yet technologically advanced and open to imagination and magic.

"It's grounded in reality... but not!"

> Surfaces and edges of the material provide visual cues that are grounded in
> reality... Yet the flexibility of the material creates new affordances that
> supercede those in the physical world, without breaking the rules of
> physics.

"Except for rules of physics like things moving against the force applied to
them, or shadows changing without the light source, object, or perspective
changing."

> The fundamentals of light, surface, and movement are key to conveying how
> objects move, interact, and exist in space and in relation to each other.
> Realistic lighting shows seams, divides space, and indicates moving parts.

"Except where we decide we don't want to be realistic."

This is all fine. Stylistic choices _do_ have a place in design, of course. I
just really hate the language you see all over design systems that essentially
resolves to "p and not p." "Physically accurate and totally physically
inaccurate."

Not everything needs a manifesto to prove that it's not just arbitrary
stylization, especially when the manifesto itself, in describing said design
justifications, is leaky.

~~~
pauloday
Sorry about that, I have a bad habit of publishing my fist draft. I agree with
what you've written. Like you say I don't think they're trying to avoid
arbitrary stylization or selective metaphors, rather providing some arbitrary
styles and selective metaphors that make up a consistent design. It's fine if
you don't like it, but I haven't seen anyone who likes it pretending it's
anything more than that.

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

------
agumonkey
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.

------
deliriousferret
How do you achieve the blurred background in CSS?

~~~
EvilTerran
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...](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)

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()_...](https://developer.mozilla.org/en/docs/Web/CSS/filter#blur\(\)_2)

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

~~~
madeofpalk
backdrop-filter is supported by Safari.

~~~
EvilTerran
...but only with a prefix, and only the most recent versions, and it doesn't
have much market share. " _Effectively_ nothing supports it", if you'd rather.

~~~
prashnts
Yup. I noticed Apple has updated the top navbar on the new product pages where
it is enabled. It falls back to unblurred-translucent container on other
browsers.

Hopefully other browsers will catch up soon.

~~~
leonatan
Chrome has experimental support through a flag. However, the Apple pages are
broken with the flag enabled.

------
amelius
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
Are you thinking of parallax, parallax scrolling?

~~~
amelius
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.

~~~
obituary_latte
Do you mean like github's 404 page?
[https://github.com/404](https://github.com/404)

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

------
DonHopkins
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](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](https://www.youtube.com/watch?v=Srga4173uaY)

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

Vidicon Camera Tube:
[https://en.wikipedia.org/wiki/Video_camera_tube#Vidicon](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)](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)](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."

------
DonHopkins
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-...](http://nectardesign.com/3-differences-apples-hig-vs-googles-
material-design-standards/)

"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](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/](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."

------
vwbigurgiuh
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

------
DonHopkins
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](https://www.youtube.com/watch?v=-exdu4ETscs)

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

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

[4]
[http://www.tsomania.net/assets/images/gameguides/sprinklers_...](http://www.tsomania.net/assets/images/gameguides/sprinklers_control_pie_menu.jpg)

------
freelancezombie
Why is this here?

