Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Implementing Google's Material Design Guidelines

802 visualizaciones

Publicado el

Implementing Google's Material Design Guidelines. Presented on 6th November 2015 at Oredev.

Dropbox link with working Gifs - https://www.dropbox.com/s/m7ug6m6139hpsd9/Material%20Design%20-%20Oredev.pptx?dl=0

Publicado en: Software
  • Sé el primero en comentar

Implementing Google's Material Design Guidelines

  1. 1. Implementing Google’s Material Design UI Guidelines @Ben_Hall Ben@BenHall.me.uk OcelotUproar.com / Katacoda.com
  2. 2. @Ben_Hall / Blog.BenHall.me.uk Tech Support > Tester > Developer > Founder Software Development Studio WHOAMI?
  3. 3. Agenda • Why • Colors • Icons • Imagery • Feedback • Implementing into your application
  4. 4. What is Material Design?
  5. 5. Isn’t that just Bootstrap?
  6. 6. Why design matters?
  7. 7. ATTRACTIVE THINGS WORK BETTER http://www.jnd.org/dn.mss/CH01.pdf
  8. 8. Emotional reaction http://www.jnd.org/dn.mss/emotion_design_at.html
  9. 9. PRECONCEIVED EXPECTATIONS Opinion are formed before we’ve even realised
  10. 10. Colours
  11. 11. Thanks @toddhgardner
  12. 12. https://www.materialpalette.com/
  13. 13. Icons
  14. 14. CONSISTENCY. WHAT DOES THE USER EXPECT? *REALLY* important on mobile
  15. 15. RESPONSIVE ICONS?
  16. 16. Imagery
  17. 17. STOCK PHOTOGRAPHY
  18. 18. STOCK PHOTOGRAPHY
  19. 19. RESPOND TO TOUCH EVENTSRESPOND TO TOUCH EVENTS
  20. 20. Do Don’t
  21. 21. Do Don’t
  22. 22. DELIGHTFUL DETAILS
  23. 23. https://www.google.com/design/spec/animation/authentic-motion.html#authentic-motion-mass-weight Avoid linear motion CSS easing
  24. 24. PROGRESS BARS – CLOUDFLARE EXAMPLE
  25. 25. Error Messages
  26. 26. Creating a Website / Mobile App
  27. 27. Use colours for emphasis
  28. 28. Buttons The raised button is a standard button that signify actions and seek to give depth to a mostly flat page Flat buttons are usually used within elements that already have depth like cards or modals.
  29. 29. <a class="waves-effect waves-light btn">Stuff</a> <a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a> <a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>
  30. 30. Cards
  31. 31. <div class="row"> <div class="col s12 m6"> <div class="card blue-grey darken-1"> <div class="card-content white-text"> <span class="card-title">Card Title</span> <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#">This is a link</a> <a href="#">This is a link</a> </div> </div> </div> </div>
  32. 32. <div class="row"> <div class="col s12 m6"> <div class="card blue-grey darken-1"> <div class="card-content white-text"> <span class="card-title">Card Title</span> <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#">This is a link</a> <a href="#">This is a link</a> </div> </div> </div> </div>
  33. 33. What do users think?
  34. 34. “Why is it flipped around?”
  35. 35. No FAQ? I want more information
  36. 36. Designer? Too many words! More Images Remove sign up prompts
  37. 37. Summary
  38. 38. Summary • google.com/design • Material Design provide a foundation for developers and non-designers to build sane websites • Guidelines, not rules. Adapt, change, break to match your own users • materializecss.com

×