This document discusses tips for collaboration between designers and developers. It recommends that designers tell developers about the purpose and benefits of designs, include developers in the design process, justify design decisions, learn about development constraints, and appreciate developers' work. Designers should document designs thoroughly, create style guides, use real data, and consider different usage scenarios. Both roles should communicate openly, understand each other's perspectives, and work as a team to improve the user experience.

1. DESIGNER-DEVELOPER
COLLABORATION
UX Wrocław 13 – December 8, 2017
Łukasz Przywarty

2. I’m Clark
Łukasz
from InVision
Infermedica

3. Design execution is hard
3/43@LukaszPrzywarty

4. “After all, our designs are completely useless
until they are built. What exists in the users’
hands is the final design, and nothing less.
Daniel Eden, Facebook
4/43@LukaszPrzywarty

5. GENERAL TIPS1

6. Tell developers
what the design
is about
6/43@LukaszPrzywarty
• What is design?
• What your process looks like?
• How users and business can
benefit from your work?

7. Include developers in
your design process
Developer Designer

8. “The ultimate goal is to feel included.
Jake Archibald, Developer at Google
8/43@LukaszPrzywarty

9. Share often and keep your
teammates updated
9/43@LukaszPrzywarty

10. Justify your
decisions
10/43@LukaszPrzywarty
• Show multiple options and the path
that led you to the current design
• Discuss the pros and cons of
different solutions
• Use data

11. Walk in
developer's
shoes
11/43@LukaszPrzywarty
• Learn the foundations of the platform
you're designing for
• Think about how do the things actually
work (e.g. animations)
• Consider learning to code

12. Appreciate the
developers’ work
and input
Great work!

13. Don't act as
if you know
everything
13/43@LukaszPrzywarty
• Practice saying, “I don't know”, “You're
right” and “Sorry”
• See every problem as a challenge and
an opportunity to learn something new
• Listen and draw conclusions

14. Take responsibility
for your work
14/43@LukaszPrzywarty

15. Don't get angry if the first revision
is not perfect – iterate
15/43@LukaszPrzywarty

16. TECHNICAL TIPS2

17. Document
your design
17/43@LukaszPrzywarty
• Describe how things should look and
how they should work
• Use Zeplin, InVision Inspect
• Provide animation details, prototypes
(e.g. Framer, Principle)

18. Create a
style guide Effra Regular
Aa Effra Medium
Aa Effra Bold
Aa
Font weight

19. Organize your assets
19/43@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/43@LukaszPrzywarty

21. Bring real data to
your design
21/43@LukaszPrzywarty
• Pull real content from your
website or other sources
(InVision Craft, lists.design,
tinyfac.es)
• Remember about language
differences

22. Prepare for different scenarios
22/43@LukaszPrzywarty

23. 23/43@LukaszPrzywarty
• What happens if the element is empty?
• What happens when you have only one
element (e.g. on the list)?
• What happens when you have too many
elements (e.g. table view)?
• What happens when errors occur (e.g.
forms)?
• What happens when the user achieves
their goal (e.g. successfully submitted
form)?
• What happens when there's no (or poor)
internet connection?
• How does this button look like on hover,
focus etc?
Do you know…

24. Make your design flexible
24/43@LukaszPrzywarty

25. Check the measurements
of your platform
25/43@LukaszPrzywarty

26. 10px
30px
SCHEDULE SCHEDULE
50px 52px
10px
32px
Same padding, same border
Sketch (inline border) CSS (box-sizing: border-box)

27. Include design review
in the development
process
In progress
Code review
Design review

28. Extend the user experience to
speed and performance
28/43@LukaszPrzywarty

29. 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
“
29/43@LukaszPrzywarty

30. Be realistic
30/43@LukaszPrzywarty

31. FOLLOW UP4

32. “Greatest outputs of our careers
will be relationships.
Cameron Moll, Facebook
32/43@LukaszPrzywarty

33. Developers are not your enemies
33/43@LukaszPrzywarty

34. We use different language, have
different goals and points of view.
Embrace it.
34/43@LukaszPrzywarty

35. Collaboration is a key
35/43@LukaszPrzywarty

36. Try to understand instead of
getting angry
36/43@LukaszPrzywarty

37. Reduce the unexpected
37/43@LukaszPrzywarty

38. User experience runs much deeper
than static designs
38/43@LukaszPrzywarty

39. Be patient and don’t give up!
39/43@LukaszPrzywarty

40. “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
40/43@LukaszPrzywarty

41. Want more?
Download the presenter notes (PDF)

42. 42/43@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

43. THANK YOU!
@LukaszPrzywarty at Twitter,
LinkedIn and Instagram