a better design handoff

The term "design handoff" likely sends a chill down your spine, whether you're a designer or developer. Because we all know that after the designer sends design files to the developer, all kinds of problems can happen.

As differences pop up between the work-in-progress code and the original design, designers and developers both end up doing lots of extra work to make fixes. Designers revise mockups repeatedly, and developers sort through lists of change requests, which distracts from building the core product.

Too often, we blame each other for this. But implementation is a process of translating a design into a real product. And things get lost in translation. That's just natural.

Design handoff doesn't have to be such a slog. Our stale processes and approaches are what make make it difficult.

We don't reserve time for designer-developer collaboration

When designers send over design files, our work is done. Or, at least, that's how many teams treat it.

But every time, designers end up returning to those design files to make adjustments, answer developers' questions, and request changes so that the implementation matches the design more closely.

Developers are often left to interpret the designs without help, which leads to delays and misunderstandings.

The stress of this is compounded when there's no time in the project plan for this back and forth between the designer and developer.

So the first way to alleviate these frustrations is, when planning projects, to reserve time for collaboration. After all, the back-and-forth happens anyway in every project, whether you plan for it or not. Reserving the time can deescalate tensions and gives both designers and developers a chance to get all their concerns answered.

You'll find that when a skilled designer and a skilled developer sit down and work together, the results are amazing. Reserving time for this gives your team the chance to do their best work.

We use the wrong tools

The tools we use during design handoff are not well suited to designer-developer collaboration.

Designers tend to stick to their own design tools, perhaps supplementing with tools that auto-generate design specs. But all of these still require interpretation by the developer—sending them more assets often just makes the problem worse.

Developers on the other hand invite designers to learn git, command line, build tools, etc. But asking designers to become expert-level coders is a tough sell.

A simpler way to collaborate is to work directly in the browser. Designers can make simple edits right in devtools with basic html & css knowledge, then send edits over to developers in a more useful format: code.

By working in the browser, designers can avoid learning git and other advanced coding tools. Basic coding skill is plenty, and this way designers don't have to worry about code quality. Simply demonstrating edits in a useful format moves things forward much more quickly.

Finding new ways to collaborate and handle design implementation serves us all better than trying to force design tools to do something they really aren't fit to do.

A simple way to work on websites together

Here's a simple suggestion: after design handoff, don't use design software.

Don't worry about keeping mockups up to date. Let mockups be what they are: photographs. Moments in time. When we need to capture something new, we can take a new snapshot, but expecting yesterday's photos to match today is ridiculous.

Instead, after handoff, focus on the only real source of truth you have: what your users see. Work on top of the live site to make design tweaks and collaborate during implementation.

This why I built a new tool called Mod&Dot. It's a simple tool for capturing devtools edits and sharing them with your team.

Designers can review work-in-progress implementations and capture simple code edits to share with developers. Developers get a jump start on implementing the edits—without having to interpret design assets or wade through auto-generated specs.

Give it a try. I think you'll find that making room for collaboration and using simple HTML & CSS to communicate revisions will feel like a breath of fresh air. It's finally a way to move past those old design handoff conflicts. Watch the demo here.

Written by Jarrod Drysdale, creator of Mod&Dot

Just Enough Code. Learn just enough code to be dangerously creative. A free eBook from Mod&Dot.

Free eBook

Learn to Code

Code like a designer. Learn faster ways to prototype & explore ideas using basic coding. In a 30-minute read.

Get the Free Ebook