Demystifying Developer & Designer Collaboration

A talk I did for Lexmark's week-long event - Break2Create. Originally presented for Devcon Cebu 2018 and updated for 2020. Big thanks to Chester Cornelio for the invite 🔥🔥🔥

Transcript

30. Monday, 7:15 AM Yo! Here’s the iOS screens ready - for implementation!
31. Monday, 7:15 AM Yo! Here’s the iOS screens ready - for implementation! Cool. Let’s see it.
32. Yo! Here’s the iOS screens ready - for implementation! Cool. Let’s see it.
33. Looks pretty awesome, uh?
34. Looks pretty awesome, uh? We can implement this within the next few hours, right?
35. Looks pretty awesome, uh? We can implement this within the next few hours, right? ….
36. Looks pretty awesome, uh? We can implement this within the day, right?
37. No technical understanding how code works Insanely hard to implement designs # 1 # 2 Aesthetics over function # 3 T H E N O N -T E C H N I C A L D E S I G N E R
38. Do you really understand what designers do?
39. https://dribbble.com/shots/3761845-landing-page
40. https://unsplash.com/photos/-uQmL3oweyo
41. https://unsplash.com/photos/36Aai16fubc
42. https://dribbble.com/shots/3761845-landing-page It’s not about pushing pretty pixels
43. https://unsplash.com/photos/-uQmL3oweyo It’s not about being creative & artistic
44. https://unsplash.com/photos/36Aai16fubc It’s not just about facilitating a process
45. Designers solve problems
48. If your designer isn’t solving a problem
49. Then he or she is not being a designer.
50. Then he or she is not being a designer.
51. Are you working with the right designer?
54. T Y P E S O F D E S I G N E R S W H AT D E S I G N E R ? Visual Designer Tools of the Trade: • the “Pixel-Pusher” & assets maker • focus is on crafting beautiful icons, controls, and visual elements and making use of suitable typography • can also work on print
55. W H AT D E S I G N E R ? UI Designer Tools of the Trade: • focused on “how the product is laid out” • interface connects to the laid out UX • responsible for a consistent design language T Y P E S O F D E S I G N E R S
56. W H AT D E S I G N E R ? UX Designer Tools of the Trade: • the champion of a “user's needs” • User personas, A/B test results, Investigative user studies & interviews • overall feel of the product T Y P E S O F D E S I G N E R S
57. W H AT D E S I G N E R ? Product Designer Tools of the Trade: • helps identify the initial problem, sets benchmarks to address it, and then designs, tests, and iterates on different solutions • well-rounded skills in UI/UX & coding. T Y P E S O F D E S I G N E R S
58. So look for the right designer
59. No technical understanding how code works Insanely hard to implement designs # 1 # 2 Aesthetics over function # 3 T H E N O N -T E C H N I C A L D E S I G N E R
60. Use existing design patterns & interactions T I P # 1
61. Apple’s Human Interface Guidelines
62. Facebook Design
63. Material Design
64. Ant Design System
65. Create WireFlows T I P # 2
67. overflow.io
69. Collaborate Early T I P # 2
71. whimsical.co
73. No technical understanding how code works Insanely hard to implement designs # 1 # 2 Aesthetics over function # 3 T H E N O N -T E C H N I C A L D E S I G N E R
74. Should designers code?
75. Type “should designers” on Google - and guess what appears
76. https://blog.envylabs.com/all-the-answers-to-the-should-designers-code-question-e86a12fc3ed0 All the answers to the “Should designers code?” question
77. Team YES Team NO
78. Should designers code?
79. Yes & No
80. Should developers learn design?
81. Let’s save that discussion for another day
82. D E V E L O P E R S X D E S I G N E R S C H A L L E N G E # 2 Team Communication & Workflow
83. Communication Problem Design Hand-Off # 1 # 2 Disconnected Team Structure # 3 T E A M C O M M U N I C AT I O N + W O R K F L O W
84. Work in small teams. Not by departments. T I P # 1
88. D E S I G N E R S D E V E L O P E R S T E S T E R S S Y S T E M S A N A LY S T S
89. D E S I G N E R S D E V E L O P E R S T E S T E R S S Y S T E M S A N A LY S T S C O M M U N I C AT I O N G A P C O M M U N I C AT I O N G A P C O M M U N I C AT I O N G A P C O M M U N I C AT I O N G A P
92. D E S I G N E R S D E V E L O P E R S D E S I G N E R S D E V E L O P E R S D E S I G N E R S D E V E L O P E R S
94. misconceptions around working agile
98. the rise of the creative technologist role
101. Communication Problem Design Hand-Off # 1 # 2 Disconnected Team Structure # 3 T E A M C O M M U N I C AT I O N + W O R K F L O W
102. Prototypes over static mockups: T I P # 1
105. https://dribbble.com/shots/5298824-K-R-A-I
106. https://dribbble.com/shots/3474105-Course-View-Animation
107. Automate Developer Handoff T I P # 2
108. D E V E L O P E R H A N D O F F T O O L S
109. F R A M E R H A N D O F F
110. I N V I S I O N I N S P E C T
111. I N V I S I O N I N S P E C T
112. Z E P L I N
113. Styleguides T I P # 3
114. Z E P L I N
115. I N V I S I O N D E S I G N S Y S T E M M A N A G E R
116. F I G M A
117. Version Control for Development B O N U S T I P
118. Version Control for Development B O N U S T I P
119. Version Control for Design B O N U S T I P
120. A S B T R A C T
121. Communication Problem Design Hand-Off # 1 # 2 Disconnected Team Structure # 3 T E A M C O M M U N I C AT I O N + W O R K F L O W
122. T E A M C O M M U N I C AT I O N + W O R K F L O W Communication Problem Design Hand-Off # 1 # 2 Disconnected Team Structure # 3 ELIMINATE THE HANDOFF
123. The “Hot Potato” Method
127. There never has been a more exciting time for designers & developers to work together :
128. One last thing before I go
129. Always, remember tools are just tools
130. EMPATHY
131. “It’s just people, talking to people”
132. Thank you!