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.

2. 2
This is Material Design

3. 3 Introduction
Classic principles of good design + Innovation of technology and science

4. 4
Single underlying system
Unified experience across platforms and device sizes

5. 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.

6. 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

7. 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

8. 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

9. 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

10. 10 Animation
Responsive Interaction Fig. Radial Action

11. 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

12. 12
Animation
Meaningful Transitions

13. 13 Animation
Delightful Details Most basic use of animation is in transitions

14. 14
Style
Color
It’s okay to be a little adventurous and vibrant!

15. 15 Style
Color
Toolbars and large blocks will be the main colors
Accent colors for primary actions (PRIORITY)

16. 16 Style
Color Light Theme
Dark Theme

17. 17
Style
Typography Roboto
Standard styles

18. 18
Style
Icons
Symbolizes a command, file, device, or directory
Used to represent common actions Ensure readability and clarity

19. 19
Style
Icons
Grids, Proportion and Size
Round corners
Consistency

20. 20 Style
Imagery

21. 21
Style
Imagery Choose images that express personal relevance, information and delight

22. 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.

23. 23 Style
Imagery Maintain the integrity of the image

X

X

24. 24
Style Imagery
Use Multiple Mediums

25. 25
Style
Imagery Avoid Stock
 X

26. 26
Style
Imagery
Have a Point of Focus 
X

27. 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!

28. Material Design in Google Play 28

29. Resources 29
http://www.google.com/design/spec/material-design/introduction.html

30. @arya_padte
+AryaPadte