Material Design – A simple and easy guide

Material-Design

Google brought a new designing technique in 2014, code-named as Quantam Paper, which it now implements across all its Internet platforms. Known now simply as “Material Design”, the new technique has changed the way people look and interact with software and websites on both Android smartphone and Personal Computer platforms.

What is Material Design?

Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.

 

-https://material.io/design

Material Design is a design principle which considers the screen of a device to be a paper. The screen is a big sized paper that is either white, slightly grey, or of any light colour. This paper is also neverending, i.e, the paper can be scrolled from all directions.

Understanding the “Material”

 

Understanding the material

The idea was to repesent pixels in form of paper, smart paper . . . quantam paper.

 

-Matias Duarte, Vice President, Google Design.

When we talk about paper, one thing is clear: the paper can have layers. It is easily possible to have a stack of papers in real life, but in digital design, how can one represent layers. The answer is simple: using shadows to represent depth. This design is all about how light interacts with paper in reality.

In the above image, it is easy to see the difference in the height of second layer. The first, third and fourth layers have light and focused shadows, while the second has slightly darker and more spread shadow. This is exactly how it would have looked in real.

Why Material Design?

Making MD

There are several advantages of using Material Design. Google paid required attention to these advantages.

  • Plain and Simple: Material Design is quite simple, and uses only the concept of paper and light. Being not very glittery helps the interacting user to focus on what’s important: the content.
  • Realistic: Material Design is simply “digital paper”. The light’s interaction with layers of differently positioned paper, and the appearance of shadows makes the design realistic. This is why when you see a button that says, “Search”, you feel that you can click the button in real.
  • Animation represents motion: Not everything in material design is brand new. Google kept the attribute of animation to represent how elements on a page behaved when someone interacted with them. For example, when you click for the menu, the menu enters from the left side of your screen (or top), and occupies the entire or a percent of the content. This gives the feeling that the menu was rolled over the content, as it would be in real. Also, when you click a button, it sinks down slightly and returns back to normal, or changes colour. One can actually feel the sensation of pressing a button.
  • Graphic and Images: Material Design mostly uses Vector as its content’s graphics. Vector graphics is a way of creating flat icons that are of solid, bright colours. The gradient effect or change of opaqueness is avoided in the graphics. The design is also flat, and does not contain shadows most of the time.

The Font: Refined Roboto

The Font

Google uses the font style “Roboto” for Material Design. Christian Robertson, Senior Staff Visual Designer at Google did the tidious job of refining Roboto to suit the needs of Material Design. The font is designed with different weights and widths so that it can serve the need of all different places.

Today, Roboto is the default font on Android, other Google services such as Google+, Google Play, YouTube, Google Maps, Google Chrome and mobile Google Search. Android apps such as Facebook, Whatsapp and Netflix also use the font. Unreal Engine 4 has Roboto Bold as its default font.

Like the post? Share it with your friends

1 Comment

  1. Faique Yusuf
    May 30, 2019

    Great content!!! Keep up the good work.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top