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