Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Copacetic Collaboration

693de2ed24f77254be781fc44c757363?s=47 Sparkbox
March 25, 2021

Copacetic Collaboration

Designers and developers working in harmony.

693de2ed24f77254be781fc44c757363?s=128

Sparkbox

March 25, 2021
Tweet

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!