Material Design: The Design Language you should be using


It is incredibly likely that you’ve seen Material Design before. It is used on the Google homepage, the Android OS, and many other places around the internet.


What is Material Design?

According to Wikipedia, this is the definition of Material Design:

Material Design is a design language developed in 2014 by Google. 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.

So, to put it in more basic terms, “Material Design is a unified design system that combines theory, resources, and tools for crafting digital experiences”. Material Design was created to be visually appealing, responsive, clear and easy to use.

  


So, what does this “design language” include?

The Material Design Language consists of the Material Guidelines and the official set of Material Icons, all crafted and designed by Google and published for you to use.

The design guidelines consist of:

  • Environment
  • Material properties
  • Elevation & shadows
  • Motion
  • Style
  • Layout
  • Components
  • Patterns
  • Growth & communications
  • Usability
  • Platforms

These guidelines include every aspect of design that you can use in your projects. The Material Language is right there in the Guidelines, teaching you about making your designs eye catching, simple and responsive. The Material Guidelines is like the holy book of design.

 


What is the point of Material Design?

When creating Material Design, Google challenged themselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design.

One of it’s best goals is to develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.

In other words, Material Design is a simple, beautiful and universal design language that integrates a fluid, responsive design onto all sorts of different devices. One design language for every device.


So, what resources and guidelines does Material Design offer?

Material Design Resources consist mainly of three things:

  • Material Design Guidelines
  • Material Color Scheme
  • Material Icons

The Material Guidelines is like the rulebook of Material Design. It teaches you all about the principles of Material Environment, Properties, Elevation & Shadows, Motion, Style, Layout and more. It teaches you about the whole language, and how and why these components of Material Design can and should be used, with references to different platforms, screen sizes and layout, and readability.


Where can I find all of these resources?

Material Guidelines:

You can read the Material Guidelines online at https://material.io/guidelines/

Material Colors:

You can browse the Material Color Palettes at https://www.materialui.co/colors or https://material.io/guidelines/style/color.html

Material Icons:

Material Icons can be found and downloaded at https://material.io/icons

Material Design Light:

This is a framework for designing web apps with Material Design, that is actually used by Google. You can find it at: https://getmdl.io/


Was this article helpful? Share it with a friend!

Leave a Reply