I recently had the opportunity to partake in a Google Design Sprint with fellow colleagues from Automattic in collaboration with the Material Design team including Rachel Been, the Creative Director for Material Design. We’re looking into a design system of sorts, because that’s the cool thing these days, and relying on Material Design’s learnings to guide us forward. I was honored to join the design sprint remotely each day and contribute through, what appeared to them as, a talking head.
With introductions and a few flash talks out of the way, we jumped into work head on. For the remainder of the sprint, I participated with a group exploring a Material Design foundation around the concept of elevation. Elevation is MD’s ways of talking about the z-index in CSS, but it does so in a way that brings clarity, beauty, and cohesion to the product.
Just look at the beauty behind that elevation diagram! I never really thought about z-index that way. I always just threw some shading on the element, z-indexed it up, and voila — I’m done. But look at the effort with shading that comes from MD.
Shadows were the thing that separated Material Design from the popular flat UI way back when. For me, it was that moment I realized I didn’t have to follow the trends. I could just do what worked. Shadows had gotten a bad wrap, and were dropped during the flat UI craze, but Material Design showed that they can be used purposefully with success. MD has continued from that point to become something quite extraordinary. I’ve learned quite a bit from the thought and detail within the documentation. Elements don’t just overlap, but they might just collide with one another if they’re on the same plain. UIs aren’t stagnant anymore, they move. When elements move within a screen, they need to move in context to other elements. To prevent unexpected collisions, it’s important to think about elevation. It’s amazing that when we think about elevation, elements take on a more material feeling. Items become closer while other items reside in the back. Lighting has an affect causing shadows to diffuse across the screen.
Elevation has been a way for me to unify my design. It forces me to think in tangible ways that doesn’t regularly happen in the digital world. Long live the z-index!