Material Design: Google's New Design Language

40

description

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.

Transcript of Material Design: Google's New Design Language

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