Introduction to Material Design

Introduction

Material Design was first introduced in Google I/O 2014. However, it took roughly a year to spread across platforms and other boundaries. Now, if we look into the google apps like GMail, YouTube, Google Drive, Google Keep etc., we will be finding nothing but material design. It’s interesting though how a simple elevation in a structure can create the sense of it’s nearness or how the ripple effect on clicking, can bring the sense of realtime interaction to an object to life.

Design

So, before we know more about Material Design, let’s talk about what we actually mean by design. Design is the art of considered creation. It is the creation of a plan or convention for the construction of an object or a system (as in architectural blueprints, engineering drawings, business processes, circuit diagrams and sewing patterns).

Material Design

A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.

Material Design for Mobile

Material design can be implemented in mobile devices with an ease that overwhelmed the design world, taking it by a storm. Soon, Google launched a new theme based on material design called it material theme. Material Theme pulls out a whole new world to the mobile design world, which provides an extensive guide to advanced animations, drawables, icons, lists and cards, etc. iOS could not stood by watched. Material Kit is a iOS library providing access to the material designs and similar animations that google material theme provides.

Web Components

Material design is not limited to mobile designs. Google started the polymer project to provide the same components for material design components out to the world of web as well. However there are non-google libraries which provides similar components as well. Materialize Css is one my personal favorites. It provides light weight stylesheets to provide increadible components for the web. Material Design for Angular JS is also another incredible library providing support for Angular framework. For all the react fans, there is material ui. There are other amazing libraries whcih can be used for this matter.

Getting Started

The easiest way to get started with material design would be to start with material design lite. Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. It also provides a customizable css theme builder where you can pick up your primary and secondary colors and it lets you download the new theme.

So, if you like design methodology and exploring around different design standards, this is good place to play around.

Feel free to explore and revert back with any doubts/queries that you might face.