Six steps to a successful designer to developer handoff

You’ve spent months on the design of your new website. You’ve been there for every email thread and conference call, reviewing color choices, user experience and content management system (CMS) functionality. The last step is packaging up the design files for your development team to bring the website to life. It’s at this crucial step that a website project’s success is determined.

A successful design to developer handoff extends far beyond a Dropbox link to layered Photoshop (PSD) files. It’s time to take a step back and ensure that your development team is walking into this project with the information they need to create the website promised to your stakeholders. Don’t allow them to make assumptions. We all know the common monicker about what happens when you assume something. Instead, create clear documentation throughout the design process that sets you and your development team up for success. Also, if you’re creating this documentation the day before the handoff, it’s probably too late, and you’ll probably forget something important. Ongoing information gathering and documenting is key during the design process to ensure a smooth transition into development.

Below are six key checkpoints to ensure a successful website development execution after a design handoff. Each project is unique, but utilizing a combination of the tools below will ensure your team creates the desired website once you move into quality assurance and launch.

---

Design files

Depending on how exact you want your breakpoints to be, provide Desktop, Mobile and Tablet design files. It is also helpful to include all default HTML elements such as headings, bullet and numbered lists and block quotes to ensure the content on long-form pages is formatted correctly as real content gets entered.

Ensure web-friendly fonts are in order

Make sure chosen fonts are web-friendly and include pre-purchased license details and files if applicable. Also, convert font icons to outlines in your design files.

Export assets

Export assets such as graphics, icons and photography used in the design into a separate folder for the handoff to ensure they’re exported to your liking and to save time in development.

Document functionality requirements

Clarifying how flat designs are expected to come to life in development is a key communication piece during this handoff. As you and your stakeholders make decisions, or voice preferences for animations, hovers, links, forms, etc., keep a living document that records these decisions as they’re made throughout the design process. This can be done in a spreadsheet, Word document or whatever medium you prefer.

You can either present these notes to your development team during the handoff, or better yet, turn them into an annotated PDF of the designs to make it as clear as possible. This prevents any confusion about the expectations that have been set. Again, if you record these requirements as decisions are made it ensures nothing is forgotten, which can happen if you try to remember everything at the end of the design process.

Document CMS expectations

Similar to the Functionality Requirements, keep a log of the content management system (CMS) expectations as you work through the design process with your stakeholders. Your development team’s default will be to build the CMS specifically for the designs. This is done to ensure the website content editors don’t have so much freedom that they can break your design. The development team could also go down an hours-long rabbit hole guessing what possible options your content editors could want, so to save budget, the development team will usually stick to the hard facts. Do your stakeholders expect color options for the headers, or for a certain page to be built modularly so they can drag and drop content areas? All of these unique expectations need to be notated per template, as well as any options such as multiple colors, image sizes and text/image placements.

Organize 3rd-party logins

There is likely a selection of login details that your development team will need available to them at some stage of the project. The best time to provide that information is at the beginning, saving you from having to dig them up midway through the project. These logins typically include domain name server, hosting, third-party integrations and email subscription accounts. Hand over these sensitive details in whatever manner you are most comfortable with, and trust they’re in safe hands with your development team.

---

Implement these six steps in your design to developer handoff for your next web project, and please buy me a coffee if it does wonders. :)