Sushil Kumar

Material Design

material-design1i

Image source- https://thomas.vanhoutte.be/miniblog/material-design-gif-examples

Love at first sight. It is everywhere now. Yes! Being a designer, I always liked the Material Design. According to me, it creates an awesome visual experience. Material design is another masterpiece by google..

The vision behind the development of this design style is to allow a unified user experience across all their platforms and device sizes. Fundamentally, this is developed for mobile devices but other input methods like voice, touch, keyboard and mouse works well with it. This is a grid-based design pattern which has responsive animation and amazing transitions. Light and shadows are used to create depth effect in design. Now most of Google’s applications for Android have been upgraded with this design language. It includes Gmail, Google Drive, Sheets, Docs, slides, maps, Youtube and Google Play branded applications.

1. Material inspires

Material

I was amazed to know that Material design innovation is inspired by paper and ink. Material surface, edges, light and shadows provide a familiar visual to the user, similar to what they can touch. These materials are solid and occupies a position in space. Unlike real paper, digital materials can expand, contract, animate and reform themselves intelligently. It can join/merge with another material and can be created and destroyed as well. So lots of possibilities for animation and interaction in design. This plays a huge role to improve the user experience.

2. Intentionally used graphical elements

Bold_Graphics

I know, it might have taken a lot of time experimenting and proving that Print based Grids, typefaces, color, space and imagery could be pleasant for eyes. It creates hierarchy and balance in design. Decent color selection, larger typefaces and edge to edge use of imagery is the beauty of material design. More white spaces in design creates a clear and clean graphic interface that makes the user experience engaging. Whole design concept is developed keeping user actions in mind. A well thought user experience based design.

3. Motion connects users

Animation

I very much agree that motion allows a user to connect between the real life and what they see on screen. Primary user actions are the points which initiate motion and it transforms and animates whole design. All transformations happen in a single environment without breaking the continuity of user experience. Motions are created keeping in mind that  it must be focused and meaningful and should also maintain the visual hierarchy.

I am still studying and implementing Material design style in my designs. It is a large ocean of various design instructions, uses of light and shadows, depths, layouts, components, patterns, shapes, colors, iconography, typography, writing and more about usability. To understand more of it, I am exploring below points that Google designers have released. It has clear design instructions based on visual hierarchy and usability research.

  • Usages of different color, contrast, hues and saturation.
  • Icon’s shapes and size. Images used on the icons.
  • The Intensity of light and shadows used on various levels/layers.
  • How images can be used efficiently in design or user in an interface.
  • Typefaces for various languages.
  • Clear and accurate writing etc.

However, Material design cannot be defined in a few words but I have tried to convey my understanding of the basic and core idea of this amazing design pattern. Hope it will help designers as well as a person who is from a non-designing background. Obviously there are a lot of inspiring materials and learning for the designers on Google’s “Material Design Introduction” page. For me, it has always been a new learning every time I read about material design.