With modern technology ever approaching the realm of science-fiction, it feels as though we are constantly learning new gestures to interact with our myriad of devices. But what if, instead of just making the fiction a reality, we put a little more reality back into our devices? Could we isolate the things we sense intuitively in the real world and incorporate those elements intentionally into digital design? Spoiler alert: we can. And Google did.

Google’s “Material Design” was not only a facelift for their brand, but established new guidelines for designing digitally. According to Google: “Material Design is inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink.”

The key elements of Material Design:

The Visuals – Google introduces bold colors, geometric forms, and intentional hierarchy. These elements follow the classic principles of design and live within an organized grid system.

The Movement – The animation of elements smooths transitions and guides the user fluidly through the interface.

Tactile Surfaces – Taking cues from paper and ink, digital surfaces are reimagined as layered elements within a space, taking light, texture, and shadow into consideration.

How Material Design has made your digital experience better (or at least cooler) without you even noticing:

Don’t press the button!

In the real world, a normal button sits above a larger surface, is pressed into that surface, released, and then returns to its initial raised position – you know… buttons. With digital devices, there’s obviously no way to actually press into the surface, unless of course it’s 2006 and you, along with everyone else worth knowing, still has a Motorola RAZR. In 2019, our full bleed glass screens have a small gap of space between the pixels on the device and the glass that you actually touch. This isn’t a detail that the normal person realizes when using their device, but it does have a subconscious effect on the user. So, instead of the button appearing to move unnaturally down and away from the user’s touch, Google uses the small space in the glass to create a “button” that appears to lift up to the users touch. Even though this experience doesn’t mimic a real life button, the seemingly magnetic effect is familiar and ends up feeling more natural.

“Can we add a drop shadow or something?”

Humans crave depth within design. This gives reason to why realistic perspective paintings have always been so popular among the general public and why (more unfortunately) drop shadows and gradients tend to be the go-to for novice designers. Icons and elements in Material Design have subtle shadows, but they aren’t just arbitrarily conjured up by someone with a drop shadow tool. In order to capture the realistic nuances of how shadows play across surfaces, the designers hand cut paper models and experimented with various lighting techniques.

On screen, shadows adjust with movement and elevation of elements. This may or may not be obvious, but the more spread and feathering (blurriness) a shadow has, the further it seems from the surface behind it. Shadows that are darker, sharper, and closer to an objects edge make the object appear closer to the surface behind it. By taking advantage of these familiar depth cues, Google created an implied environment where elements layer in shallow space.

Sick moves

How many times per day/hour/minute do you switch between phone screens? Opening and closing apps, swiping through profiles, writing reviews, adding to-dos to your calendar…we’re all guilty of it. Any clue what happens between those things? Transitions between pages hardly ever get noticed, and that’s okay because they aren’t supposed to be stealing the show. Their purpose is to guide you smoothly through your digital navigation. But next time you open your Gmail app, pay attention. Many apps and sites will redirect you to a new page by simply having the current page disappear and the new one simultaneously appear in its place. Google, however, takes this small moment to show off. Pages glide on and off with ease as elements of new pages very subtly settle into place. Check out the hamburger menu on the “Search mail” bar the next time you need to search your Gmail inbox. It does some sweet flips and then transforms into the back arrow. If you click the arrow, it transitions back intothe hamburger menu. It isn’t super significant, and it doesn’t make the app function better, but it’s the tiny details like this that make Material Design really beautiful.

Hey that’s a good idea, let’s do that!

Another cool thing about Material Design is that Google wasn’t worried about other designers stealing their dope ideas. On the contrary, they laid out all of their guidelines for anyone to access, learn about, and utilize. This has had broad impacts on the app world since released and if you pay attention you’ll see echoes of Material Design’s principles all over the place.

Everyone loves a good before-and-after.

If you want some more info, check out this behind-the-scenes video that dives into the making of Material Design!