1. Material DesignMaterial Design Presented By:- Abhishek Dabral 2. About Me Abhishek Dabral Joined Mindfire : Nov 2013 Team : Mobile Development Domain : Android App Development Tech Blogs : https://abhishekdabral.wordpress.com/ Video Channel : https://www.youtube.com/channel/UCuVmiPPqIhtxe69VVp8yBaA/videos Github Profile : https://github.com/abhishekdabral StackOverflow Profile : http://stackoverflow.com/users/3455146/doraemon 3. Introduction Goals To create a visual language to synthesizes the classic principles of good design with the innovation and possibility of technology and science. Principles a. Material is the Metaphor Materials are the metaphoric representation of real time objects. Such represantation facilitates easier recognition of objects. Surfaces and edges of the material provide visual cues that the object is in grounded state. 4. Introduction Principles (continue..) b. Bold, graphic, intentional The foundational elements of print-based designtypography, grids, space, scale, color, and use of imageryguide visual treatments. These elements do far more than please the eye. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience. 5. Introduction Principles (continue..) c. Motion provides meaning User actions are inflection points that initiate motion, transforming the whole design.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. Motion is meaningful and appropriate, serving to focus attention and maintain continuity. 6. What is material ? Environment a. 3D World 7. What is material ? Environment (continue ) b. Light and Shadow Within Material Enviornment, virtual lights illuminate the scene. There are two light sources in this enviornment. (I) Key Light :- Creates directional shadows. (II) Ambient Light :- Creates soft shadows from all angles. In Android development, shadows occur when light sources are blocked by sheets of material at various positions along the z-axis. 8. What is material ? Environment (continue ) b. Light and Shadow Shadow cast by key light Shadow cast by ambient light Combined shadow from key and ambient lights 9. What is material ? Material properties a. Physical properties b. Transforming material c. Movement of material 10. What is material ? a. Physical properties Material may have varied height and width, with uniform thickness of 1dp. DO DON'T 11. What is material ? a. Physical properties (continue ...) Material casts shadows. Shadows result naturally from the relative elevation (z-position) between material elements. DO DON'T 12. What is material ? a. Physical properties (continue ) - Contents of any shape or color can be displayed. Contents Does not add thickness to material. 13. What is material ? a. Physical properties (continue ) Contents can behave independent of the material but always remains within the bounds of the Material. 14. What is material ? a. Physical properties (continue ) Material is solid. Thus, Input event cannot pass through the material. DO DON'T 15. What is material ? a. Physical properties (continue ) Material cannot occupy same dimension in space. If any such requirement you have, then use elevation technique to seprate them in space. DO DON'T 16. What is material ? a. Physical properties (continue ) Material cannot pass through a material. 17. What is material ? b. Transforming properties Material can change shape. Material Can grow and shrink along its plane. Material never bends or folds. Sheets of material can join together to make a single sheet. Material can split into parts and can join to regain original state. 18. What is material ? c. Movement of material Materials can spontaniously generated and destroyed anywhere in the enviornment. Material can move along any axis. Z-axis motion is typically a result of user interaction with the material. 19. What is material ? Objects in 3D space Objects in material design possess similar qualities to objects in the physical world. In the physical world, objects can be stacked or affixed to one another, but cannot pass through one another. Objects cast shadows and reflect light. These qualities form a spatial model that is familiar to users and can be applied consistently across apps. a. Elevation (Android) b. Object Relationship 20. What is material ? a. Elevation It is the relative difference between two surfaces along z- axis. Elevation is generally measured in density independent pixels (dp). Since material has standard 1dp thickness , the differnce would be from the top of one surface to the top of another. 21. What is material ? a. Elevation (continue ) Resting Elevation The default elevation of a material is called resting elevation.The resting elevation for an object does not change; it is constant throughout an app. If an object changes elevation, it should return to its resting elevation as soon as possible. 22. What is material ? a. Elevation (continue ) Responsive elevation and dynamic elevation offset Some components performs responsive elevation which depends upon the user input event (normal, focused, pressed etc). These elevation changes are implemented through dynamic elevation offset. Dynamic elevation offsets are the goal elevation for the component to move towards, relative to the components resting state They also ensure that elevation changes are consistent across actions and component types 23. What is material ? a. Elevation (continue ) Dynamic elevation offset example 24. What is material ? a. Elevation (continue ) Functional shadows Shadows provide important visual cues about objects depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An objects elevation determines the appearance of its shadow. In motion, shadows are a useful tool to provide cues about an objects direction of movement and whether the distance between surfaces is increasing or decreasing. 25. What is material ? b. Object relationship Object Heirarchy Objects can be moved independent to each other or constrained by objects higher in heirarchy. All objects are part of a heirarchy, which defines the parent child relationship. Parent child specifies :- Each object has one parent. Each object may have any number of child. Children inherit transformative properties from their parents. Sibling are objects at same level of heirarchy. 26. What is material ? b. Object relationship (continue ) Exceptions Childs , such as primary UI elements move independently to the parent. Example Floating Action Button, Navigation Drawer, Action Bar, Dialogs. Interaction Childrens must have minimal z-axis elevation with their parents , no other objects gets inserted between them 27. Animation Authentic Motion In the world of material design, motion describes spatial relationships, functionality, and intention with beauty and fluidity. Mass and Weight In the physical world, forces must be apply in order to move objects. The strength and duration of these forces dictate how quickly object accelerate, deaccelerate, or changes direction.Even the most jarring stops and starts are not instantaneous it takes time for an object to speed up or speed down. Consequently, when the object animation have abrupt start or stop, it looks unnatural. 28. Animation Authentic Motion (continue ) Natural acceleration and deacceleration Changes in acceleration and deacceleration should be smooth. 29. Animation Authentic Motion (continue ) When acceleration or deceleration isnt smooth, movement appears mechanical. Abrupt changes in speed or direction are jarring and draw attention. 30. Animation Authentic Motion (continue ) Entrances and exits Changes in an objects speed and direction draw user attention. DO DON'T 31. Animation Authentic Motion (continue ) Making Adjustment Not all objects move the same way. Lighter or smaller objects may move faster as they require less force. Heavier and larger objects may move slower as they require more time to speed up. 32. Animation Authentic Motion (continue ) Making Adjustment Not all objects move the same way. Lighter or smaller objects may move faster as they require less force. Heavier and larger objects may move slower as they require more time to speed up. 33. Animation Responsive interaction Responsive interaction encourages deeper exploration of an app. What will happen if I touch this screen? And then this icon? Such approach produces logical and delightful screen reactions on user interaction. 34. Animation Responsive interaction Surface reaction Upon an input event, the system provides instant visual confirmation at the point of contact: under the pad of a finger for touch, at the mic for voice, or in the appropriate field for a keyboard press. The core visual mechanism to express this contact is the Touch Ripple. This device articulates the method and duration of a touch event, as well dynamic variables like voice amplitude or touch pressure. 35. Animation Responsive interaction User Input Surface Reaction 36. Responsive interaction Material responses Response of Material generated by user input event. Point of origin When a new material create on touch, the origin should be the point of touch. Lift on touch When a card or separable element is activated, the card should lift to indicate an active state. Animation 37. Animation Responsive interaction Material Response 38. Animation Responsive interaction Point of origin 39. Animation Responsive interaction Lift on touch 40. Animation Responsive interaction Radial action Radial action is the visual ripple of ink spreading outward from the point of input. For example: A sequence of content changes: images fade in or out. A sequence of material movements: cards enter on or off the screen. 41. Animation Responsive interaction Radial Reaction 42. Animation Meaningful transitions Design of motion should be designed in such a way which draws attention delightly. In navigational contexts, use motion to transport smoothly. Always preserve the elements hirarchy during motion. We will take care of the following during transitions:- a. Visual Continuity b. Heirarichal Timing c. Consistent Choreography 43. Animation a. Visual Continuity Transition between two visual states should be clear. A well designed transition tells user where to focus. Transition types and actions: Incoming elements: Newly generated or translated items are introduced or re-established. Outgoing elements: Elements no longer relevant to the context are removed. Shared elements: Elements that persist for the duration of a transition can be subtle (a single icon) or dominant (a gallery image growing to fill the screen). 44. Animation a. Visual Continuity 45. Animation b. Heirarichal timing Consider the order and timing of movement in aConsider the order and timing of movement in a transition.transition. Its not like to create the important object first and then the least important to last, the point is the transition should be timely and jointed. 46. Animation c. Consistent choreography Transitioning elements should behave in a coordinated manner. The paths elements travel along should make sense and be orderly 47. Reference http://www.google.com/design/spec/material- design/introduction.html 48. ? Any Question 49. Thank You