Design Handoff: Best Practices for Developers and Designers

Introduction

Communication between developers and designers is often more complicated than it should be. Without the proper structure, both parties eventually run into some unnecessary communication issues. 

If you’re a developer, you might’ve found that designers sometimes lack an established structure. Unlike devs, they often lack the repository tools for communicating and updating like Gitflow.

Luckily, a design handoff is going to fix all of these issues.

In this article, we’ll take a closer look at what designers and developers can do to establish a proper structure that will make the lives of both parties much, much easier.

Why Design Handoff Process Is Important?

Imagine you’re a NASA engineer trying to send an aircraft to outer space.

You have all the tools and skills at your disposal. You’ve done all the calculations and know exactly what your team is going to need to make it happen.

On this project, you’re set on working with an outside team. You have a feeling that perhaps it would be worthwhile to ask them what measurement system they use before you commit your time to calculate different variables.

You’re a rather weak communicator and prefer to stick to what you know best, which is calculation. You decide that the other team must be using the same measurement system as you. It is the global norm in the sciences after all.

You decide not to ask any obvious questions to save time and move on with your work. Also, you don’t want to make a fool out of yourself for asking silly questions.

You finish your part and pass your calculations to the other team.

It’s September 30, 1999, and your team is making headlines all over the world.

Your team becomes the world’s number one laughing stock. And you’re probably fired. And you’ve definitely made a fool out of yourself.

Yeah, that’s why the handoff process is pretty important.

How to Handoff Design to Developers Properly

A design handoff is a process that involves a close collaboration of both the designers and developers. It consists of multiple phases, each of which challenges you with different necessary steps.

Part I: Before Handoff

This is where designer and developer teams get together and discuss their needs and requirements for the project. This phase is key. This is where both teams establish the flow of all future collaboration. Best practices include:

• being open to new ideas
• communicating any potential misunderstandings early
• sharing clear and direct feedback
• creating a friendly space for communication – there are no stupid questions

The Discovery Phase

The discovery phase is all about setting boundaries. You find out what possible technical and skill-related constraints are. Both teams establish what they can and cannot do making both the design process and the development process clearer.

Designers and Developers Meeting

If you think meetings are time-consuming, just wait until you need to get back to the drawing board and start anew for the second time. The first meeting is a must. It helps both sides establish a healthy environment that promotes information sharing.

Establishing Communication

Effective communication is absolutely necessary if you want to achieve good results. Both parties should be able to openly communicate about the potential issues and ways for solving them.

Making sure to effectively communicate whenever something is not completely clear is a good start. Developers should understand that designers may lack some programming prowess and should always try to communicate in the simplest terms. Similarly, designers should be aware that as intuitive as the design might seem to them, developers speak a completely different language.

During the handoff process, both parties should strive to establish a common language. But more on that soon.

All in all, open-mindedness and willingness to help one another is a good start.

Including Devs in Client Meetings

Yea, if you’re like most developers, you probably just want to code and be left alone. However, to fully understand the product you’re creating, you’ll have to get out of your comfort zone and attend a meeting or two.

You’ll not only be able to ask some functional questions and better understand the product yourself, but you’ll also be able to share a more technical point of view, which is always extremely valuable.

The Planning Phase

After the initial phase, it’s time to talk business. In this phase of the handoff process, both design and development teams use their knowledge, experience, and advanced communication skills to plan a proper flow.

Before diving too deep and realizing the final idea, make sure to take some time and create a checklist for your project. Here are a few universal criteria you might want to incorporate:

• Both teams take part in sprint planning
• Use the developers’ knowledge to estimate user story build time
• Developers should participate in designers’ sprints
• Always plan at least one sprint ahead of the development process
• Select the right design framework for the project
• Establish component naming conventions

The Prototyping Phase

Communication is key when designing prototypes. Creative ideas are all great, but in order for everything to be functional, developers should get involved in prototyping early.

