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