Material Design

3 Min. Read
Jul 1, 2021

Introduction

Material Design is a design language introduced by google in 2014. So, we can say it is the google-promoted design. It is a biggest design product happen in google. It have a sound browser compatibility as they are compatible across most browser. Material design support angular material and react material user interface. It also uses SASS preprocessor. It is a simple design system into 3D. The design are so awesome that naturally attract human eye. Simply, in one word material design is a logic with a magic.

This design is inspired by physical world.The design is like mimicking reality. It was move away from designing surface that were inspired by paper and ink. When we looked at head-on, a sheet of paper appear flat and 2D(two-dimensional). However, in the real world, that’s not actually how it’s behaves. Paper exists in 3D(three-dimensional) sheets of paper create shadows, seam, folds and can be cut and resized for our needs - something that google aimed to recreate in the digital space with material design. This design specification encompasses more than just how things look in android. It expresses how things should react, move and be organized based on certain key principles that are specified by google.

Components

Material Design offer numerous components that provide a base design, guidelines and templates. Developers can work on this to create a suitable website or application for the bussiness. It offers the necessary information on how to use each component. They are interactive building blocks for creating a user interface.

Apps bars:bottom App bars:top


Buttons Buttons: floating action button


Checkboxes Menus Cards



Date picker Chips Dialogs

Environment

Material Design express 3D space using light, surface and cast shadows. Material has varying x and y dimensions (measured in dp). Shadows show the elevation of different Material surfaces. It has infinite resolution. Material can display any shape and color. Content can behave independent
of material, but is limited within the bounds of material.

Responsive Grid System

We live in a fast-placed world where people work on-the-go, and vitually everyone spends incredible amounts of their time each day glued to their smartphones. Material design leverages a 12-grid system for creating its responsive UI. To ensure that developers give users an integrally responsive UI, Material’s 12-grid system uses columns, gutters, and margin to provide a very flexible layout, which achieves the ultimate goal of a completely responsive design.

  1. Columns
  2. Gutters
  3. Margins

  1. Columns: The number of columns displayed in the grid is determined by the breakpoint range, a range of predetermined screen sizes. A breakpoint can correspond with mobile, tablet, or other screen type.On mobile, at a breakpoint of 360 dp, this layout grid uses 4 columns. On tablet, at a breakpoint of 600 dp, this layout grid uses 8 columns.

  2. Gutters: A gutter is the space between columns that helps separate content.On mobile, at a breakpoint of 360 dp, this layout grid uses 16dp gutters. On a tablet, at a breakpoint of 600 dp, this layout grid uses 24dp gutters.

  3. Margins: Margins are the space between content and the left and right edges of the screen. On mobile, at a breakpoint of 360 dp, this layout grid uses 16dp margins.

Material Design VS Bootstrap

As compared to Bootstrap , Material design is hard to customize and learn. Bootstrap completely depends on Javascript framework whereas material design doesn’t need any Javascript framework or libraries to design websites or apps. Material Design focuses on how various design elements interact to create an aesthetically-pleasing website that is also mobile-friendly, Bootstrap is more concerned with making websites and web apps responsive and functional.

If you want to use both the features of bootstrap and material design there is good news for you guys. You can use material design bootstrap (mdbootstrap.com).MDBootstrap is an open-source UI kit that allows you to use Bootstrap , a CSS framework you might already be familiar with, to create fully responsive websites that have a Material Design look and feel.

For more information visit official site of material design.

Thank you!!