Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Tenets of Material Design

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

The Tenets of Material Design

  1. 1. The Tenets Of Material Design
  2. 2. What is material design? Material design is a three- dimensional environment containing lig ht, material, and cast shadows.
  3. 3. How to recognize material design?
  4. 4. Why material design? Flat meets real. Cross platform. Mobile First. Integrated Input.
  5. 5. 3 Key Principles of material design
  6. 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. 7. Example: android.com
  8. 8. Example: persona.co
  9. 9. Example: raindrop.io
  10. 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. 11. Example: headspace.com
  12. 12. Example: copiedapp.com
  13. 13. Example: hellomonday.com
  14. 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. 15. Example: species-in-pieces.com
  16. 16. Example: earnest.com/2015
  17. 17. Example: legworkstudio.com
  18. 18. Did we miss anything? Tell us. GET SOCIAL!

×