Material Design Overview

A short overview on Googles material design.

1. Google’s Material Design An Overview

2. Timelines “ Material ” Design Sample UI Overview

3. 3 “ Should you use Material Design on iOS ? ” It would certainly break conventions.

4. 4 Overview 1 Introduced with Lollipop, can be used from Android version 2.1 onwards via appcompat lib 2 Design based on paper and ink (Quantum Paper) 3 A design which is not restricted only to mobile, but to all including web. 4 Interfaces are three-dimensional constructions, composed of layers of “physical” components 5 In addition to X and Y properties, material design uses Z properties

5. 5 Overview Making an app to look similarly on multiple devices is a really difficult task for developers, and material design plays well as a set of guidelines that make this task easier.

6. 6 START Overview – Major Events 2011 Gmail was redesigned with flatter buttons and a healthy serving of margin and whitespace 2012 Introduction of layered cards and even more white spaces and well designed typographic hierarchies. June 25, 2014 Consolidated all additions after 2011 to a new standard, the Material Design

7. 7 Difference with previous version

8. 8 What is “ Material ”? Material Design is the visual language Google created to synchronize web design efforts and make sites scalable across all major platforms and devices . It allows to create a consistent user experience across all devices and screen sizes: smartphones, desktop, tablets, television, watches, cars and etc . The main takeaways of Material Design are that it’s grounded in tactile reality, yet open to imagination and innovation.

9. 9

10. 10 “ Material ” Design - Principles Tactile Surface Print Design Meaningful Animation Adaptive Design

11. 11 Layers stacked, arranged at different heights and casts shadows on the top of each other

12. 12 A “container” which cast a shadow. Google’s Material Design philosophy strives for “clean” design and simplicity . No need for textures or light and shade image gradients. Surface

13. 13 Basically indicates the relative height/position of an object in a stacked layer. Shadow plays an important role in determining the depth of an object. Depth

14. 14 Depth should be meaningful Take care of the movements Its not necessary to use FAB Use of dialog boxes

15. 15

16. 16

17. 17 In Material Design, surface is compared to a digital or quantum paper. Everything placed in the digital paper is digital ink.

18. 18 important functions . Font style & Composition . .Structure of Content . Material design recommends using Roboto font. Typography

19. 19 Color is an important means of expression. Palette library can be used to extract colors for the app. Standard color palette consists of; - Main - Accent Colors

20. 20 Main Colors – used for large areas – action bars, darker variation for status bar etc. Accent Colors – used for – point controls, indicators, buttons, strips etc. – used to attract users attention to key elements like FAB etc.

21. 21 List View Card View

22. 22 Material design encourages developers and designers to use photos and illustrations. Pictures are recommended to use without frames ( bleed ). Status bar is even made transparent so as not to interfere.

23. 23 Active movement catches users eye. By using animations we manage users attention. Laws of physics greatly used in conceptualizing material design animations.

24. 24

25. 25 “Animation with abrupt starts and stops or rapid changes in direction appears unnatural and can be an unexpected and unpleasant disruption for the user.” Some animations which need to be avoided: . Animations that appear from the center of the screen, breaking the relationship with the input. . Avoid linear motion . Avoid symmetric acceleration / deceleration . Do not speed-up when enter and accelerate when leaving . Avoid hard cuts and rather use easing or smooth transition effects. . When using multiple animated blocks, avoid using disorderly motion. Rather try to have all the blocks in same order.

26. 26

27. 27 Adaptive design is how we can apply all the above mentioned principles in all form factors.

28. 28 Indents

29. 29 Whiteframes

30. 30 Dimensions

31. 31

32. 32

33. 33

34. 34

35. 35

36. 36

37. 37

38. 38

39. 39

40. Thank you Questions?