Save 37% off PRO during our Black Friday Sale! »

Material Design on iOS

596f7b851dee04ff0f9a2e28fe4219fe?s=47 Stephanie Sharp
February 15, 2016

Material Design on iOS


Stephanie Sharp

February 15, 2016


  1. Material Design on iOS Stephanie Sharp


  3. The fundamentals of light, surface, and movement are key to

    conveying how objects move, interact, and exist in space and in relation to each other.
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. Defer to content Provide clarity Use depth to communicate iOS

    Design Material is the metaphor Bold, graphic, intentional Motion provides meaning Material Design
  12. Clients Developers Designers That’s nice. Why should I care?

  13. What do we agree on? Some consistency across platforms is

    good Respect the platform and its users
  14. So, what can we borrow from Material Design?

  15. Navigation?

  16. None
  17. Facebook YouTube Airbnb LinkedIn

  18. Now, typically we don’t provide design advice about the things

    that we don’t offer to you guys… but I will say that their value is greatly over-stated, and they have huge usability downsides too. – Mike Stern, Apple UX Evangelist, WWDC 2014
  19. None
  20. Facebook YouTube Airbnb LinkedIn

  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. Navigation? No, thank you.

  29. UI components?

  30. Material

  31. MaterialKit

  32. Material Controls for iOS

  33. Material Design Lite (web)

  34. MaterialTextField

  35. UI components? Sometimes.

  36. Meaningful motion?

  37. Beautiful, subtle animation pervades the iOS UI and makes the

    app experience more engaging and dynamic. – Human Interface Guidelines
  38. Add animation cautiously… Animation that seems excessive or gratuitous can

    obstruct app flow, decrease performance, and distract users from their task. – Human Interface Guidelines
  39. Animation can exist within all components of an app and

    at all scales, from detailed icons to key transitions and actions. – Material Design Spec
  40. …an app can truly delight a user when animation is

    used in ways beyond the obvious. A menu icon that becomes an arrow or playback controls that smoothly change from one to the other serve dual functions: to inform the user and to imbue the app with a moment of wonder and a sense of superb craftsmanship. – Material Design Spec
  41. None
  42. BubbleTransition

  43. inspired by: MaskZoomTransition


  45. Meaningful motion? Maybe, with care.

  46. Recap Some consistency across platforms is good. Navigation? (Usually) No,

    thank you. UI Components? Sometimes. Motion? With care.
  47. Questions? Thanks!