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