Bridging the gap
between design & development
Designers are from Mars
Developers are from Venus
Designers are from Mars
Developers are from Venus
Why should we care?
Design
UX Development
Engineering
?
A bit about me
My background
- Fine arts
- Graphic design
- Web design
- UX development
- Ruby on Rails
How can designers
help developers?
How can developers
help designers?
How we can help each other
A case study
How we differ
Design considerations VERSUS development considerations
Design considerations
(specific to data viz)
- Context
- Form
- Interaction
- Presentation
- Visual design
Context (interactive web)
Networks
Maps
Timelines
Trees
Graphs
Visualization form
Interaction design
Presentation techniques
Development considerations
- Performance
- Accessibility
- Responsive web design
- Maintainability
“Designers are in a unique position to impact overall page load time and perceived performance. The decisions that are made during the design process have an enormous impact on the end result of a site.”
SVG animation
Accessibility
Visual
Motor
Auditory
Cognitive
Accessible table alternative
Responsive web design
Maintainability
- Number of colors
- Repeatable components
- Ease of implementation
- Style guide!
Code bloat
Different agendas?
Not so different!
Different agendas?
Both want to better
user experience
How we differ
A case study
How we can help each other
- Clean Sketch / Photoshop files
- Organized files / layers
- The problem with fake content
What designers
can do checklist
• Test for different possibilities
But, what I'm most interested in is...
THE CONVERSATION!
- Demystify!
- Are there constraints? (ex: ti.to)
- Share knowledge (suggestions, technical know-how)
Communication early & often
Designer
Developer
Discovery & Design
Development
Start of project / feature
Check-ins
“Handoff”
Quality Assurance
Points of collaboration
- During discovery and design
- Formally meet ~once a week
- Design heavy, dev light
Check-ins
Sketches
Wireframes
- CodePens are good
for showing demos - Especially animations
- Make our own?
Demos
Prototype to test
Scope
Cost
Time
Quality
- Design near completion
- When does it happen?
- When the most overlap happens
- Meet often
- Design heavy, dev heavy
“Handoff”
Get a live walkthrough
Thorough review of comps
- Patterns? Reusable components?
- Anything missing (interactive states)?
- Anything unclear / undocumented?
Annotated designs
Resist coding for at least
the first two days
Try to ask all questions
at this time
Additional design
at the beginning
- During dev phase
-
Happens after each feature
is completed (~once a week) - Dev heavy, design light
In-browser / device demo
Quality Assurance
What are some benefits?
- Less wasted work
- Less misunderstanding
- A collaborative effort
- Happier team
- Higher quality
Designer
Developer
Discovery & Design
Development
Start of project / feature
Check-ins
“Handoff”
Quality Assurance
Can it be modular?
Designer
Developer
Discovery & Design
Development
Start of project / feature
Check-ins
“Handoff”
Quality Assurance
Can it be modular?
Designer
Developer
Discovery & Design
Development
Start of project / feature
Check-ins
“Handoff”
Quality Assurance
Can it be modular?
How we differ
How we can help each other
A case study
Some documentation
Thorough review
How we differ
How we can help each other
A case study
- Design and development influence and depend on
each other - Collaborate to arrive at better user experiences
Recap
Resources
Thank you!
@acacheung
Bridging the gap between design and development
By Amanda Cheung
Bridging the gap between design and development
Boston CSS March 2016 Meetup, Cascade BOS May 2016 Meetup, QCON New York 2016, Front End Design Conf 2016, Data Visualization Camp 2016, GothamSass July 2016 Meetup
