Material Design

Material DesignNasser Ali2Material DesignIntroductionWhat is material?Material guidelinesWhy material design?

3Introduction

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

4Introduction

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, intentionalintentional white space create a bold and graphic interface that immerse the user in the experience.Meaningful Motionthe user as the prime mover.Motion is meaningful and appropriate, serving to focus

5What is Material?

3D world6What is Material?Light and shadow

7What is Material?Elevation

8What is Material?Functional Shadows

9What is Material?Object relationships

10Material GuidelinesResponsive interaction

Animation/Ripple reactions near the epicenter occur sooner than reactions further away.11Material GuidelinesVisual continuity

Meaningful transitions/visual contIncoming 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).

12Material GuidelinesHierarchical timing

Meaningful transitions/visual contIncoming 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).

13Material GuidelinesDelightful details

Meaningful transitions/visual contIncoming 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).

14Material GuidelinesColor palette

style15Material GuidelinesIcons

Meaningful transitions/visual contIncoming 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).

16Material GuidelinesImagery

convey specific information - Portraying context with aesthetic17Why Material Design?Bring uniformityRefreshing and excitingTrendingThe Roboto font face, flat iconography, and vibrant color palette are several items that breathe freshness

18Thanks!Keep in touchYou can find me at nasser.mohd.ali