Presented April 18, 2015 at Mobile Camp Chicago.

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

2. WTF is Material Design?

3. 4.18.2015 3Material 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

4. 4.18.2015 4Material 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

5. Material is 3D Space

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

7. Layouts

8. 4.18.2015 8Material Design: It’s a Whole New Language
Paper

9. 4.18.2015 9Material Design: It’s a Whole New Language
Steps

10. Toolbars

11. Toolbar
Menus

12. 4.18.2015 12Material Design: It’s a Whole New Language
Floating Actions

13. Components

14. Sliders With
Icons

15. Sliders With
Values

16. Component
States

17. Chips : Closed

18. Chips : Open

19. Cards

20. Card
Collections

21. Color

22. Primary and
Accent
Colors

23. Customizable
Themes

24. Theme
Colors

25. Light Theme

26. Dark Theme

27. 4.18.2015 27Material Design: It’s a Whole New Language
Themes Side By Side

28. Visual Style

29. Roboto
Typeface

30. Noto
Typeface

31. 4.18.2015 31Material Design: It’s a Whole New Language
Bold Immersive Imagery

32. Vibrant
Illustrations

33. Icon
Geometry
and Lighting

34. Icon
Components
and Color

35. Interaction
Patterns

36. Persistent
Search

37. Persistent
Search in
Focus

38. Navigation
Drawer
Pattern

39. Navigation
Drawer
Selection

40. 4.18.2015 40Material Design: It’s a Whole New Language
Data Table Hover

41. 4.18.2015 41Material Design: It’s a Whole New Language
Data Table Selected Row

42. 4.18.2015 42Material Design: It’s a Whole New Language
Data Table Column Sorted

43. Animation

44. 4.18.2015 44Material Design: It’s a Whole New Language
Onboarding Concept

45. 4.18.2015 45Material Design: It’s a Whole New Language
Burger Search Concept

46. 4.18.2015 46Material Design: It’s a Whole New Language
WhatsApp

47. Material Design
April 2015 Updates

48. 4.18.2015 48Material Design: It’s a Whole New Language
• Data tables
• Units and measurements
• Floating Action Button has been moved
into its own section, adding new details
about behavior and transitions
• App structure
What’s New

49. 4.18.2015 49Material Design: It’s a Whole New Language
• Component sticker sheet for Adobe After
Effects
• Data truncation and redaction
• Writing guidelines for Settings
What’s New

50. 4.18.2015 50Material Design: It’s a Whole New Language
• Typography adds further guidance on style
and line height for dense and tall
languages
• Cards includes more specs for laying out
actions and content
• Dialogs contains additional layout
guidance
Significant Content Updates

51. 4.18.2015 51Material Design: It’s a Whole New Language
• Tabs adds guidance around label content
and more complete sizing specs
• Scrolling techniques adds guidance for
overlapping content
Significant Content Updates

52. Examples

53. Google Web
on iOS

54. Flipboard
Icon

55. QuickTranslate
Icon

56. Google Docs

57. 4.18.2015 57Material Design: It’s a Whole New Language
Noto Font Web Page

58. 4.18.2015 58Material Design: It’s a Whole New Language
Material Up

59. Thank You
Will Hacker | 4.18.2015 | @willhacker

60. 4.18.2015 60Material 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

61. 4.18.2015 61Material 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
Appendix: Material Design
Resources