Copacetic Collaboration

Designers and developers working in harmony.

Transcript

1. #SparkboxUnConf
2. #SparkboxUnConf Your Building Problem
3. Copacetic Collaboration Designers and developers working in harmony Philip Zastrow | Frontend Designer
4. Critical Question: What are the criterion and how can designers and developers come together to enact their collective goal?
5. Criteria 1 Encourage Constant Communication The best tool is the most e ff ective tool.
6. YOUR BUILDING PROBLEM E ff ective communication is rooted in relationships between people, not in tools or methods, and it requires a regular dialogue between parties.
7. YOUR GETTING STARTED PROBLEM Ways to communicate in dialogue Written explanations of expected behavior and interaction ‣ Leave room for feedback Demos and decomps Pair design and development ‣ Video calls and screen sharing ‣ Use the browser dev tools to tweak and adjust styles Keys and guides ‣ Added layers and artboards to guide and explain the comps Prototypes ‣ Visual: Figma, Keynote, After E ff ects, et al ‣ Code: CodePen, Web fl ow, et al
8. Written Explanations
9. Keys and Guides
10. Decomps
11. Criteria 2 Ensure Con fi dent Conclusions Leave no room for assumptions.
12. YOUR BUILDING PROBLEM One of the biggest barriers to e ff ective communication and collaboration is misunderstanding due to unmet, unstated, and unknown expectations.
13. YOUR GETTING STARTED PROBLEM Opportunities and ways to encourage a culture of understanding between your designers and developers. Action Items and Goals ‣ Make a list that is attainable and visible to the whole team. Repeat Back Expectations ‣ Designers repeat back to developers what they understand the devs need and vice versa. Retrospectives ‣ Regular checks for how things are going and what can be improved. Third-Party Helpers ‣ Get help when there are clear communication breakdowns.
14. Retro Prime Directive Regardless of what we discover, we understand and truly believe that everyone did the best job they could, given what they knew at the time, their skills and abilities, the resources available, and the situation at hand.
15. Criteria 3 Embrace Creative Curiosity Experiment and iterate together.
16. YOUR BUILDING PROBLEM The designer and developer relationship and process should look more like a dance than a shopping list.
17. YOUR GETTING STARTED PROBLEM Ways to spark creativity amongst your team and between designers and developers. Experimentation ‣ Work through di ff erent ideas both in design tools and code editors and iterate on the ideas. Group Improvisation ‣ Work with freedom to try new things and to push limits. ‣ See Ben’s article on The Foundry. Share What You Learn ‣ Team and project demos. ‣ Get feedback and answer questions.
18. Thank You! …and happy collaborating!