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.

Material Design

10,086 views

Published on

Material Design is Google's new vision for how software looks. Here is a brief introductory guide to visual, motion and interactive design. With the use of material design, there is a hope to build products that give users a great experience.

Published in: Software

Material Design

  1. 1. 2 This is Material Design
  2. 2. 3 Introduction Classic principles of good design + Innovation of technology and science
  3. 3. 4 Single underlying system Unified experience across platforms and device sizes
  4. 4. 5 Principles Material is the metaphor A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic. Surfaces and edges provide visual cues Using familiar tactile attributes helps users quickly understand affordances Flexibility of the material creates new affordances that supersede those in the physical world, without breaking the rules of physics.
  5. 5. 6 Principles Bold, graphic, intentional Foundational elements of print-based design: •Typography •Grids •Space •Scale •Color •Imagery Create hierarchy, meaning, and focus Emphasis on user actions makes core functionality immediately apparent and provides waypoints for the user
  6. 6. 7 Principles Motion provides meaning Respects and reinforces the user as the prime mover. All action takes place in a single environment Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize Smooth transitions
  7. 7. 8 Animation Authentic Motion Motion tells us whether an object is light or heavy, flexible or rigid, small or large Animation with abrupt starts /stops or rapid can be unpleasant for the user Important to retain the feeling of physicality without sacrificing elegance, and keeping a seamless user experience Avoid linear motion
  8. 8. 9 Animation Responsive Interaction Responsive interaction builds trust with the user and engages them Encourages deeper exploration of an app Important to retain the feeling of physicality without sacrificing elegance, and keeping a seamless user experience Avoid linear motion Fig. Surface Reaction on touch
  9. 9. 10 Animation Responsive Interaction Fig. Radial Action
  10. 10. 11 Animation Meaningful Transitions Carefully choreographed motion design can effectively guide the user’s attention and focus through multiple steps of a process or procedure Focus on elegance + functionality In a transition, consider the order in which elements move and the timing of their movement
  11. 11. 12 Animation Meaningful Transitions
  12. 12. 13 Animation Delightful Details Most basic use of animation is in transitions
  13. 13. 14 Style Color It’s okay to be a little adventurous and vibrant!
  14. 14. 15 Style Color Toolbars and large blocks will be the main colors Accent colors for primary actions (PRIORITY)
  15. 15. 16 Style Color Light Theme Dark Theme
  16. 16. 17 Style Typography Roboto Standard styles
  17. 17. 18 Style Icons Symbolizes a command, file, device, or directory Used to represent common actions Ensure readability and clarity
  18. 18. 19 Style Icons Grids, Proportion and Size Round corners Consistency
  19. 19. 20 Style Imagery
  20. 20. 21 Style Imagery Choose images that express personal relevance, information and delight
  21. 21. 22 Style Imagery Ensure images are dynamic, context- intelligent, and context-relevant (PREDICT what the user would like to see) Don’t shy away. Confidently use content overlays.
  22. 22. 23 Style Imagery Maintain the integrity of the image  X  X
  23. 23. 24 Style Imagery Use Multiple Mediums
  24. 24. 25 Style Imagery Avoid Stock  X
  25. 25. 26 Style Imagery Have a Point of Focus  X
  26. 26. 27 Layout Designed to scale across different screen sizes Encourage apps to have a consistent look and feel using the same visual elements, structural grids, and spacing rules across platforms and screen sizes A larger screen DOES NOT mean, a greater capacity to comprehend!
  27. 27. Material Design in Google Play 28
  28. 28. Resources 29 http://www.google.com/design/spec/material-design/introduction.html
  29. 29. @arya_padte +AryaPadte

×