ADDC 2017 - Roy Marmelstein: Motion and building effective developer-designer relationships

ADDC 2017 - Roy Marmelstein: Motion and building effective developer-designer relationships

A closer relationship between development and design is essential for creating breakthrough user experiences. This talk will cover actionable ways to improve that relationship and will share Motion learnings from my experiences.

More about the talk, authors & slides: https://addconf.com/talks/20/
Read about the conference: https://addconf.com

Transcript

  1. None
  2. DESIGNER + DEVELOPER = ?

  3. Conflict / Disfunction

  4. Build transformative + delightful products

  5. Previously…

  6. None
  7. None
  8. Skeuomorphic era

  9. Flat(ish) era

  10. Design -> easier Delight -> harder

  11. "

  12. “iOS 7 shook up the market and, by pure luck,

    shifted high-end iOS design away from fashions I could never compete in — heavy use of textures and complex graphical widgets — into what I could actually do: simplicity, space, and typography.”
  13. None
  14. - 3 Stories. - Learnings + takeaways.

  15. 1

  16. DESIGNER + DEVELOPER = ❤

  17. ARCHITECT + ENGINEER = ❤

  18. Beauty + user/client needs

  19. Practical solutions

  20. None
  21. Utzon / Arup

  22. 1955 Competition

  23. 1957 Winner

  24. Shells

  25. 6 years of prototyping (!)

  26. Spherical solution

  27. No one has monopoly on clever solutions

  28. 1965 - Completion

  29. None
  30. 10 years late, 13.6x over budget

  31. Ghery, CAD etc.

  32. Developers - we are not a limiting factor

  33. 2 Reverse engineering design

  34. Design = “how it looks”?

  35. Design = imagining experiences within constraints

  36. Coding = solving problems within constraints

  37. Great design can be a great engineering challenge

  38. Apple TV

  39. None
  40. Class dump/hopper Jailbroken Reveal Package digging

  41. None
  42. None
  43. None
  44. XYZ Rotate + XY translation + scale + shadow

  45. None
  46. None
  47. “It’s impossible” = “I don’t want to to do it”

  48. How to solve hard motion problems?

  49. Most Animation = interpolation of values over time

  50. None
  51. Keyframe Animation

  52. None
  53. None
  54. 3

  55. None
  56. None
  57. None
  58. Prototypes

  59. Iterative process

  60. App = expensive

  61. Better specs

  62. How to annoy a developer • Forget edge cases /

    empty states • Forget different device sizes • Don’t consider interactions
  63. Prototyping landscape

  64. Prototyping • Low fidelity • Interaction • Take home

  65. None
  66. Fast + Easy Lo-fi sketch

  67. Simple Interaction

  68. Hard to master Rich UX Animations

  69. Code-based / WYSIWYG Flexible

  70. Hard + expensive Living prototypes

  71. Choose right prototyping solution

  72. Wrap up

  73. DESIGNER + DEVELOPER = ❤

  74. Developers - our job is to enable designer vision

  75. Designers - provide more complete vision

  76. Communication + empathy.

  77. @marmelroy