Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

From Design to Development

After designers finish the design process, it is not yet the time to call it a day. After all, what designers did is the mockup of what a digital product would eventually be. Designers would need to collaborate with developers to make the product actually come to life.

That’s where design handoff comes in.

Design handoff is a point in the product development process where developers implement the finished design. In order for a handoff to be successful, a good designer-developer collaboration is vital.

But more often than not this phase doesn’t go as smoothly as it should. Let’s discuss why it happens and how to prevent handoff failure.

What are the underlying causes behind handoff failure?

Bad designer-developer communication

Good communication is key in pretty much any relationship, so it makes sense that it’s a requirement for a smooth design-to-dev handoff.

Communication breakdowns can result in all kinds of issues and misunderstandings—even in different interpretations of the same goals, which can lead to confusing or downright bad UX. And no product team has time for that.

Common problems caused by a bad designer-developer communication can include:

  • Unnecessary, multiple feedback loops between designers and developers;
  • Unexpected quality assurance issues, or QA issues that are more time-consuming than anticipated;
  • Inability to leverage overlapping skills
  • Inability to properly take advantage of new tools that would likely make collaboration easier.

The difference between designers and developers

In general, designers and developers come from different backgrounds, have different skill sets and interests, and often even think about the same challenges very differently.

That’s not a bad thing—we need both pros and perspectives to help bring a viable product to life. But if you have a team of designers and developers who aren’t interested in each other’s craft, you’ll experience a knowledge gap that can lead to friction.

Lacking a design system

Without a design system, designers don’t have clear parameters that constrain their work. They might get too creative and create inconsistencies that lead to bad user experiences and frustration for developers. All of this hampers the handoff process.

Perfecting your design-to-development handoff

Now that we understand some of the common challenges, let’s explore some ways to mitigate them.

Communicate early and often—and in the right ways

Failure to communicate is often one of the biggest causes behind an unsuccessful handoff. By communicating early and often, we can easily minimize these issues.

Teams should bring developers into the design process early, encourage regular discussions, and incorporate the developers’ ideas into brainstorming and prototyping sessions.

Getting feedback from developers is vital because, after all, they are the ones who know best what is possible to implement and what is not.

Speaking the same language

Apart from communicating often, it is essential that designers and developers communicate in the right way. This means speaking the same language and getting on the same page throughout the process.

Even if you have several capable mediators, the designers and developers should still communicate and collaborate directly to ensure the best results. Within modern product teams jargon can still be really role-specific, so teams and individuals should practice communicating with each other in the simplest, most universal terms possible.

Designers, be aware that not everyone knows what you mean when you talk about moodboards, bleeds, kerning, orphans, or opacity. Devs, eyes may go wide or glaze over completely at the mention of widgets, crawling, WYSIWYG, cache, or API.

Reduce knowledge gaps between parties

People are often so focused on their part of the job that they don’t pay much attention to what other people do. This may lead to a lack of understanding between different groups working on the same project.

Minimizing the knowledge gaps between designers and developers leads to better results.

For example, designers may have great ideas that translate into complex coding, and the solution offered by a developer might not adapt into the most user-friendly design. It’s good to get those conversations rolling early to decrease the chance of an unexpected, unwelcome surprise later on.

Get developers involved early

A common mistake that teams make is waiting for the designers to do their thing first and then passing the product design to the developers. Not only can this be confusing, but it’s also a bit condescending (“Here you go, I’m done, bye!”).

In order to make the handoff more successful, we would advise bringing the developers in early with these steps:

  • Including developers in conference calls with clients;
  • Seeking insight from developers on how design elements would likely translate to a web application;
  • Running initial design ideas past developers, so any potential issues with code can be identified when it is easier to make adjustments.

Mix things up with your teams

Instead of letting everyone do their own thing, put everyone together at least once in a while. Encouraging your whole team to have lunch together is a significant step towards spontaneous idea sharing.

Additionally, if physically possible, consider putting the team members working on the same function together in the same room.

If you have designers and developers working in different locations, set up virtual meetings from time to time and let them discuss their work progress. It’s amazing what a little human interaction can do for your work environment—and your product outcomes.

Streamline communication efforts

One of the reasons why some messages get missed and some team members get unintentionally left out of the loop is the existence of multiple communication channels. It’s happened to the best teams, and is often a challenge for remote teams, especially those who have or are scaling rapidly.

Issues of this sort can easily be avoided by:

  • Having a dedicated channel with all the relevant parties invited;
  • Establishing guidelines for communication (e.g., email updates must be shared with everyone at the beginning or the end of each workday, updates should be shared daily in-channel using the @here command, etc.);
  • Using Google Drive, Dropbox, or similar tools to share info, shared assets, etc.;
  • Setting up regular group meetings with all the team members throughout the project;
  • When in doubt, get on a call.

Be prepared with the developer handoff

Sometimes, at this point, new issues can surface. For example, having a design that differs from the page requires additional adjustments from both the designers and the developers.

To minimize potential problems with the handoff, you can use full-page screen captures and add notes to the designs. There are many plugins available to create screencaptures. For adding notes to the designs, Sketch is one of the most useful tools, but there are other apps that you could try as well. Figma, InVision, Adobe, Marvel (Mason… )…are all there to help you communicate clearly and easily. Do your research into the tool that will most comprehensively meet your team’s needs before jumping in, because every tool has a learning curve and will take time to master.

Provide design files and all necessary assets

A part of each designer’s responsibility is to set the developers up for success.

One of the first things that can help you achieve that is by providing the developers with all the necessary design files and assets. Go back to your plans: did you agree to do it all via Dropbox, Google Drive, or some other tool? Communicate where those assets live and keep the lines of communication open to address any missing pieces, questions, or concerns.

Exchange info on trends

Both designers and developers have to follow the newest trends in order to create a product that is appealing to users.

Sharing info on the latest trends is very useful, and you can encourage both your designers and developers to do it by sharing any interesting articles or information on new developments and their implementation methods.

Always encourage the exchange of new ideas and insights on many different levels, from sharing articles and news to discussing them in the same physical space.

Have a handoff meeting

Having a handoff meeting is one of the most effective ways to execute a proper handoff between the design and development teams. It’s a great way to get everything out in the ether, to address burning questions, and to get the whole team excited and motivated for the work ahead.

Hash out any quirks and questions from both sides, and prepare for what’s to come in the development, QA, and launch phases. Set clear timelines and expectations, naming the specific individuals tasked with ensuring each phase makes it across the finish line.

Capitalize on knowledge overlaps

As mentioned previously, knowledge gaps can often cause unexpected issues down the road. For example, some designers might have great ideas, but due to their lack of coding knowledge, those ideas might turn out to be nearly impossible to execute.

On the other hand, the developers may not be aware that just because something is technically possible, it does not necessarily translate into a good UX.

By boosting the knowledge overlaps, you can quickly minimize the number of issues caused by the lack of understanding of what is happening on the “other side” of product creation.

Consider encouraging a mutual understanding of basic skills and concepts. For example, designers can learn the basics of coding to better understand why some designs cannot be translated into functional code. At the same time, developers can learn more about design and how different design elements are used.

Scroll to Top