Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Intorduction to Material Design

484dd142c2bb1b6c7d59ce88c837d744?s=47 Syeef Karim
February 25, 2015

Intorduction to Material Design

Material Design is a relatively new design philosiphy recenetly introduced by Google during their I/O conference.

Although new, some of its principles are related to existing design patterns, such as flat design. This is a brief presentation that I gave at Mobile Notts discussing the differences between Material Design and Flat Design as well as key tips to help Designers and Developers integrate the concept into their apps.

484dd142c2bb1b6c7d59ce88c837d744?s=128

Syeef Karim

February 25, 2015
Tweet

Transcript

  1. Mobile Nottingham @MobileNotts @mkflint @syeefk <— Food & Drink available

    in the kitchen :D
  2. Material design

  3. None
  4. Syeef Karim syeef.karim@capitalone.com syeef@mlh.io Weekday Work Weekend Work @SyeefK Twitter

  5. Material design

  6. Pixels aren’t just bits on a screen, but rather they’re

    real things
  7. What is flat design?

  8. A design metaphor which removes any stylistic choices that give

    the illusion of three- dimensions
  9. Traditionally removes the use of drop shadows

  10. Traditionally removes the use of drop shadows Traditionally removes the

    use of gradients
  11. Traditionally removes the use of drop shadows Traditionally removes the

    use of gradients Traditionally removes the use of textures
  12. Instead opts for a minimalistic use of simple elements

  13. Instead opts for a minimalistic use of simple elements Instead

    opts for a minimalistic use of flat colours
  14. Instead opts for a minimalistic use of simple elements Instead

    opts for a minimalistic use of flat colours Instead opts for a minimalistic use of typography
  15. Material design is similar

  16. None
  17. None
  18. There are three key tricks to getting it right

  19. Colour

  20. “Bold, graphic, intentional”

  21. “Emphasise bold shadows and highlights.”

  22. None
  23. Primary colour

  24. None
  25. Accent colour

  26. None
  27. Imagery

  28. A great tool to help communicate your product

  29. None
  30. Pro tip - avoid stock imagery

  31. Looks unauthentic and cheap

  32. Authentic Motion aka Animations

  33. None
  34. None
  35. None
  36. None
  37. “…finding solutions within constraints.”

  38. Thanks for listening

  39. Mobile Nottingham @MobileNotts @mkflint @syeefk <— Food & Drink available

    in the kitchen :D