A set of tips and best practices about designer-developer collaboration, as presented at UX Camp Europe 2017 in Berlin!

1. Teamwork
SAT JUN 5 17
What I have learned
about front-end collaboration

2. Before you start
The foundations of good teamwork

3. We all want to build great products
A SHARED GOAL

4. Do I think designers should know about code?
– Yes.
Do I think designers should make money coding?
– No.
T-SHAPES

5. See foundation #1
ASSUME BEST INTENTIONS

6. Step 1 – Talk
Because sharing is caring!

7. @magdazadara
Get to know each other
What we can do
• Team Canvas
• Futurespective
• Definitions of success
• Hidden talents
• Team events
www.theteamcanvas.com/

8. @magdazadara
Be interested
& be interesting
• Things that have worked in the past
• Sitting next to each other
• Internal flash talks
• Retrospectives
• Engaging devs in design workshops
• Team dictionary
• Going to conferences together
unsplash.com/@rawpixel?photo=Y9nzl9tA3Lw/

9. Step 2 – Get your act together
No more design_finalfinalv2.psd

10. @magdazadara
What is Abstract?
“Design is more than layouts and prototypes.
We’ve built Abstract to help with the other half of
design work: managing changes, documenting the
work, and keeping everyone informed.
It’s a version controlled workflow, built on Git, and
seamlessly integrated with Sketch.”
abstractapp.com

12. @magdazadara
Conflict resolution
• Merge work done by different designers
• Hand pick which symbol/icon/layout you want to
keep
• Trace back decisions

13. @magdazadara
No tool? No problem.
• Even if you are not using a fancy tool, make sure
you have rules
• Work with components and share them
• Other tools that can help
• Brand.ai
• InVision Cloud
• Good old fashioned Dropbox or Google Drive
• Printing things and putting them on the wall
where everyone can see them
unsplash.com/@epicantus?photo=7DCoz36ZGEc

14. Step 3 – Establish a workflow
Keep everyone (including yourself) in the loop

15. @magdazadara
Kick-off and draft
• Gather requirements
• Use pen and paper
• Whiteboard with developers
• Use sticky notes
• Object Oriented UX
• Journey maps
• User goals

16. @magdazadara
Design
• Decide (with developers!) whether to use a grid
• Set your files up neatly
• Nested symbols
• Layer & text styles
• Keep testing and double-checking
• Grooming
• estimations
• pre-planning
• casual chats
• Thoughts about Figma?

17. @magdazadara
Stay sane and use plug-ins
• It’s a massive ecosystem, use it! (wisely)
• My favourites
• Symbol organizer
• Craft Data
• Color Contrast Analyser
• RIP AutoLayout

18. @magdazadara
Spec and hand over
• possibilities
• Zeplin / Sympli / Avocode
• Consider actual documentation (if it makes
sense)
• HTML + CSS

19. Bonus activities
So you can go the extra mile, together!

20. @magdazadara
What else we can do
Things I’ve tried
• Shadow a developer
• Go to a technical talk
• (Try to) understand the latest frameworks and
trends
• Learn some front-end coding (or any coding); not
to do yourself, but to understand how it works
• Make friends with developers!
unsplash.com/@rawpixel?photo=4m66VBr8zns

21. Keep in Touch
BCGDV • bcgdv.com
Dircksenstraße 41, 10178 Berlin