ALL THE THINGS

 • Gain useful insight into collaborative design process

 • Use Photoshop, or tool of choice, to establish art direction

 • Use Atomic Design and pattern libraries to build design systems

AN EXAMPLE PROJECT

The goals:

Internal & external team education

• Art direction and aesthetics
• Benefit of building design systems over rigid pages
• Useful collaborative design principles

Project Efficiency

• Cost efficient
• Resource efficient
• Artifact efficient

One design deliverable to rule them all!

Atomic design & pattern libraries

THE TEAM

Analyst

• Requirements Gathering
• Information Architecture
• UX design
• Quality Assurance

• Stakeholder meetings
• Interviews with users
• Questionnaires
• UX design
• Facilitation

Designer

• Designed the last site
• Print collateral
• Aesthetics, typography, and layout
• Comfortable with their tools

• Review assets
• Conduct interviews
• Design comps
• Deal with a ton of revisions

Front-end Developer

• Has an eye for detail
• Pedantic about markup
• Inception rule
• SASS, LESS, SMACS, BEM

• Review comps
• Pure CSS
• Works alongside devs, or after
• Deals with responsive problems
• Mixed feelings about designers

PROJECT MANAGERS & DEVS

We still love you

Lets get designin'

DIRECTION

• 3 different directions
• Revisions
• Combined into a franken-comp
• Even more revisions

COMPS

9-12 WEEKS

WATERFALL

 • Takes a long time

 • Not efficient on several levels

 • Doesn't work anymore

our medium

Content Forward in a Responsive Web Context

CONTENT

IS KING

• People want their information, and they want it now
• Will abandon a site if poor UX
• Multitudes of devices

MOAR COMPS!

MOAR WHISKEY?

DESIGN SYSTEMS

ATOMIC DESIGN

COLLABORATIVE

DESIGN

DESIGN SYSTEMS

• No more designing comps, or rigid 'pages'
• Component-driven design - reuse & extendability
• Context unaware
• Art direction and visual language is the common thread
• Colors & typography uphold the brand

ATOMIC DESIGN

PATTERN LAB

• Collection of tools to help create atomic design systems
• Essentially a component library
• Build and present
• Includes: Viewport resizer, other goodies
• Static site generator

COLLABORATIVE

DESIGN

• Transparent, iterative work, amongst multi-disciplinary teams that create value to solve a shared problem

COLLABORATIVE DESIGN

PRINCIPLES

• Designing meetings to reach a decision
• Neutral facilitation with domain knowledge
• Divergent to convergent thinking
• Iterative experimentation - fail better

LETS DO IT!

• Start strong with a full team
• Parallel work amongst teams
• Operate with agility
• Diverge and converge frequently
• Replace “sign off” with “go on.” - Dan Mall

ARTIFACTS

DISCUSS

DISCARD

MOVE FORWARD

How does

Photoshop

Fit in?

How does

Illustrator

Fit in?

How does

Indesign

Fit in?

Hold The Phone

• Designers are needed more than ever
• We need empathy
• Creative ways to use preferred tools

ART DIRECTION

DESIGN ARTIFACTS

• Visual Inventory
• Typography Sets
• Style Tiles
• Element Collages

Visual Inventory

Created by Dan Mall

• Asks questions on how a site should feel
• Concept, tone, typography, color
• Very quick to assemble

Choosing

TYPEFACES

 • Key way of displaying brand identity

 • Huge part of responsive design

 • Ideal for divergent to convergent working

 • Use programs like Photoshop, or utilize tools like Typecast.com

Style Tiles

Created by Samantha Warren

• Fonts, colors and interface elements that communicate the essence of a visual brand for the web
• Helps to form a common visual language
• Easy to iterate

Let's collaborate!

Design Together

• Each designer explores a direction
• Come together to combine to one

The next step in the design process

GET IN THE BROWSER!

• Start before Art Direction is finished
• Build co-designed components, layouts
• Combine the two, build more
• Iterate, iterate, iterate

Working together in harmony

Pull Back The Curtain

Parallel Work

DESIGNING

AND DECIDING

In the browser

• Establish your own process for working together
• Communicate constantly
• Tiny artifacts when necessary
• Designers and Front-enders work as one
• Iterate, iterate, iterate

RECAP

 • Collaborative design process in a real world project

 • Photoshop is useful, and designers are awesome

 • Break down the pieces, and build up components to make design systems

THANK YOU

• patternlab.io
• typecast.com
• danielmall.com
• kevinmhoffman.com
• Slides: rasskull.github.io/co-design-rescue/
• Follow me on Twitter - @rasskull