dogs and cats living together... mass hysteria! how designers and developers can communicate,...

Dogs and cats living together…

mass hysteria! How designers and developers can communicate, collaborate, and create their best work together.

Kevin Brooks and Adam GesueroImage Conscious Studios

Intros

Dogs and cats living together…mass hysteria!

Image Conscious Studios has been creating digital experiences for brands for over 12 years.

We believe in open communication among all members of our team.

Collaboration, especially across different departments, allows us to create our best work.


Can’t we all just get along?


For too long, there’s been friction between design and development.

This is based on fundamental misunderstandings between the two disciplines, how they work, and what they’re trying to achieve.

They often view the other side as being at odds with them, rather than on the same team.


Let’s change that dynamic, and build relationships based on

Empathy, Understanding & Trust.



“… the argument ‘designers must code’ (and excel at both disciplines) is becoming increasingly daunting.”

Cameron MollCEO, Authentic Jobs

While designers benefit from having a basic understanding of code, and developers should have an eye for design, we don’t have to master each other’s disciplines.

We simply need to learn how to understand and respect what each other brings to the table, and how our shared collaboration elevates our work beyond what we could do on our own.



Unicorns need not apply.

Design


Development(and vice versa)

Design and development are complimentary disciplines that support and enhance each other’s efforts.

Both are aligned towards the same goals:

Solve our client’s problems.Improving a user’s experience.Create our best work.


We can’t do it alone

Design and Development share a love for creative problem solving.

Design excels at creating elegant solutions to solve client or user challenges.

Development excels at engineering efficient solutions to solve client or user challenges.


Communication is key


There needs to be open lines of communication between design and dev throughout all stages of a project.

Development must be at the table during discovery, strategy, and planning sessions, particularly when clients are present.


Don’t keep developers locked up in the basement.

Developers need to be reviewing design and UX artifacts like wireframes, sitemaps, and design comps.

Encourage internal reviews often. Hangouts, InVision and Slack are all fantastic tools that allow remote teams to communicate on a design when in-person meetings aren’t feasible.


When communicating with designers, educate them. Don’t just tell them something “can’t be done”.

Explain why. They’ll bring this knowledge with them to the next design solution they create, and it will be stronger as a result.


As a front end developer, how can I implement this design in the most efficient way possible?


Send me a JPEG!


As a client-focused team member, that sucks.


Yes We Can!


Sort of.


Send me a JPEG?


Let’s talk.


@supports (background-blend-mode: multiply) { }


Can we make it better?


Yes we can.


Clients win! We win.


Clients win when we all communicate.


There is a difference between technical abilities and technical skills.


Budgets matter.


Tools & Workflows


Regardless of whether your in an agile (or “A”gile), waterfall, or hybrid workflow, look to break cycles into design and development sprints.

Short, focused sprints allow design and dev to collaborate more readily, and fosters an environment of shared responsibility in the outcome.


Don’t wait for the cake to be fully baked before you start asking about the recipe.

DESIGNER

Research & Strategy Design Development

WORKFLOW: THE OLD WAY

DISCOVERY UX IA UI DEVELOPMENT QA LAUNCH

DEVELOPER

DESIGNER


WORKFLOW: THE OLD WAY


DEVELOPER

THE “HAND-OFF”

DESIGNER


WORKFLOW: THE NEW WAY


DEVELOPER

DESIGNER


WORKFLOW: THE NEW WAY


DEVELOPER

LOTS OF CROSS-POLINATINGBETWEEN DEPARTMENTS

Prototyping encourages design and dev to work together to test out solutions quickly, and iterate on them together.


Style Guides are a great way for design to communicate styling to development. They can be worked on in tandem with development to ensure both teams are on the same page.

They also ensure consistency across all UI elements, and minimizes back-tracking in QA stages.



http://atomicdesign.bradfrost.com/

Modular systems like Brad Frost’s Atomic Design breakmassive projects into smaller (“atomic”) artifacts, encouraging

design and development to work in tandem to build out the essential components of a UI.

http://atomicdesign.bradfrost.com/

Sometimes you need clarification of intent.


Developer: What about the open nav on other pages?Designer: You can just use that background.Developer: Do you want to use the actual page’s header?Designer: Is that even possible? Some have video in that space.


Is that even possible?


Let’s build a prototype.


Before acting, make sure you understand the intent of your teammates.



Let’s go make some kick ass work together!


Thank you.

Kevin Brooks@kevinbrooks

Adam Gesuero@icscreative

www.icscreative.com

http://www.icscreative.com