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

Dogs and cats living together…
mass hysteria!
How designers and developers can communicate,
collaborate, and create their best work together.
Kevin Brooks and Adam Gesuero
Image 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 Moll
CEO, Authentic Jobs

While designers beneﬁt 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.

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 efﬁcient 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 efﬁcient 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 workﬂow, 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-POLINATING
BETWEEN 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 break
massive projects into smaller (“atomic”) artifacts, encouraging
design and development to work in tandem to build out the essential
components of a UI.

Sometimes you need clariﬁcation 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

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

Recommended

Recommended

More Related Content

Similar to Dogs and cats living together... mass hysteria! How designers and developers can communicate, collaborate, and create their best work together.

Similar to Dogs and cats living together... mass hysteria! How designers and developers can communicate, collaborate, and create their best work together. (20)

Recently uploaded

Recently uploaded (20)

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