Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Material Design
It’s a Whole New
Language
Will Hacker | 7.11.2015 | @willhacker
WTF is Material Design?
7.11.2015 3Material Design: It’s a Whole New Language
Evolutionary, Not Revolutionary
Skeuomorphism Flat Material 
7.11.2015 4Material Design: It’s a Whole New Language
“Create a visual
language that
synthesizes classic
principles of goo...
Material is 3D Space
7.11.2015 6Material Design: It’s a Whole New Language
“Develop a single
underlying system that
allows for a unified
experi...
7.11.2015 7Material Design: It’s a Whole New Language
• Layouts
• Components
• Color
• Visual Style
• Interaction Patterns...
Layouts
7.11.2015 9Material Design: It’s a Whole New Language
Paper
7.11.2015 10Material Design: It’s a Whole New Language
Steps
Toolbars
Toolbar
Menus
7.11.2015 13Material Design: It’s a Whole New Language
Floating Actions
Components
Sliders With
Icons
Sliders With
Values
Component
States
Chips :
Closed
Chips : Open
Cards
Card
Collections
Color
Primary and
Accent
Colors
Customizabl
e Themes
Theme
Colors
Light Theme
Dark Theme
7.11.2015 28Material Design: It’s a Whole New Language
Themes : Light and Dark
Visual Style
Roboto
Typeface
Noto
Typeface
7.11.2015 32Material Design: It’s a Whole New Language
Bold Immersive Imagery
Vibrant
Illustrations
Icon
Geometry
and Lighting
Icon
Components
and Color
Interaction
Patterns
Persistent
Search
Persistent
Search in
Focus
Navigation
Drawer
Pattern
Navigation
Drawer
Selection
7.11.2015 41Material Design: It’s a Whole New Language
Data Table Hover
7.11.2015 42Material Design: It’s a Whole New Language
Data Table Selected Row
7.11.2015 43Material Design: It’s a Whole New Language
Data Table Column Sorted
Animation
7.11.2015 45Material Design: It’s a Whole New Language
Onboarding Concept
7.11.2015 46Material Design: It’s a Whole New Language
Burger Search Concept
7.11.2015 47Material Design: It’s a Whole New Language
WhatsApp
Examples
Google Web
on iOS
Flipboard
Icon
QuickTransla
te Icon
Google Docs
7.11.2015 53Material Design: It’s a Whole New Language
Noto Font Web Page
7.11.2015 54Material Design: It’s a Whole New Language
Material Up
Thank You
Will Hacker | 7.11.2015 | @willhacker
7.11.2015 56Material Design: It’s a Whole New Language
Google Material Design
http://www.google.com/design/spec/material-d...
7.11.2015 57Material Design: It’s a Whole New Language
Layout Templates
http://www.google.com/design/spec/resources/layout...
Upcoming SlideShare
Loading in …5
×

Material Design: It's a Whole New Language

1,299 views

Published on

Presented July 11, 2015 at Madison+ UX.

Published in: Design

Material Design: It's a Whole New Language

  1. 1. Material Design It’s a Whole New Language Will Hacker | 7.11.2015 | @willhacker
  2. 2. WTF is Material Design?
  3. 3. 7.11.2015 3Material Design: It’s a Whole New Language Evolutionary, Not Revolutionary Skeuomorphism Flat Material 
  4. 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. 5. Material is 3D Space
  6. 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. 7.11.2015 7Material Design: It’s a Whole New Language • Layouts • Components • Color • Visual Style • Interaction Patterns • Animation Comprehensive
  8. 8. Layouts
  9. 9. 7.11.2015 9Material Design: It’s a Whole New Language Paper
  10. 10. 7.11.2015 10Material Design: It’s a Whole New Language Steps
  11. 11. Toolbars
  12. 12. Toolbar Menus
  13. 13. 7.11.2015 13Material Design: It’s a Whole New Language Floating Actions
  14. 14. Components
  15. 15. Sliders With Icons
  16. 16. Sliders With Values
  17. 17. Component States
  18. 18. Chips : Closed
  19. 19. Chips : Open
  20. 20. Cards
  21. 21. Card Collections
  22. 22. Color
  23. 23. Primary and Accent Colors
  24. 24. Customizabl e Themes
  25. 25. Theme Colors
  26. 26. Light Theme
  27. 27. Dark Theme
  28. 28. 7.11.2015 28Material Design: It’s a Whole New Language Themes : Light and Dark
  29. 29. Visual Style
  30. 30. Roboto Typeface
  31. 31. Noto Typeface
  32. 32. 7.11.2015 32Material Design: It’s a Whole New Language Bold Immersive Imagery
  33. 33. Vibrant Illustrations
  34. 34. Icon Geometry and Lighting
  35. 35. Icon Components and Color
  36. 36. Interaction Patterns
  37. 37. Persistent Search
  38. 38. Persistent Search in Focus
  39. 39. Navigation Drawer Pattern
  40. 40. Navigation Drawer Selection
  41. 41. 7.11.2015 41Material Design: It’s a Whole New Language Data Table Hover
  42. 42. 7.11.2015 42Material Design: It’s a Whole New Language Data Table Selected Row
  43. 43. 7.11.2015 43Material Design: It’s a Whole New Language Data Table Column Sorted
  44. 44. Animation
  45. 45. 7.11.2015 45Material Design: It’s a Whole New Language Onboarding Concept
  46. 46. 7.11.2015 46Material Design: It’s a Whole New Language Burger Search Concept
  47. 47. 7.11.2015 47Material Design: It’s a Whole New Language WhatsApp
  48. 48. Examples
  49. 49. Google Web on iOS
  50. 50. Flipboard Icon
  51. 51. QuickTransla te Icon
  52. 52. Google Docs
  53. 53. 7.11.2015 53Material Design: It’s a Whole New Language Noto Font Web Page
  54. 54. 7.11.2015 54Material Design: It’s a Whole New Language Material Up
  55. 55. Thank You Will Hacker | 7.11.2015 | @willhacker
  56. 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. 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

×