Architectural Concepts in Google’s Material Design
I graduated from Berkeley’s architectural program a decade ago. Although I have forgotten most of what I’ve learned (as I am no longer in the field), I do remember something about line weights, sections, elevations, and plans.
I was reading through Google’s Material design guidelines, specifically the “Elevations and shadows” section, when I was suddenly struck by how the cross-section diagrams reminded me of architectural drawings.
The Level 0 in the architectural section is equivalent to the 0 DPs in the Material design cross-section. The distance from top of floor is similar to how Material design defines elevation as “measured from the front of one surface to the front of another.” Although in architecture, we usually measure from the top of the floor to the center point of the object (and not the top of the object).
Even from a plan perspective, certain architectural guidelines are seemingly translated to Material design. In an architectural plan, elements closest to you (taller elements) would have thicker and darker lines, and elements further away from you (shorter elements) would have thinner and lighter lines.
In Material design, shadows are used to imply heights. Softer and larger shadows indicate a higher elevation (the magenta FAB), whereas cripser and smaller shadows indicate a lower elevation (the lighter blue box).
Material design is grounded in the physical realm, with guidelines on how behaviors and interactions should reflect the parameters of physical material. Architecture is about how varying surfaces, with different materials, come together to mold a space. Hence, similarities in visual interpretations of this physicality make sense, and is, in fact, only logical.
