Hassle-free designer-developer collaboration

Mindset shift

Handoff is not a one-time thing, start to think of handoff as a process instead of a one-time thing. And give others the benefit of doubt. Two critical aspects in the collaboration: communication and assets.

Improve your communication with developers

1. Make it direct

It’s critical to talk to developers directly, instead of adding communication layers.

2. Share knowledge

The developer should not just tell you the constraints and why. And it’s critical to explain the rationale behind the design, and guide the developer through. Share knowledge of the product, since as a designer you know the product best (most of the time)

3. Involve dev in some user tests to build rapport and all-around feedback

When to involve developers?

Early but not too early, but there are exceptions: (to involve developers asap)

Naming conventions, Dates and data visualization — date pickers, calendars, timelines, charts (either consult beforehand or be flexible with the developer’s input), E-mails and Maps.

Best practices for file handoff, naming conventions, exporting

It’s good to use as few tools as possible, preferably one. It’s hard to keep design in sync while more than one tool is used(design or handoff)

a). Do the cleaning before the handoff

1. Remove unused layers, group components correctly
2. Name components consistently
3. Name files correctly
4. Add note about the component library

b). Deliver style guide/design system

Tips: for each of the type, good to address the line-height.

c). Images

1. Named correctly
2. Reasonable size (not too big that need to be condensed otherwise too heavy, optimize the images first)
3. Without effects (e.g. do not add shadow to the image which leads to alignment problem)

d). Reusable components

Note different state of reusable components. It is more convenient for both designers and developers

e). Icons

1. SVG wherever possible
2. For raster files, include versions at 2x
3. Without shadows and bounding boxes

4. Keep same size of icons

f). Animations

1. Add prototype or detailed description
2. Exported in JSON if possible(use AE)

g). Copy

Don’t use lorem ipsum!

h). Flows (What happens if I click here?)

Use flowchart (with screen thumbnails), prototypes etc.

i). Inputs info

1. Label
2. Type and format (American, Date format)
3. Placeholder
4. Validations (constrains and error information)

j). Accessibility info

1. Tap target size (elements not too close)
2. Outline on focus elements (which elements are focusable)
3. Alternative text for images if possible

k). Responsive designs

1. Gold standard — mobile, tablet, desktop resolutions
2. Reasonable minimum — two resolutions
3. Always provide informaiton on what changes / is removed (in the mobile)

What designers tend to forget?

1. Validation errors
2. Error pages
3. Alerts
4. Loading states
5. Inputs/buttons/icons etc. states
6. Reset password screens
7. Edge cases
8. Image quality

What annoys developers?

1. Make the gradients outside of the component for it to be recreatable

2. Unclear about opacity. Make sure note about where you used opacity so developer can choose their way of implementation (e.g. use rgba instead of opacity in the children component, the opacity applies to its sub-elements too)

3. Inconsistency

4. Not keep developers updated with changes