When Google announced Material Design I felt curious about it as a designer. I wanted to learn more after hearing about it causing splashes in the Design community and far beyond. After a deep study I felt that even though Material Design was not a new concept at that time, it still holds the immense popularity among designers as it did on the day of its launch. If you are new to this, you are probably wondering where to begin. The easiest place to start, is with material design specification itself.

What is material design?

Material design is a liberal design language developed by Google inspired by the study of “Ink and Paper”. It can easily make a link between traditional design theories and the new technologies. Basically material design is a visual interface design for Google applications. It also makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

Why material design

As a designer I feel these simple design principles give me more freedom to design a polished app. The material metrics references revealed by google help us understand and implement the measurement values for landscape and portrait orientations found on different devices & screens.
Material design can be used for all android devices running Android 2.1 OS and up. It targets the 2 most important functionalities within an app, ease of use and a colorful interface. It has also simplified the look and standardized the layout of an app.

Environment

Clean design, predominant animations, transitions, light and shadow create the environment for material design. As we all know objects in a 3D space have x, y, and z dimensions. According to google, within the material environment key light creates the directional shadows and ambient light creates soft shadows from all angles.

Properties

Properties are notable features to keep in mind while you’re implementing material design. Let us go through the most important points:

• Material thickness is always 1 dp. It can never be 0.

• Materials cast shadows that show the relative elevation between its elements.

• All contents are displayed within the boundary of that material. It does not add shadows to that material.

• Same point of space cannot be occupied by multiple elements simultaneously.

• A material can not be bend or fold.

• Multiple material sheets can join together & create a combined sheet of material. The process can be reversed by splitting it back to single.

• When within the material environment ( Material environment is a 3D space,which states that all objects have x, y and z dimensions  ) materials can be destroyed or generated.

• Movement of a material includes its axes.

• The motion of Z axis depends on the interaction of the user.

Elevation & Shadows

Elevation is the relative distance between two surfaces along the z-axis. A shadow is the indicator of the distance between the two surfaces and the amount of separation within them.

• All materials are 1 dp thick. To find the distance from one top surface of an element to the other, elevation is measured.

• An object can change its elevation. Objects that do not change have the default elevation.

• Some normal, focused or pressed elements have responsive elevation.

• The amount of separation between the two elements is reflected by the shadows. It indicates whether the distance between two surfaces is increasing or decreasing.

Material Relation

The way we organize the objects within an app determines the movement & relation of those objects to each other. They can either move independently of each other or be compelled by other objects that are higher in the hierarchy. All objects maintain a hierarchy based relationship such as Parent – Child. The child material is always subordinate to its parent material.

Elevation

Elevation depends on the content hierarchy of the object in Z space. How we determine the position of the objects in z-space depends on the content hierarchy that we want to express and also if the object needs to move independently from other objects.

Animation

Motion in the material design world is quite familiar with the real-world behavior of physical objects with respect to elegance, simplicity, and beauty. User can directly manipulate the material by dragging or finger swiping. This gives birth to a responsive interaction. A well designed transition can draw the attention of the user. Haphazard motion can distract the user’s attention.

Style

Style is the combined product of all the elements that help us design an app, in the material world. Examples include color, image, typography, icons & writing.

• Google suggests about 500 colors as primary colors and the rest as accent colors to create a usable palette for Android, Web, and iOS.

• Themes specify the darkness of the surfaces, level of shadow, and appropriate opacity of ink elements.
• Icons are of 2 types – Product icons & System icons – Product icons are used for Brand related communication. System icons are used for common actions like calling Home, Trash and so forth.

• Photography & Illustration are the tools of representation- user can express personal relevance, information through Photos or illustration

• Avatars are generally used to represent people. Logo avatars can be used to promote brand. Thumbnails are the pictures within the limited space.
• ‘Roboto’ is the standard typecase for android after the release of version 4.0 Ice cream sandwich. Noto is the standard typecase for all language for chrome OS.
• Writing should be easily understandable for all regardless of their culture or language.

In the next and final part of our article we are going to dive deeper into the principles and concepts of Material Design, starting with Layout Principles.