O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

UX Camp Europe 17 – Teamwork

701 visualizações

Publicada em

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

Publicada em: Design
  • Login to see the comments

UX Camp Europe 17 – Teamwork

  1. 1. Teamwork SAT JUN 5 17 What I have learned about front-end collaboration
  2. 2. Before you start The foundations of good teamwork
  3. 3. We all want to build great products A SHARED GOAL
  4. 4. Do I think designers should know about code? – Yes. Do I think designers should make money coding? – No. T-SHAPES
  5. 5. See foundation #1 ASSUME BEST INTENTIONS
  6. 6. Step 1 – Talk Because sharing is caring!
  7. 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. 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. 9. Step 2 – Get your act together No more design_finalfinalv2.psd
  10. 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
  11. 11. @magdazadara Conflict resolution • Merge work done by different designers • Hand pick which symbol/icon/layout you want to keep • Trace back decisions
  12. 12. @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
  13. 13. Step 3 – Establish a workflow Keep everyone (including yourself) in the loop
  14. 14. @magdazadara Kick-off and draft • Gather requirements • Use pen and paper • Whiteboard with developers • Use sticky notes • Object Oriented UX • Journey maps • User goals
  15. 15. @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?
  16. 16. @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
  17. 17. @magdazadara Spec and hand over • possibilities • Zeplin / Sympli / Avocode • Consider actual documentation (if it makes sense) • HTML + CSS
  18. 18. Bonus activities So you can go the extra mile, together!
  19. 19. @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
  20. 20. Keep in Touch BCGDV • bcgdv.com Dircksenstraße 41, 10178 Berlin

×