Browse By

Understanding the principles and benefits of Material Design

Unless you have been living under a rock for the past few years, you will doubtless have heard of the term ‘flat design’. When I say ‘heard of’, what I actually mean is confronted with it every time you browsed the internet. What started off as an interesting design direction became an all-pervasive, must-have design ‘trend’.

Blindly following the latest trend is never a good thing. It inhibits creativity, originality and forward thinking. It fosters a state of affairs where everybody is just copying everyone else and every website starts to look the same. It makes for a very dull internet experience. For a while people speculated on what the next ‘trend’ would be, giving life to the ‘long-shadow’. Anyway, it turns out Madonna had it right years ago with her famous line ‘we are living in a material world’ – and the people at Google have taken notice.

The Material Design Philosophy

Reading through Google’s design principles, I have to admit I find the direction they are taking is logical and refreshing. In essence, the goal is to emulate what we would expect to see in the real world. Surfaces, objects, movement and lighting are all key considerations. The exciting part is that we can take these fundamentals and build on them in ways that are “technologically advanced and open to imagination and magic”.

To shed a little more light on the basics of Material Design I have picked out a couple of pertinent points from their design manifesto.

Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances… The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.

This leads us to arguably two of the most interesting aspects of the the Material Design specification:- Authentic motion and Responsive interaction.

What is Authentic motion?

In the real world we are governed by the laws of physics. We rightly expect a certain outcome when an object of a given size and mass starts to move. In the world of material design, the objective is to deliver to the end user the same “functionality and intention with beauty and fluidity”. Here is a breakdown of the key considerations for authentic motion:-

  • When animations have abrupt starts, stops, or changes in direction, they appear unnatural
  • Motion in material design should embrace the familiarity and real-world behavior of physical objects
  • Changes in acceleration or deceleration should be smooth across the duration of an animation
  • Abrupt changes in speed or direction are jarring and draw attention
  • Use curved motion and avoid linear spatial paths

Responsive interaction explained

Let’s get all notions of ‘responsive web design’ and RWD out of our head for now. This is not really the thrust of the term here. Responsive interaction is more about user engagement. Design that elicits a response. “What will happen if I touch this screen? And then this icon?”

responsive interaction

Getting the user to want to interact with your app “elevates an app from an information-delivery service to an experience that communicates using multiple visual and tactile responses”. If we are trying to engage our user the benefits of responsive interaction are obvious. This requires giving serious consideration to every element of interaction.

Points to remember

  • User input – UI elements appear tangible, even though they are behind a layer of glass (the device screen)
  • Surface reaction – From the point of input (the contact point of a finger or the microphone icon for voice), make the visual reaction radial
  • Material response – On touch, the user can generate new or transform existing material
  • Radial action – Add clarity to user input through visual reactions to user input

For an in-depth review of all the features and specification please refer to this Google guide:- http://www.google.com/design/spec/material-design/introduction.html#

In the specification it does note that this philosophy is still quite new and evolving so expect a few new developments along the way.

If we can understand the principles of Material Design and incorporate some of these principles into our designs and applications this can only be a good thing and makes for a better web experience. Whether Material Design becomes a trend that is followed blindly is yet to be seen.

If you enjoyed this article please spread the word

Divi WordPress Theme

Leave a Reply

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