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?

Hi, I’m Amanda

User Experience Developer

@acacheung

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

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

  • 6,123