Google unveiled a fascinating new design language a few weeks ago at their I/O Keynote. The new language is called Material Design, and the principles are well documented in an impressive style guide. The new look rivals design trends that Apple and Microsoft have made popular over the years.
While the new technique is not a huge departure from their current look, Google has introduced “delightful details” that subtly give dimensions and movement to ordinary objects.
One example is a layering technique that adds dimension to digital design. Google has created a programming language around this technique called “z space“. Z space (similar to x and y positions on a graph) defines the dimension of an element. Google has challenged us to think in terms of relevant layers in a design. This is a concept we have always used in print design and in programs like Photoshop and Illustrator, however the introduction of z space now makes digital layering possible for Google developers.
Another example of material design is the use of animations and transitions. Google is helping to create a seamless user experience by combining two icons through subtle, yet delightful transitions. The examples found below show two impressive transitions: a hamburger icons transitioning into a back button and a play button transitioning into a pause and stop button. Simple, yet creative uses of animation.
This is only a sampling of what has been introduced with the new material design language. There is no question that many of these techniques will begin to appear in other forms and interpretations. Be on the look out for other material design influences around the web! We’d love to see what you create or discover!