Designer-Developer Interaction

Sometimes design execution is harder than the design itself.
- How to build a bridge between designers and developers?
- How do you get a developer to love working with a designer?
- How to prepare yourself for a discussion with engineers?
- How to work with and how to understand developers?
- How to design a solution that's ready for the technical challenges?

Links mentioned during the presentation:
- Share your work: https://wake.com/
- Share and prototype: https://www.invisionapp.com/
- My point of view in "should developers code" discussion: https://www.facebook.com/groups/160243033994630/permalink/1436795099672744/?comment_id=1436934319658822
- Measure and document your work: https://zeplin.io/
- Measure and document your work: https://support.invisionapp.com/hc/en-us/articles/115000650823-Inspect
- Style guide template: http://patternlab.io/
- Sample datasets and more: https://www.invisionapp.com/craft
- Example data: http://lists.design/
- Real profile photos: https://tinyfac.es/

Transcript

1. DESIGNER-DEVELOPER INTERACTION Product Camp 2017 – June 10 Łukasz Przywarty
2. I’m Clark Łukasz from InVision Infermedica
3. The last time
 in Gdynia…
4. GENERAL TIPS 1
5. Tell developers what the design is about 5/41 @LukaszPrzywarty
6. Include developers in your design process Developer Designer
7. “The ultimate goal is to feel included. Jake Archibald, Developer at Google 7/41 @LukaszPrzywarty
8. Share often and keep your teammates updated 8/41 @LukaszPrzywarty
9. Justify your decisions 9/41 @LukaszPrzywarty
10. Think like an engineer 10/41 @LukaszPrzywarty
11. Walk in developer's shoes 11/41 @LukaszPrzywarty
12. Appreciate the developers'
 work and input 12/41 @LukaszPrzywarty
13. Don't act as if you know everything 13/41 @LukaszPrzywarty
14. Take responsibility for your work 14/41 @LukaszPrzywarty
15. Don't get angry if the first revision is not perfect – iterate 15/41 @LukaszPrzywarty
16. TECHNICAL TIPS 2
17. Document your design 17/41 @LukaszPrzywarty
18. Create a style guide 18/41 @LukaszPrzywarty
19. Organize your assets 19/41 @LukaszPrzywarty
20. Does Angela know? Does Angela know someone who knows? When will the person Angela knows get back to Angela, so Angela can get back to you, so you can get back to the person who asked you in the first place? Bobby Grace, Product Designer at Dropbox “ 20/41 @LukaszPrzywarty
21. Bring real data to your design 21/41 @LukaszPrzywarty
22. Prepare for different scenarios 22/41 @LukaszPrzywarty
23. Make your design flexible 23/41 @LukaszPrzywarty
24. Check the measurements of your platform 24/41 @LukaszPrzywarty
25. 10px 30px SCHEDULE SCHEDULE 50px 52px 10px 32px Padding 10, border 1 Sketch (inline border) CSS (box-sizing: border-box)
26. Include design review in the development process In progress Code review Design review
27. Extend the user experience to speed and performance 27/41 @LukaszPrzywarty
28. And yet, at the very moment that a Netflix viewer’s video
 stream stops and that spinning animation appears, indicating
 the player is now awaiting more data, these engineers make a dramatic change. They become user experience designers. Jared Spool “ 28/41 @LukaszPrzywarty
29. Be realistic 29/41 @LukaszPrzywarty
30. FOLLOW UP 3
31. Developers are not your enemies. Put your gun down. 31/41 @LukaszPrzywarty
32. We use different language, have different goals and points of view. Embrace it. 32/41 @LukaszPrzywarty
33. Collaboration is a key 33/41 @LukaszPrzywarty
34. Try to understand instead of
 getting angry 34/41 @LukaszPrzywarty
35. Reduce the unexpected 36/41 @LukaszPrzywarty
36. User experience runs much deeper than static designs 35/41 @LukaszPrzywarty
37. Be patient and smile! 37/41 @LukaszPrzywarty
38. “We as an industry often speak of empathizing with the user and user-centric design, but how can we honestly build empathy for our users if we can’t empathize with each other, or those
 outside of our towers. Mustafa Kurtuldu, Design Advocate at Google 38/41 @LukaszPrzywarty
39. Want more? Download the presenter notes (PDF)
40. 40/41 @LukaszPrzywarty Sources • A Mindful Design Process • Creating a Collaborative Environment • Everyone Is a Designer. Get Over It • How Designers Work With Developers • The Beauty Of Imperfection In
 Interface Design • The Power of Experience Mapping • When Design Feels Like an Uphill battle • Who is Responsible for Design? General • 8-Point Grid: Borders and Layouts • Do You Know Where Your Icons Are? • The Beauty Of Imperfection In Interface Design • The Nine States of Design Technical
41. THANK YOU! @LukaszPrzywarty at Twitter,
 LinkedIn and Instagram