Designers can get lost in focusing too much on the user interface aspect, not fully understanding the user experience in its front-end version. Developers can offer extremely valuable advice regarding how a given design should function. As designers, once you know how different features behave, you can create better quality and more functional mockups.

There are plenty of good reasons why developers should take an active part in the initial design phases. For example, they can help designers understand how different designs may behave with different screen sizes.

Developers can also be a great help during user testing sessions. Using their insight and knowledge they can come up with unique functional ideas that can prove key in the later stage of the project.

All in all, by taking an active part in the prototyping phase, developers can effectively guide designers and overcome many technical challenges right at the beginning. In the end, it’s an investment in the future, as developers will receive a more complete and easy-to-work-with handoff.

From Design to Development – The Design Handoff Process Step by Step

With planning and prototyping out of the way, it’s time to establish best practices when it comes to creating the actual handoff.

Below, you’re going to find some of the key elements you want to take into the equation while preparing a handoff. However, keep in mind that both teams can and should bring new ideas to the table.

Treat the included guide as a backbone. Don’t be afraid of adding new features and ideas into the mix. In the end, each team and each project are unique.

Design Handoff Tools – The Best Places for Designers and Developers to Communicate

The industry norms are changing every few years. There are plenty of design tools to work with, but in the end, there are only a couple that is used throughout the industry. Figma, Adobe XD, and Sketch allow you to use vectors and raster images.

They are the go-to software when it comes to design, especially for projects with bigger pixel densities.

My personal favorite is Figma, which has quickly become the industry standard. It’s extremely intuitive and allows for a very fluid collaboration between designers and developers.

That said, Adobe XD and Sketch are still widely used across the industry so don’t cross these tools out yet.

The UI Design Phase – What to Keep In Mind

Ideally, the design phase should include further collaboration between designers and developers. You want to create documentation for each feature you design. To do that effectively, you need to have a common language for communicating between the teams.

Design Handoff – Terminology

Keeping consistency across the project is extremely important. Make sure to establish terminology guidelines before you start. General rules to keep in mind:

• Lowercase only
• No spaces – use hyphens
• Latin characters only
• Keep names short (1-3 words)
• Apply the same rules to naming folders

Consider establishing a naming terminology for different processes. Developers can help designers establish naming conventions by preparing a list of terms they believe could help designers better communicate their ideas. For example, hover for when the mouse indicator is over the element, active for when the element is selected, etc.

Design Handoff – Image Optimization

• Size of the assets – You generally want to avoid sending clunky files to developers. Before you pass on the handoff you’re better off optimizing the images using image compressors like Kraken or Tinypng.
• Use the SVG file format – The SVG format allows you to create assets that can match any pixel density version. They also weigh less and can be compressed by gzip server-side. Remember, that if you don’t convert SVG text to curves, the text objects in your designs are going to return to the default font. Also, if you’re a designer, don’t waste your time preparing sprites as developers can later do it much more efficiently.
• Favicons – create separate favicon files for mobile and desktop browsers & devices. Set the desktop favicon size to 32×32 and mobile to 180×180. It’s always a good practice to include file sizes within names, so naming your files favicon32x32.png and favicon180x180.png is a good start. Modern browsers can easily convert your icons to the right size, so in order to keep it clean, you can stick to just the two sizes.
• Establish comprehension levels for non-static images – it’s all about the quality to file size ratio. Designers and developers should reach the middle ground before the start of the project.

Design Responsiveness

As a designer, you want to deliver a handoff that is responsive and presents how elements are going to look in various dimensions and using different transitions. To achieve that you need relative values.

Use basic breakpoints and test your design on all device views before passing the handoff to the development team.

Test on various-sized screens, especially the bigger ones. This step is often omitted in the design phase, which results in the hero section image stretching to full width, and preparing styles for such images can be really irksome.

