3

In material design, the box shadows are defined in sets of two (https://codepen.io/sdthornton/pen/wBZdXq)

Like so (each card appears more forward than the last):

.card-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.card-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.card-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

What is the logic behind the decision to have two shadows? It obviously looks nicer than a single box shadow would, but there must be some reason why.

My current guess is that some amount of surface reflection is taken into account. Either that or perhaps shadow fades are meant to be curved (non-linear opacity dropoff) and this was the cheapest (CPU) way to achieve that look.

What is the logic behind these design decisions?

  • Logic at Alphabet is as easy as ABC. In most aspects of their endeavours, google's approach to Android is as simple as this: a) What's Apple done, now? b). Let's do something similar! c) Update LinkedIn profiles d) repeat. – Confused Apr 3 '18 at 17:18
  • The logic of this, and most design, was discovered by scientists and artists long before any of these contemporary things. Anyways, I think I found what I was looking for. en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra – Seph Reed Apr 3 '18 at 17:21
3

@Seph Reed:

The light logic as I understand it is to quantify a simple stylistic guide to achieve both ambient occlusion shadowing and direct cast shadows, which combine to indicate a "height" in "z" space off the screen towards the user, to help differentiate overlapping elements in agreement with this styleguide section.


(https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-shadows)

And this equivalent for android developers:

(https://developer.android.com/training/material/shadows-clipping.html

Aaaaaaand... here is the canonical explanation from the Google Material guide on environment to explain ambient vs cast shadows:

https://material.io/guidelines/material-design/environment.html#environment-light-shadow

Light and shadow Within the material environment, virtual lights illuminate the scene. Key lights create directional shadows, while ambient light creates soft shadows from all angles.

Shadows in the material environment are cast by these two light sources. In Android development, shadows occur when light sources are blocked by sheets of material at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only. The following example shows the card with a height of 6dp.

Shadow cast by key light enter image description here

Shadow cast by ambient light enter image description here

Combined shadow from key and ambient lights enter image description here

Note that by this light logic in combination with the shadow and layering reference, this means that only those interface items whose "z" delta is small (1 layer's worth of difference) should cast a noticeable ambient shadow - if an interface element is 2 or more layers above the item receiving its cast shadow, you should not add the ambient shadow.

  • While researching this I have also found this :en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra. If you could please add the link to your answer and let people know about the scientific terms, I think it would be awesome. Or, with your permission, I may do it myself. – Seph Reed Apr 3 '18 at 22:25
  • Seph, These are not the same concepts at all. I specialise in rendering, and have recently used that same wikipedia article to explain shadow drawing from a sphere here in Stack Exchange Graphic Design. Ambient light is not described at all in that article - it is the light which bounces off all nearby surfaces, and which in aggregate, act like a diffuse light source aimed directly at (normal to) a given surface. If you look at the corners of a room, where the walls and ceiling come together, the slight shadows there are called "ambient occlusion". – GerardFalla Apr 3 '18 at 22:38
  • 1
    In the case we are discussing here, this is what a photographer or a renderer would call a "two light setup", which includes a general ambient light and one "key" light to provide clear directional light. The terms ubmra, penumbra and antumbra are all specific to single light sources, and do not include ambient light considerations whatsoever, and are therefore not helpful to this discussion. – GerardFalla Apr 3 '18 at 22:40
  • For your reference Seph - that other SE GD article: graphicdesign.stackexchange.com/questions/107536/… – GerardFalla Apr 3 '18 at 22:42
  • 1
    I do agree with that, but I think the strict adhesion to such scoping undermines the intention of requesting such knowledge. These questions are guidelines, touch points meant to be easily translatable. I can not know what question to ask, but, at least when I ask questions, the intent is to learn as much as possible, not to create strict boundaries for the answers I may recieve. – Seph Reed Apr 4 '18 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.