際際滷

際際滷Share a Scribd company logo

Material design presentation - Nasser Ali

Download as PPTX, PDF
N
Nasser Ali

The document discusses Material Design, which is a design language developed by Google. It introduces Material Design and outlines its key guidelines and principles. Material Design uses principles of light, shadow, and 3D space to create a natural visual hierarchy and responsive interfaces. Its guidelines focus on responsive interactions, visual continuity, and hierarchical timing to provide intuitive and delightful user experiences. Material Design aims to bring uniformity to interfaces, create refreshing and exciting experiences, and follow modern design trends.

1 of 19
Downloaded 41 times
Material design presentation - Nasser Ali
Material Design Nasser Ali
Material Design Introduction What is material? Material guidelines Why material design?
Introduction
Introduction
What is Material? 3D world
What is Material? Light and shadow
What is Material? Elevation
What is Material? Functional Shadows
What is Material? Object relationships
Material Guidelines Responsive interaction
Material Guidelines Visual continuity
Material Guidelines Hierarchical timing
Material Guidelines Delightful details
Material Guidelines Color palette
Material Guidelines Icons
Material Guidelines Imagery
Why Material Design? Bring uniformity Refreshing and exciting Trending
Thanks! Keep in touch You can find me at nasser.mohd.ali

More Related Content

Material design presentation - Nasser Ali

Editor's Notes

  • #5: Goals Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all 鍖rst-class input methods.
  • #6: Principles: Material is the metaphor *inspired by the study of paper and ink *The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Bold, graphic, intentional intentional white space create a bold and graphic interface that immerse the user in the experience. Meaningful Motion the user as the prime mover. Motion is meaningful and appropriate, serving to focus
  • #12: Animation/ Ripple reactions near the epicenter occur sooner than reactions further away.
  • #13: Meaningful transitions/visual cont 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).
  • #14: Meaningful transitions/visual cont 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).
  • #15: Meaningful transitions/visual cont 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).
  • #16: style
  • #17: Meaningful transitions/visual cont 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).
  • #18: convey specific information - Portraying context with aesthetic
  • #19: The Roboto font face, flat iconography, and vibrant color palette are several items that breathe freshness