Skip to content

Latest commit

 

History

History
58 lines (36 loc) · 3.59 KB

Material_Design.md

File metadata and controls

58 lines (36 loc) · 3.59 KB
Raw

Quantum Paper

Material Design is a design language developed by Google & inspired by the physical world and its textures, including how they reflect light and cast shadows. Material surfaces reimagine the mediums of paper and ink. It represents visual principles of good design with the innovation of technology and science. While developing this design, it was codenamed 'Quantum Paper'.

Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences. Here, Material is the metaphor! Designers from Google refer to it as 'Quantum Paper'.

Google announced Material Design on June 25, 2014, at the Google I/O conference. Expanding upon the 'card' motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Google developed Material Design to create a consistent visual language for all of their products viz. Gmail, Google Drive, Youtube, Hangouts, Photos, etc.

Design Principles

The design philosophy simply began with creating a robust, minimal UI that utilises both space and time as elements of design. The history of GUI’s has been one of trying to replicate something recognisable to us in the physical world & Material Design simply builds on top of that!

'Space'

Space
  • Each element occupies its own space on the z axis, giving us the impression that they actually exist beyond the pane of glass, inside the device. Like little sheets of paper sliding over each other. Material Design is not re-inventing the wheel. Instead it simply provides a set of rules that govern the spaces in which elements can live.

Time
  • Humans don’t just experience states of a device, they experience the transition between states too. A sudden event would be jarring but only adding animation won't do the job. It’s not that simple. Animation needs to feel real as well as authentic.

Implementation

The best way to implement this elegant, seamless design is to choose a framework that supports it so as to add a layer of abstraction & make things simple! Let's talk about web apps:

Materialize is a responsive front-end component library similar to Bootstrap. It offers everything that Bootstrap has to offer, but the difference is that Materialize follows material design principles.

Here’s a list of features that Materialize offers:

  • Grid Based Layout
  • Tables
  • Badges, Buttons, Breadcrumbs
  • Carousel, Cards, Chips, Collections, Colors
  • Footer, Forms
  • Modals
  • Navbar
  • Shadow
  • And a lot more!

When To Use Material Design?

There's no right or wrong scenario for applying the relevant design principles. It solely depends on the product that you're building. However, Material design only becomes constricting when designers fail to stay true to their own brands. Use the concepts to enhance your own unique design style to get the most benefit effective digital design philosophy.

For more info on Material Design, visit here. You can also check the video by Google Designers team!