Decreasing friction in the design-to-development handoff

Designers and developers are often separated, both physically and functionally, in today’s work culture. Designers sit in their part of the building, conceptualizing and sketching and doing things with pixels, while developers sit on the other side of the building (or the world in some remote companies), solving problems and writing code.

But what about when they need to cross paths? What about the design-to-development handoff, when those concepts and sketches and pixel-perfect designs need to be translated into HTML and CSS and JavaScript? This can be a problem for some companies, but it doesn’t have to be. Let’s take a look at some ways you can reduce the friction that occurs when it’s time to translate designs into lines of code.

Communicate early and often in the right ways

The most common problem (as possibly the easiest to fix) is a lack of communication between designers and developers. When there’s failure to communicate, the door is left opened for misunderstandings and differing interpretations to creep into the design process. This leads to problems like unnecessary redundant feedback loops between developers and designers and an inability to take advantage of overlapping knowledge and skills.

The best way to minimize the issue here is to bring developers into the design process early and often. Encourage regular discussions, invite developers to client calls, and incorporate their ideas in brainstorm and prototyping sessions. Developers know best what’s possible (and what’s going to take dozens of lines of code instead of hundreds), so make it a point to get feedback from them as often as possible.

It’s also important to have shared common methods for communication. Try using a dedicated channel in Slack or Basecamp so that files and screenshots can be shared with comments. Set guidelines for progress updates (i.e. at the beginning or end of every work day) so that folks know where to look and what to look for.

Related: 4 ways remote designers and developers can collaborate better

Reduce knowledge gaps between parties

There may be instances within a project (or even as an ongoing hurdle) where designers and developers have a lack of understanding regarding what’s involved on the “other side” of the product creation process. Designers may have great ideas that translate into complex coding, and the solution posited by a developer might not adapt into the most user-friendly design.

Make this a non-issue by encouraging both sides to share knowledge with one another. Increased mutual expertise can minimize misunderstandings and encourage more communication among team players. Try implementing a “lunch and learn” series where designers and developers eat lunch together and share short 5-10 minute presentations on basic skills or current trends in their respective fields.

Streamline and systematize BOTH handoff processes

You’ve included developers in the process from the beginning, and you’ve made sure there’s a fair amount of shared knowledge (and respect) between the groups in order to eliminate redundant conversations and troubleshooting. Time for the (first) moment of truth: the designer-to-developer handoff.

First things first: make this process as orderly, organized, and comprehensive as possible. There should be a set way of naming files, labeling elements and layers, and transferring creative files that your teams use every time without fail. This reduces questions and makes at least part of the process much more predictable.

“The most common problem is a lack of communication between designers and developers.”

After the design files are transferred, make it a point to go over the designs with the developers. This allows designers to explain the finer points of those microinteractions while the developer can ask questions straight away, reducing the lag time before coding begins.

But wait! There’s another handoff that your design team need to prepare for: the handoff from developer to your quality assurance team. This is when other issues may arise, like image misalignment or (hopefully) minor discrepancies between the new creation and existing products.

To avoid issues with this stage of the process, use full screen capture and annotation tools to identify variances with specific visual references and accompanying notes. This will help your QA team (or even earlier in the process, your developers) find problems quickly. The quicker problems are found, the quicker they’re fixed, the quicker you ship.

Related: Designing with developers in mind

Working in a comprehensive tool like InVision Studio that incorporates prototyping, animation, and sharing is a great way to prevent confusion when it comes to handoff. Studio is is early access now, so give it a try!