Copacetic Collaboration

Designers and developers working in harmony.

Transcript

1. #SparkboxUnConf
   

   View Slide

2. #SparkboxUnConf
   Your Building Problem
   

   View Slide

3. Copacetic Collaboration
   Designers and developers
   
   
   working in harmony
   Philip Zastrow | Frontend Designer
   

   View Slide

4. Critical Question:
   
   
   What are the criterion and
   how can designers and
   developers come together to
   enact their collective goal?
   

   View Slide

5. Criteria 1
   
   
   Encourage Constant
   
   
   Communication
   The best tool is the most e
   ff
   ective tool.
   

   View Slide

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.
   

   View Slide

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
   

   View Slide

8. Written Explanations
   

   View Slide

9. Keys and Guides
   

   View Slide

10. Decomps
    

    View Slide

11. Criteria 2
    
    
    Ensure Con
    fi
    dent
    Conclusions
    Leave no room for assumptions.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

15. Criteria 3
    
    
    Embrace Creative
    Curiosity
    Experiment and iterate together.
    

    View Slide

16. YOUR BUILDING PROBLEM
    The designer and developer
    relationship and process should
    look more like a dance than a
    shopping list.
    

    View Slide

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.
    

    View Slide

18. Thank You!
    …and happy collaborating!
    

    View Slide