Developer & Designer Collaboration

I had the honor to speak for the first ever Devcon Cebu 2018. In this talk, I shared tips and tricks on how developers and designers can collaborate better and more effectively with one other.

Transcript

1. D E V C O N C E B U 2 0 1 8 L E T ’ S TA L K Developer & Designer Collaboration
2. Hello, DevCon Cebu!
3. I N T R O W H O ’ S I N T H E R O O M ?
4. I N T R O W H O ’ S I N T H E R O O M ? Designers
5. I N T R O W H O ’ S I N T H E R O O M ? Designers Developers
6. I N T R O W H O ’ S I N T H E R O O M ? Designers Developers Startups
7. I N T R O O H , H E L L O ! Francis Alturas Product Designer
15. D I S C L A I M E R B E F O R E W E P R O C E E D Let’s keep it casual
16. D I S C L A I M E R B E F O R E W E P R O C E E D Let’s keep it casual Take everything with a grain of salt
17. D I S C L A I M E R B E F O R E W E P R O C E E D Let’s keep it casual Take everything with a grain of salt
18. Have you ever experienced this?
19. DESIGNER Hey man, I finished designing screens for the CRM we’re building.
20. DESIGNER Hey man, I finished designing screens for the CRM we’re building. Cool. I’m ready to work on it DEV
21. DESIGNER Hey man, I finished designing screens for the CRM we’re building. Cool. I’m ready to work on it DEV DESIGNER Great. Here’s a dropbox link to the psd file. https://www.dropbox.com/ 7l5ypsr6mw7yp05/home- superfinal-9.psd?dl=0
22. DESIGNER Hey man, I finished designing screens for the CRM we’re building. Cool. I’m ready to work on it DEV DESIGNER Great. Here’s a dropbox link to the psd file. https://www.dropbox.com/ 7l5ypsr6mw7yp05/home- superfinal-9.psd?dl=0
23. D E V C O N C E B U 2 0 1 8 L E T ’ S TA L K Developer & Designer Collaboration
24. As a developer, what do you struggle with when working with other designers?
31. The Non-Technical Designer Team Communication & Workflow 0 1 0 2 T H E S T R U G G L E
32. 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 # 1 The Non-Technical Designer
33. Monday, 7:15 AM Yo! Here’s the iOS screens ready - for implementation on Monday..
34. Monday, 7:15 AM Yo! Here’s the iOS screens ready - for implementation! Cool. Let’s see it.
35. Yo! Here’s the iOS screens ready - for implementation! Cool. Let’s see it.
36. Looks pretty awesome, uh?
37. Looks pretty awesome, uh? We can implement this within the next few hours, right?
38. Looks pretty awesome, uh? We can implement this within the next few hours, right? ….
39. Looks pretty awesome, uh? We can implement this within the day, right?
40. 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
41. Do you really understand 
 what designers do?
42. https://dribbble.com/shots/3761845-landing-page
43. https://unsplash.com/photos/-uQmL3oweyo
44. https://unsplash.com/photos/36Aai16fubc
45. https://dribbble.com/shots/3761845-landing-page It’s not about pushing pretty pixels
46. https://unsplash.com/photos/-uQmL3oweyo It’s not about being creative & artistic
47. https://unsplash.com/photos/36Aai16fubc It’s not just about facilitating a process
48. Designers 
 solve problems
51. If your designer
 isn’t solving a problem
52. Then he or she is not being a designer.
53. Then he or she is not being a designer.
54. Are you working with the right designer?
57. 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” • focus is on crafting beautiful icons, controls, and visual elements and making use of suitable typography • can also work on print
58. 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
59. 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
60. 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
61. So look for the right designer
62. 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
63. Use existing design patterns & interactions T I P # 1
64. Apple’s Human Interface Guidelines
65. Facebook Design
66. DesignCode.io iOS 11 UI Kit
67. Material Design UI Kit
68. Create User Flows T I P # 2
69. overflow.io
70. Collaborate Early T I P # 2
72. 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. 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
95. Prototypes over static mockups: T I P # 1
98. https://dribbble.com/shots/5298824-K-R-A-I
99. https://dribbble.com/shots/3474105-Course-View-Animation
100. Automate Developer Handoff T I P # 2
101. D E V E L O P E R H A N D O F F T O O L S
102. F R A M E R H A N D O F F
103. I N V I S I O N I N S P E C T
104. I N V I S I O N I N S P E C T
105. Z E P L I N
106. Styleguides T I P # 3
107. Z E P L I N
108. 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
109. Version Control for Development B O N U S T I P
110. Version Control for Development B O N U S T I P
111. Version Control for Design B O N U S T I P
112. A S B T R A C T
114. There never has been a more exciting time for designers & developers to work together :
115. One last thing before I go
116. Always, remember tools are just tools
117. EMPATHY
118. Thank you!
119. I N T R O O H , H E L L O ! Francis Alturas Product Designer
120. D E V C O N C E B U 2 0 1 8 T H A N K YO U Developer & Designer Collaboration