Material Design Approach

Introduction

Material Design is considered as a remarkable step forward for the Google. The approach to design across Google’s products was scattered and chaotic; many felt that even Android was starting to look outdated. So Google needed a fresh new approach that would unify its products and improve products aesthetically. Hence, the Material Design was introduced by the search engine giant.

Material Design was originally codenamed and referred as “Quantum Paper”

Material Design is a design language used widely for Android devices. According to Matias Duarte Vice President of Design for Google, the idea behind Material Design is to provide a design language which imitates the feel of pen and paper. Material design has a lot to offer to the users; right from the physical edges and surfaces to work with to seams and shadows giving context to what parts of a digital design can be touched.

So What is Material Design?

Google officially announced Material Design for the first time at the 2014 Google I/O Conference on June 25th. Google intended to use Material Design with all versions of Android after 2.1 as well as in conjunction with the v7 appcomcat library and later versions. Google always ensure that all of its products offer a consistent experience and hence Material Design, the fundamental basis of this experience.

To quote the official document, “Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.”

Material Design is not only for Google’s products. Third party developers can incorporate the Material Design functionality in their own project using freely available APIs (Application Programming Interfaces). Some browsers cannot support Material Design in its native format, hence there is a collection of user interfaces termed as “Polymer” that efficiently mimics Material Design for those browsers.

Since the launch of the Material Design, Android and pretty much all of Google’s applications and platforms have adopted this new design approach. While Android and its applications were first to incorporate Material Design, the keystone web applications also embraced the Material Design.

Google makes its Material Design system easier to Customize

Since 2014, Google has been using Material Design as its design language for its applications. Most of Google’s mobile apps for Android had embraced the new design language, including YouTube, Gmail, Google Drive, Sheets and Slides, Google Docs, Google Maps, Google+, Inbox, all of the Google Play-branded applications.

To make it easier for developers to adopt the Material Design to their own projects, Google is making some changes to the design language; not any major changes but a few to make it easier for developers to adopt the design language.

Design Principles of Material Design

Material Design is based on five basic principles (as per material.io):

Material is the Metaphor

Inspired by the physical world and its textures, Material Design surfaces reimagine the mediums of paper and ink including how they cast shadows and reflect light.

Bold, Graphic, Intentional

Focusing immerse viewers in the experience, the system is guided by print design methods — grids, typography, space, color, scale, and imagery — to create hierarchy.

Motion provides Meaning

Focusing on attention and maintaining continuity, Material Design is also based on the principle of Motion and coherent transitions. Elements are transformed and reorganized in the environment to generate new transformations.

Flexible Foundation

Designed to enable brand expression, the Material Design system is integrated with a custom code base that enables the seamless implementation of plug-ins, components, and design elements.

Cross-platform

Maintaining the same UI across platforms, Material Design uses shared components across iOS, Android, Flutter, and the web.

Components of the Design Language for integration with Android Apps

Material Design is an adaptable system of components, guidelines, and tools that support the best practices of UI and UX design. It is backed by open-source code and streamlines collaboration between developers and designers – enabling users build beautiful products easily and quickly.

The Material Theme

With material theme, this design approach offers a new and unique style of display for Android applications.  With its built systems widgets, developers are able to easily and quickly transform the color palette as per the requirement. Additionally, is has an array of default animations for touch feedback as well as other activity style transitions.

List and Card Support

Material Design’s list and card formats, that has all animations and styles, is supported by two widgets; the card widget is CardView and the list widget is RecyclerView.

Shadows

Material Design has added a change to the way shadows are displayed. In addition to the old x and y components, shadows have now a z component that displays the elevation of view and affects:

• High z values determine that the component will appear above other views in the mix
• High z values enables big shadows and low z values to small shadows

Animations

In the Material Design, Animations are supported through APIs that enables the user to build custom animations for touch feedback in the user interface and also changes in view states and activity transitions, which:

• Enable you to hide and reveal views using circular reveal animations
• Allow the application to respond to touch events by displaying touch feedback animations
• Allow the use of curved motion to make animations appear more natural to the user
• Allow you to animate changes in one or more views using “view state change”
• Allow you to develop custom activity transition animations
• Show a full list of animations in state list drawables between view state changes
• Touch feedback animations are also offered in several standard views (for example for buttons) these can be easily customized and then placed into your own custom views

Drawables

Material Design has also changed Drawables. There are three major changes for developers:

• Vector drawables can now be scaled without any loss of definition and are recommended for single-color in-app icons
• Color extracts allow you to quickly and automatically extract any prominent colors from an existing bitmap image
• Drawable tints can be used to define bitmap images as alpha masks and then be tinted during runtime with other colors

The Take Away:

For the Android platform, Material Design is the main design for both user interface and user experience. Developed and backed by Google, it offers a consistent UX on the platform so that applications do not promote user confusion.

The design principles of the Material Design enables developers and designers to build a high quality touch experience and offer a “pen and paper” style feel to the user interface. Material Design approach is reflected in throughout the range of Google’s own offerings such as Gmail, YouTube, etc.