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

Copacetic Collaboration

Sparkbox
March 25, 2021

Copacetic Collaboration

Designers and developers working in harmony.

Sparkbox

March 25, 2021
Tweet

More Decks by Sparkbox

Other Decks in Design

Transcript

  1. #SparkboxUnConf

    View full-size slide

  2. #SparkboxUnConf
    Your Building Problem

    View full-size slide

  3. Copacetic Collaboration
    Designers and developers


    working in harmony
    Philip Zastrow | Frontend Designer

    View full-size slide

  4. Critical Question:


    What are the criterion and
    how can designers and
    developers come together to
    enact their collective goal?

    View full-size slide

  5. Criteria 1


    Encourage Constant


    Communication
    The best tool is the most e
    ff
    ective tool.

    View full-size 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 full-size 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 full-size slide

  8. Written Explanations

    View full-size slide

  9. Keys and Guides

    View full-size slide

  10. Criteria 2


    Ensure Con
    fi
    dent
    Conclusions
    Leave no room for assumptions.

    View full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

  13. 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 full-size slide

  14. Criteria 3


    Embrace Creative
    Curiosity
    Experiment and iterate together.

    View full-size slide

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

    View full-size slide

  16. 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 full-size slide

  17. Thank You!
    …and happy collaborating!

    View full-size slide