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: Google's New Design Language

4,977 views

Published on

Google's got a new, cross-platform design language: Material Design. But what is it really? How did we get here? This presentation takes a look back at all the key milestones of Android's design, before focusing on the goals and principles of Material Design.

Published in: Technology

Material Design: Google's New Design Language

  1. 1. A brief history of Android From a design perspective
  2. 2. Oct. 22, 2008 T-Mobile G1 is launched
  3. 3. Sep. 15, 2009 Density Independent pixels introduced in Donut
  4. 4. Oct. 26, 2009 The Droids arrive
  5. 5. Dec. 6, 2010 Google acquires Matias Duarte
  6. 6. Feb. 22, 2011 Honeycomb showed us a glimpse of what Android would soon look like
  7. 7. Oct. 8, 2011 #YOLOHOLO
  8. 8. July 9, 2012 Jelly Bean brings actions to notifications, Google Now
  9. 9. Oct. 31, 2013 Losing the fat
  10. 10. June 25, 2014 Android L Preview
  11. 11. What were the goals?
  12. 12. …synthesize the classic principles of good design with the innovation and possibility of technology and science…
  13. 13. …single underlying system that allows for a unified experience across all platforms…
  14. 14. …touch, voice, mouse and keyboard are all first-class input methods…
  15. 15. Material is the Metaphor Bold, graphic, intentionalMotion provides meaning
  16. 16. Visual Hierarchy It is critical to understanding Material Design
  17. 17. Design = Communication UI Design is all about communicating information
  18. 18. Users are looking for (visual) relationships
  19. 19. The larger the size the greater its importance To increase emphasis, use bold and/or underline Terms and conditions applied
  20. 20. Color
  21. 21. Contrast
  22. 22. Alignment
  23. 23. Repetition
  24. 24. Proximity
  25. 25. Imagery
  26. 26. Personal Relevance
  27. 27. Information
  28. 28. Delight
  29. 29. Be Immersive
  30. 30. Use multiple mediums
  31. 31. Stay Away From Stock
  32. 32. Have a point of focus
  33. 33. Build Narratives
  34. 34. Use Scale
  35. 35. What else you need to watch out for • Don’t over manipulate • Use the right resolutions, be wary of pixelation • Ensure text on an image is legible • Use avatars and thumbnails • Use Hero images
  36. 36. google.com/design
  37. 37. raveesh.in/materialdesi gn
  38. 38. +Raveesh Bhalla @raveeshbhalla

×