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

2,137 views

Published on

Presented April 18, 2015 at Mobile Camp Chicago.

Published in: Design
  • Be the first to comment

Material Design: It's a Whole New Language

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

×