Downloaded 36 times
Uploaded byMsaTech Mombasa
Material Design Presentation
Google's new design language called Material Design provides a comprehensive guide for visual, motion, and interactive design across platforms and devices using a material metaphor. It uses typography, scale, color, and position to create bold graphic interfaces that are tactile and grounded in physical space. Motion provides meaning by applying forces to make objects start moving in a way that encourages deeper user exploration of apps through responsive interactions.
More Related Content
Similar to Material Design Presentation
Material Design Presentation
- 1. Material Design Google’s newdesign language
- 3. Introduction Comprehensive guide forvisual, motion and interactive design across platforms and devices It is a design for creating bold graphic interface driven by typography, scale, color and position.
- 5. Material is themetaphor A material metaphor is the unifying theory of a rationalized space and a system of motion grounded by tactile reality
- 8. The sense oftactility is vitally important to the system
- 9. how the materialslive and move within complex structure? • How light, surface and movement convey objects in moving, interact and exist in space in relation to each other
- 10.
- 11. Foundation elements ofprint based design
- 12.
- 13. Motion provides meaning Inthe real world forces should be applied to make an object start moving
- 14. The new designhas a responsive interaction that encourages user to have deeper exploration of an app
Editor's Notes
- #4 The design is created in simple, clear and for people to understand; it is a visual language that is created to synthesize the principles of good design along with the development and possibility of technology and science. Material design lets you have a unified experience across platforms and devices sizes in a single underlying system
- #6 Inspired by ink and paper the material design takes these classic principles of print design bringing it to life; the materials take energy from the user, from their finger, mouse click and touch and uses it to transform and animate
- #7 every pixel drawn by an app is a dot of ink on a piece of paper whereby paper has no color but ink can be any color; the ink coloring is how the content is displayed where its a video, controls of an image etc
- #8 Coming to paper the paper are in variety of widths in x-axes and height y-axes that fills up the entire display such that you can see the edges of the paper or it shrinks down into a size of single button. An ink doesn’t have any restriction as long as it fits into a paper you have to apply something to the ink so that it can be seen.
- #9 Paper has absolute fixed thickness of 1 dpi equivalent to 35 pound weight piece of paper and we talked about ink adding and fitting into a paper when we add ink your not changing that thickness it’s a fixed thickness not an ink that builds up layer and layer making it thicker and thicker the paper is never zero its always 1 dpi
- #10 Dimensionality affords interaction; Every device has a physical z-depth; the distance b/w the front and the back of the device that rests on the palm of your hand. The z-depth controls how paper can behave and not flip over. Generally the paper is presented square moving to the user’s eye; firstly the paper casts a shadow based on its position within its z and when two pieces of paper slightly overlap i.e. one in front that has lighting source and the one behind getting a shadow making sure the shadow isn’t something that’s drawn from ink that comes out; this is the result of the physical relationship of the lightning model that the system gives you.
- #12 Such as: -Typography -Grids -Space -Color -and use of imagery i.e. guide visual treatments Grid-based layouts responsive animations and transitions, padding and depth effects such as lightening and shadows. These elements do far more than just pleasing; they create hierarchy, meaning and focus; emphases on user actions makes core functionality immediately apparent and provides waypoints for the user.
- #14 -All action takes place in a single environment -Smooth transitions -Respects and reinforce the user as the prime mover
- #15 Imagining your finger pointing down on surface of water that’s reflecting as you get closer; sees the reflection and the two fingers touch together similarly the way that the ink responds is like ripples on water as you hit the surface you break the surface tension of the water and you get a pleasant circular ripples occurring out of it. That's how its done in the ink the communication not just with the solid paper presented on it but which of the particular elements, the ink elements on the paper that you've touched. This approach produces logical and delightful screen reactions on user interaction