Google’s Material Design language raises the bar for excellence in mobile (and web) UI design. It offers great opportunities for designers and developers to deliver unique and engaging user experiences.
Well-written Material Design guidelines will help any designer who’s building neat websites or apps for Android get started within seconds. Google’s design specifications describe how to design applications, that synthesizes classic principles of good design with the innovation and possibility of technology and science. The purpose of this living document is to guide you, not to provide solutions for complex and unique design problems.

In this post we are tackling one of the most contradicting principle in Material Design; Material never bends or folds.

Material design is inspired by tactile materials, such as paper and ink.
But we all know, that paper bends and folds easily,right? To answer this question we should go back to the basics of 2D and 3D dimensions.

Paper isn’t particularly thick and we don’t usually think about the thickness of a piece of paper. As a matter of fact, Google makes it very clear: Material is always 1dp thick.

So normally we consider single sheet of paper to be 2D, having just width and length. What about the package of paper? The whole package is a couple of inches thick and has length, width and height/depth (Z dimension); it has three dimensions – 3D. The difference between 2D and 3D dimensions is huge! Just about everything we deal with in the real world is 3D and it’s a big challenge to designers and developers to create the visual effect of 3D using 2D elements on a two-dimensional screen.

Material never bends or folds

 

 

If Material never folds, then how to design an interface with fold interactions using Material Design? Material should never breach its own 2d plane and should be confined within it’s two dimensional space. One material can change shape in its X and Y dimensions (length and width), but never in its Z dimension (height/depth). What that means is that a material can’t bend or fold since that would cause it to grow outside it’s two dimensional space.

Here is a great example of 2d element animation in 3D space by Jovie Brett :

#materialdesign #application #development #Google #websites #apps

Share this:

• Facebook
• Twitter
• Google+
• LinkedIn