Shadows and Blur Effects in Modern UI Design
blogs.adobe.com
blogs.adobe.com
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.
Depends. If they used parallel projection, then not. See [1]. This corresponds to an infinite focal length.
Also depends on what their lighting model is and a whole host of other factors.
Why is it coming closer in the pressed state? Aren't I pushing it down?
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...
Funnily enough, the opposite is true for me. Banks and eCom sites that don't have polished modern flattish interfaces make me think the company is out of its depth and likely insecure
Copy/pasting from another comment of mine, quotes from the manifesto:
> 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."
Or am I not touching the button? That seems weird considering my finger is literally on the button.
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?
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.
Is there an easy way to disable such animations in the browser, e.g. via Firefox extension?
* {
transition-delay: 0ms !important;
transition-duration: 0ms !important;
animation-delay: 0ms !important;
animation-duration: 0ms !important;
}
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.
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.
> The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
That heading is in summary, and it doesn't contradict the part I quoted.
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.
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.
Basically just Safari and only with a prefix.
Besides, most applications of backdrop-filter would fit into 'progressive enhancement' and the rest of the browsers that don't support it would just fall back no a non-blurred transparent background which is fine most of the time.
Hopefully other browsers will catch up soon.
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
filter: blur(3px);https://www.youtube.com/watch?v=Jd3-eiid-Uw
More great stuff: http://www.johnnylee.net
I've seen a demo where the user tilts a tablet, and the image on the tablet is adjusted to create a 3d effect.
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."
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."
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_...