Slide 1

Slide 1 text

#SparkboxUnConf

Slide 2

Slide 2 text

#SparkboxUnConf Your Building Problem

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Written Explanations

Slide 9

Slide 9 text

Keys and Guides

Slide 10

Slide 10 text

Decomps

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

YOUR BUILDING PROBLEM One of the biggest barriers to e ff ective communication and collaboration is misunderstanding due to unmet, unstated, and unknown expectations.

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

Criteria 3 Embrace Creative Curiosity Experiment and iterate together.

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

Thank You! …and happy collaborating!