Google’s design evolution is contrary to flat design that is stripped of all stylistic choices such as gradients, textures and drop shadows. Google came up with a new design language called Material design to bring modern world's minimalist designs (Flat) and traditional skeuomorphism (Real) together to form layouts that are appealing, responsive and engaging at the same time. How does Material Design work? What are its implications and how can it improve the design? This slide deck explains all. Background icons: Flaticon

1. The Tenets Of Material Design

2. What is material design?
Material design is a three-
dimensional environment containing lig
ht, material, and cast shadows.

3. How to recognize material design?

4. Why material design? Flat meets real.
Cross platform. Mobile First. Integrated
Input.

5. 3 Key Principles of material design

6. Material is the Mix. Material is an allegory
that encompasses the best of both, flat and
real (skeuomorphic) designs. It is the
unification of streamlined space and a
system of motion to develop a synthesized
design that brings life to flat world. The
material is aground in perceptible reality,
taking inspiration and cues from traditional
design principles and making them
relevant in modern minimalist world.

7. Example: android.com

8. Example: persona.co

9. Example: raindrop.io

10. Deliberately Bold Elements: Material
design endorses bold and loud graphic
elements including typography, colors,
grids and space. These intentionally bold
elements combine together to form
hierarchies and web layouts that engage
the user in experience.

11. Example: headspace.com

12. Example: copiedapp.com

13. Example: hellomonday.com

14. Motion Offers Perspective: Material design
signifies motion through shadows and
animation. It indicates that all action takes
place in a single unified environment where
end-user can actually experience real-time
transformation and reorganization. Shifting
objects tend to focus attention and
maintain continuity.

15. Example: species-in-pieces.com

16. Example: earnest.com/2015

17. Example: legworkstudio.com

18. Did we miss anything? Tell us.
GET SOCIAL!