The document introduces Material Design, a visual language developed by Google. It describes Material Design as evolutionary rather than revolutionary, moving from skeuomorphism and flat design to a system that incorporates 3D space. The goals of Material Design are to synthesize classic design principles with technology and create a unified experience across devices. It then covers the comprehensive components of Material Design including layouts, components, color, visual style, interaction patterns, and animation.

1. Material Design
It’s a Whole New
Language
Will Hacker | 7.11.2015 | @willhacker

2. WTF is Material Design?

3. 7.11.2015 3Material Design: It’s a Whole New Language
Evolutionary, Not Revolutionary
Skeuomorphism Flat Material 

4. 7.11.2015 4Material Design: It’s a Whole New Language
“Create a visual
language that
synthesizes classic
principles of good
design with the
innovation and
possibility of technology
and science.”
Material Design Goals

5. Material is 3D Space

6. 7.11.2015 6Material Design: It’s a Whole New Language
“Develop a single
underlying system that
allows for a unified
experience across
platforms and device
sizes.”
Across All Devices

7. 7.11.2015 7Material Design: It’s a Whole New Language
• Layouts
• Components
• Color
• Visual Style
• Interaction Patterns
• Animation
Comprehensive

8. Layouts

9. 7.11.2015 9Material Design: It’s a Whole New Language
Paper

10. 7.11.2015 10Material Design: It’s a Whole New Language
Steps

11. Toolbars

12. Toolbar
Menus

13. 7.11.2015 13Material Design: It’s a Whole New Language
Floating Actions

14. Components

15. Sliders With
Icons

16. Sliders With
Values

17. Component
States

18. Chips :
Closed

19. Chips : Open

20. Cards

21. Card
Collections

22. Color

23. Primary and
Accent
Colors

24. Customizabl
e Themes

25. Theme
Colors

26. Light Theme

27. Dark Theme

28. 7.11.2015 28Material Design: It’s a Whole New Language
Themes : Light and Dark

29. Visual Style

30. Roboto
Typeface

31. Noto
Typeface

32. 7.11.2015 32Material Design: It’s a Whole New Language
Bold Immersive Imagery

33. Vibrant
Illustrations

34. Icon
Geometry
and Lighting

35. Icon
Components
and Color

36. Interaction
Patterns

37. Persistent
Search

38. Persistent
Search in
Focus

39. Navigation
Drawer
Pattern

40. Navigation
Drawer
Selection

41. 7.11.2015 41Material Design: It’s a Whole New Language
Data Table Hover

42. 7.11.2015 42Material Design: It’s a Whole New Language
Data Table Selected Row

43. 7.11.2015 43Material Design: It’s a Whole New Language
Data Table Column Sorted

44. Animation

45. 7.11.2015 45Material Design: It’s a Whole New Language
Onboarding Concept

46. 7.11.2015 46Material Design: It’s a Whole New Language
Burger Search Concept

47. 7.11.2015 47Material Design: It’s a Whole New Language
WhatsApp

48. Examples

49. Google Web
on iOS

50. Flipboard
Icon

51. QuickTransla
te Icon

52. Google Docs

53. 7.11.2015 53Material Design: It’s a Whole New Language
Noto Font Web Page

54. 7.11.2015 54Material Design: It’s a Whole New Language
Material Up

55. Thank You
Will Hacker | 7.11.2015 | @willhacker

56. 7.11.2015 56Material Design: It’s a Whole New Language
Google Material Design
http://www.google.com/design/spec/material-design/introduction.html
Latest Updates to Material Design
http://www.google.com/design/spec/whats-new/whats-new.html
Material for Android Developers
http://developer.android.com/training/material/index.html
Roboto and Noto Fonts
http://www.google.com/design/spec/resources/roboto-noto-fonts.html
Appendix: Material Design
Resources

57. 7.11.2015 57Material Design: It’s a Whole New Language
Layout Templates
http://www.google.com/design/spec/resources/layout-templates.html
Material Palette (Palette Generator)
http://www.materialpalette.com
Material Up (Material Design Showcase)
http://www.materialup.com
Smashing Magazine Tutorial on Sketch’s Material Design Sticker Sheet
http://www.smashingmagazine.com/2015/05/15/sketch-with-material-
design/
Appendix: Material Design
Resources