narrate-journal-app-material-design

Google Asks Devs “What Is Material?”, Breaks Down The Environment Aspect Of Material Design

February 13, 2015 - Written By Justin Diaz

 

For developers, it can be a little bit of a challenge updating apps to reflect the most up to date design guidelines set forth by Google, which in this case is referred to as Material Design. While most of us can take a look at Material Design and immediately know that an app designed with this UI style will feature use of bold, vivid colors and more apparent animations and transitions, Google breaks down some perhaps less noticeable details about some of the “material” core components of Material Design with the actual material environment, as Google seems keen on helping developers with Android app tips to help them create the most compelling and beautiful apps possible.

In doing this they focus on two key components or characteristics of what makes up the Material Design landscape. The first is a 3D world, as Google states that a material environment is a 3D space. Meaning that the design of an app not only has to take into account the length and width of displays of any given device, which Google breaks down to as the Y axis and X axis, but also make use of a third axis they call the Z axis which adds an element that appears to extend the view of the app towards the user making things look like they’re essentially popping out of the display, or somewhat 3D, hence the reason they stated material environments are a 3D space. They also state that every sheet of material on the Z axis should have a standard 1dp thickness.

The second characteristic they go over focuses on light and shadows. At its most basic, the light and shadows can help to make things appear sort of 3D, which plays a little on their statement about material environments being a 3D world. They explain this characteristic by mentioning that virtual lights “illuminate” the scene and give the effect that an object is casting a shadow. Google breaks this idea down into two different types of shadows each from a different light source that can be cast on objects within a material environment, being shadows cast from ambient light which creates consistent, soft shadows from all angles, and shadows cast from key light which creates directional shadows. Google states that all shadows within the material environment can be cast from the two above mentioned light sources. The material environment can also include a combination of the key and ambient lights to create a shadow consisting of both types together, as pictured below next to the depictions of the ambient light shadows and key light shadows separately