Material design introduction

1. Xavier Yin
2015/04/08
Material Design
Introduction

2. Outline
 Preamble
 Material Design
 Environment
 Properties
 Objects

3. Preamble
Material design is a design
language developed by
Google and announced at
the Google I/O conference
on June 25, 2014.

4. Material Design
 Visual language
– Classic principles
– Good design
 Technology and Science
– Innovation
– Possibility

5. Material Design
 Principles
– Material is the metaphor
 The unifying theory
– A rationalized space
– A system of motion.
 Paper and Ink

6. Material Design
 Principles
– Bold, graphic, intentional
 Print-based design
– Typography
– Grids
– Space
– Scale
– Color
– Use of imagery
 Hierarchy, Meaning, and Focus

7. Material Design
 Principles
– Motion provides meaning
 Meaningful
 Appropriate
 Focus attention
 Maintain continuity
– Feedback
 subtle yet clear
– Transitions
 Efficient yet coherent

8. Environment
 3D world
– x, y, and z dimensions
– z-axis
 a standard 1dp thickness

9. Environment
 Light and shadow
– virtual lights
– key light

10. Physical Properties
 Varying x & y dimensions
 Uniform thickness(1dp)
 Material never has a
thickness of 0

11. Physical Properties
 Shadows
– from the relative elevation
(z-position)

12. Physical Properties
 Content behavior
– can be decoupled from the
behavior of material

13. Physical Properties
 Multiple material
elements cannot occupy
the same point in space
simultaneously.

14. Physical Properties
 Multiple material
elements cannot occupy
the same point in space
simultaneously.

15. Transforming Material
 Change shape
– only its plane
– never bends or folds

16. Transforming Material
 Join together
 When split, material can
heal.

17. Movement of Material
 Be spontaneously generated
or destroyed anywhere in the
environment

18. Movement of Material
 Material can move along any
axis.

19. Movement of Material
 Z-axis motion is typically a
result of user interaction with
material.

20. Elevation
 Relative position of an object
along its parent’s z-axis

21. Elevation
 Resting elevation
– All material objects
 An object is a small component
 A sheet that spans the entire
display
– In the static state
 Not change
 If changing elevation
– should return to its resting
elevation as soon as possible
– Across apps
 Consistent
 From platform to platform
– the depth of the environment

22. Elevation
 Resting elevation
– All material objects
 An object is a small component
 A sheet that spans the entire
display
– In the static state
 Not change
 If changing elevation
– should return to its resting
elevation as soon as possible
– Across apps
 Consistent
 From platform to platform
– the depth of the environment

23. Elevation
 Resting elevation
– All material objects
 An object is a small component
 A sheet that spans the entire
display
– In the static state
 Not change
 If changing elevation
– should return to its resting
elevation as soon as possible
– Across apps
 Consistent
 From platform to platform
– the depth of the environment

24. Elevation
 Resting elevation
– All material objects
 An object is a small component
 A sheet that spans the entire
display
– In the static state
 Not change
 If changing elevation
– should return to its resting
elevation as soon as possible
– Across apps
 Consistent
 From platform to platform
– the depth of the environment

25. Elevation
 Responsive elevation
– Change their elevation in
response to user input or
system events
 Dynamic elevation offsets
– Relative to the resting state of
the component

26. Elevation
 Functional shadows
– Visual cues about the arrangement of objects in space

27. Elevation
 Functional shadows
– Visual cues about the arrangement of objects in space

28. Elevation
 Functional shadows
– Visual cues about the arrangement of objects in space

29. Object Relationships
 How to move?
– Independently
– Be constrained

30. Review
 What’s Material Design
– Classic principles, Good design, Metaphor
– Environment
 3D, Light and Shadow
– Properties
 Uniform thickness(1dp), Content behavior, Not pass through,
– Objects
 Change shape, Status

31. Conclusion
 Our Projects with Material Design
– Difficult
 IOS and Android are different style
 RD’s aspects are not enough
– PMs
– Designers
– Managers
– Developers of IOS

32. Other Contents
 Animation
 Style
 Layout
 Components
 Patterns
 Usability
 Resources

33. References
 Google
– http://www.google.com/design/spec/material-
design/introduction.html
 小鰻的Android學習筆記
– http://lp43.blogspot.tw/2014/07/material-design.html
 科技新報
– http://technews.tw/2014/07/02/some-thing-about-google-material-
design/