Make sure you make good use of the existing materials. Lots of designers waste a lot of time trying to come up with creative solutions, while all they need to do is accommodate the existing libraries for use in the project. And that’s what libraries are for!

Ideally, you also want to create clickable prototypes and animations to communicate your ideas.

Preparing a UI Kit For The Project

In order to keep everything in one place, you’re going to have to create a library for all of the assets.

Having a UI Kit that you can share across teams is incredibly helpful as it allows for improved collaboration. Whenever you or one of your friends makes some changes, you’re going to be automatically up-to-date.

Collaboration Continues

When creating a UI Kit make sure there are some developers involved in the process. They should also be able to review the applicability of the assets included in the kit. Designers should ask for collaboration. The goal is to achieve assets that can be easily transferred to the developer team in a form of a handoff. And who knows better what they want to receive than the developers themselves?

Some of the things you want to include when creating a UI Kit:

• Texts & typography – line length, line height, font family, headers, footers, paragraph spacing, alignment, and more. Make sure to understand these concepts and discuss good practices with your teammates both in the design and development teams. Many designers might not be aware of concepts like how browsers render elements and how line height affects them, so make sure to mention them.
• Colors & style guidelines – this goes without saying – a handoff should include clear color and style guidelines accompanied by code snippets. This might be obvious, but obvious things are often omitted. Developers should make sure to communicate what they need clearly to the designers. Also, don’t overdo it with colors. You’re not going to need 50 shades of gray, each of which will eventually be used just once for a single component.
• Components (navigation bars, buttons, charts, etc.) – all components should include code snippets. In the ideal world, they should also include animations and interactions that showcase their functionality. This might be more time-consuming, however, your developer friends will greatly benefit from this.
• States – It’s always best to communicate through animations and interactions, but it’s usually tricky to find enough time for these. Like with everything else, aim to establish clear naming conventions. Check this article if you’re looking to learn more about states.
• Loaders – Another important thing is to include loaders. You want to include at least two types of loaders: those that appear when downloading data, and those that appear when the page is loading. 

Part II: Throughout the Handoff Process

This is the stage when you double-check everything you’ve done so far. You probably want to collaborate with other designers and developers to make sure everything is as it should be.

A well-prepared handoff is as important as any other part of the project. So, in order to keep everything in order, designers can prepare a checklist that they can follow.

Before passing on the handoff, make sure to:

• Go through the entire project & documentation.
• Delete unused files, layers, and guides before passing on the handoff.
• Include clear-cut and understandable comments for developers.
• Name all layers, artboards, and files according to the previously established naming conventions.
• Include all relevant assets (fonts, images, etc.) in the subfolders of the main project.
• Include code snippets next to elements

These are some of the core items you might want to have on your checklist. Designers and developers should collaborate in creating a comprehensive checklist for each project.

Part III: After Handoff

Quality Assurance

Once the handoff lands in the hands of developers, it’s important for designers to take part in the quality assurance (QA) process of the final product. It’s a perfect learning opportunity for both parties to see how things work on both ends.

The QA is where the accuracy of the build is tested through a post-implementation audit of each build. This is where you look at the project log and measure the initial goals of the project & the goals achieved, against the plan, budget, deadlines, and user satisfaction.

Discussion on What Went Well & What Could Be Improved

Finally, find time for a discussion.

Designers and developers should go ahead and make their lists of what went right, what went wrong, and what could have been done differently.

Talk is cheap so use case descriptions, link your comments to UI kits, code repositories, etc. For example, when you’re giving feedback about a particular slider or a button – include links that lead to these components within the UI kits. Precisely point to what went wrong and how it could be improved.

Summary – It Only Gets Easier

At first, preparing a quality handoff can be a painstaking process. However, no matter how you look at it, it’s also a great learning opportunity for both designers and developers.

Once you’ve established a solid handoff process, each consecutive handoff will be a walk in the park. It’s also something every team member will be able to use in their future projects.

Sign up for our newsletter and receive more resources for improving your workflow.