Material Design Presentation
•Download as PPTX, PDF•
2 likes•981 views
Material Design (codenamed Quantum Paper) is a design language developed by Google.
Recommended
More Related Content
What's hot
What's hot (13)
Similar to Material Design Presentation
Similar to Material Design Presentation (20)
More from MsaTech Mombasa
Recently uploaded
Recently uploaded (20)
Material Design Presentation
- 1. Material Design Google’s new design language
- 3. Introduction Comprehensive guide for visual, 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 the metaphor A material metaphor is the unifying theory of a rationalized space and a system of motion grounded by tactile reality
- 8. The sense of tactility is vitally important to the system
- 9. how the materials live and move within complex structure? • How light, surface and movement convey objects in moving, interact and exist in space in relation to each other
- 11. Foundation elements of print based design
- 13. Motion provides meaning In the real world forces should be applied to make an object start moving
- 14. The new design has a responsive interaction that encourages user to have deeper exploration of an app
Editor's Notes
- 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
- 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
- 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
- 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.
- 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
- 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.
- 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.
- -All action takes place in a single environment -Smooth transitions -Respects and reinforce the user as the prime mover
- 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