Loading Imaginea Design Labs
Material Design Wallpaper

29th August, 2016  

What is Mobile Material Design?

By Vinod Sharma

line

Material Design from Google is a widely adopted conceptual design philosophy that outlines how apps should look and work on mobile devices. With our mobile being probably the first thing we lay hands on when waking up in the morning, and the last thing we check before going to sleep, it’s a very ‘(h)appy’ life that we seem to lead. And it’s the design of this life’s apps that decide whether we tolerate, or treasure them.

We challenged ourselves 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. – Google

Key Principles of Material Design

  • Material is the metaphor – Visual cues should be grounded in reality.
  • Bold, graphic, intentional – The visuals are driven by fundamental design techniques. Use of type, grids, space, scale, color and images should guide visuals.
  • Motion provides meaning: Animation is an important component of Material Design. They should not disrupt the user experience and provide coherence.

Material Design combines vibrant aesthetics with tactile experience.

Tactile Interface

So what is a “tactile interface”? Consider it as a stack of multiple sheets of paper that can change shape and form, but seem to work in a seemingly realistic manner.

Material design metaphor

Credit: Google Material Design

The tactile surface is a container for your content, with a faint shadow separating it from other containers. The Gmail app is an excellent example to highlight this concept.

Gmail app mobile design

Gmail app mobile design

The top menu layer covers a grayed out bottom layer, creating an impression of a three-dimensional tactile surface.

Color and Typography

The colors most closely associated with layered interface design borrow quite a bit from the flat design trend. The main difference is the vast number of color options that Google provides – bright, bold and fully-saturated hues.

Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors. – Material design documentation.

Color Palette example from Google Material Design

Credit: Google Material Design

Typography

Material design provides Roboto and Noto as the standard typefaces on Android.

Layout

The basic layout and design structure are based on print design concepts – such as baseline grids and structural templates. This brings consistency across environments by repeating visual elements, structural grids, and spacing across platforms and screen sizes. Also, since these layouts scale to fit any screen size, it simplifies the process of creating scalable apps.

Keylines, margins and vertical spacing specifications in material design

Keylines, margins and vertical spacing specifications in material design

Usability and Accessibility

Material design’s built-in accessibility considerations enhance its usability. It gives guidelines to simplify your app’s user interface with:

  • Clearly visible elements
  • Sufficient contrast and size
  • A clear hierarchy of importance
  • Key information easily identifiable at a glance

Conclusion

While the concept of material design is a trend-setting one, the risk is in ending up with designs that are too cookie-cutter based. As with every other design trend or concept, it’s up to us as designers, to embrace this philosophy.

Would you be using the material design recommendations for your next mobile application? Why or why not? Let us know your take in the comments.

 

 

About Vinod Sharma : Senior Manager - Design

Leave a Reply

Share via