How to organize your design files for the perfect developer handoff

The designer-developer handoff is a major milestone for every web development project. And more often than not, it is problematic.

From a lack of communication between teams, to misunderstandings about the design’s intent, this transition is known to cause a lot of unnecessary stress on the entire team.

The good news is that this is a totally fixable problem. Here’s how you do it.

1. Invite the developer into the design process

Creating the right type of relationships within a project starts on Day 1. It’s amazing how often a project is designed in isolation from a developer and then just tossed “over the wall.” Bring the developer into project discussions from the start so that he/she can sniff out potential issues with feasibility and budget. The truth is, determining how hard something is to develop is not a straightforward process. Sometimes, that crazy interaction element you saw elsewhere is part of an open source library that can be included without struggle. Other times, something that seems so simple needs to be built from scratch. Instead of guessing, allow the developer to research potential functionality while it’s still just an idea.

Furthermore, when a developer is involved early on, he/she can develop and start playing with design elements in the browser while the design is created. This feedback loop will give both disciplines more flexibility and brain power to uncover something that truly works.

2. Use the right tools

It’s no longer ok to design websites in tools that offer “web compatibility.” In order to be efficient, use tools that cater to web design specifically. Tools such as Adobe Illustrator or InDesign are where many designers feel most comfortable, but they are not meant to create web user interfaces. Don’t give files to a developer in these formats.

Instead use Adobe Photoshop or Sketch (developers will love you for using the latter).

3. Practice good file management

Once you get into the right kind of software best practices are a big issue. Decoding someone else’s design filing system is no fun. Creating files, using common techniques and file management will help make the design-development language barrier easier to cross.

Since most agencies are still working with Photoshop-based designs, it’s important to use nondestructive techniques, such as layer styles. (Nondestructive file practices allow you to make changes without altering the original information or layer.)

• Create layer masks to make it easy to edit or transform shapes and masks independently. (Here’s a tutorial if you need it.)
• Import vector elements as smart objects so the attributes of the original file are maintained. (Here’s how to do it.)

4. Use web design addons

Web design addons for Photoshop and Sketch can enhance functionality and make the design-development process even smoother. There are an almost limitless number of addons to choose from, here are a couple we recommend.

For Photoshop:

• Duplllicator: Clone a layer or group and move it. (Great for making copies of small elements or buttons.)
• GuideGuide: This little tool make it easier to use guides and takes some of the awkwardness out of the process.
• Perspective Mockups: This tool allows you to change the perspective and see a Photoshop (flat) design as it would inside an actual interface.
• PSD Cleaner: If your file management is lacking, this tool can clean up your files before handoff.

For Sketch:

• Dynamic Button: Create automatic wraps and styles for buttons that change with content changes.
• Sketch Measure: This tool turns your design into a style guide in a quick and manageable way.
• Sketch Palettes: Color palette manager that lets you save and load colors.
• Sketch Toolbox: If you plan to download plugins for Sketch, this management tool is a necessity.

5. Develop and use a grid

There are a lot of different types of grids out there. The grid is the common language that will help the design and developer communicate how space, perspective and aspect ratios work and appear.

Start with a grid overlay – here’s a primer on different types from Tuts+ — and use it. For everything.

6. Organize files

One of the most important parts of the handoff is the ability for the developer to understand the intent of the designer. Good file management goes a long way here.

Organize your folder structure into logical subfolders and layers with descriptive names. (Folder 1, Layer 1 is not helpful. Label according to what is contained therein, such as Home Button.) Consider the HTML structure when grouping files; this helps make the handoff more logical.

Name every single layer.

Color code or add prefixes to layer names and folders to insinuate interactivity, such as hover states. This visual cue is really helpful for developers because with hundreds or more layers to sift through it can be easy to miss something (particularly hidden layers). Have a conversation with the developer so that he or she understands your color- or text-coding meanings.

Delete unused layers.

7. Prepare handoff elements

If you think you can just give the developer a PSD file and move on, you are dead wrong. Every image, illustration, font, color swatch and logo needs to be handoff-ready as well. Without these assets, the developer will be reaching back out sooner or later..

Include all high-resolution image files individually, and include them at a resolution that is 3x what you’d expect them to be used at.

Include fonts in the handoff files. Although you can technically use any font you have a web usage licence for, it’s important to recognize that fonts are a large file type that needs to be loaded along with everything else. Instead, consider using a universal web-based tool such as Adobe Typekit or Google Fonts.  Between Google Fonts and Typekit, you have hundreds of high quality fonts to choose from.

Include a separate document with all approved copy.. A text file makes it easy to go back and find certain text elements and copy and paste if needed.

Make a PDF proof for the developer. This provides something the developer can print, use to make notes and refer to visually throughout the process. The proof also helps to ensure that the developer sees everything you find important in the design. (Feel free to make notes on it as well.)

Host the files in an accessible location. While you can email everything to the developer, files need to be in a public location so that every member of the team can access anything they need at any time during the process. Dropbox and/or Google Drive are perfect solutions that allow you to pass along access permissions to all members of the team.

Use this guide as a checklist to ensure that the designer-developer handoff is as seamless as possible. While the process is historically challenging, it does not have to be.