One of the most critical stages in the process of creating a website, feature or app is the handoff from design to development. If the design team fails to prepare for the handoff correctly, much of the beauty and efficiency of their design can get lost in translation. So let’s take a good look at a few best practices to ensure that developers have everything they need to build what the designers have envisioned.
Use apps to help with the handoff
Here are a few apps that help with one or more aspects of the design-to-dev transition:
You might want to consider moving your image files out of their numerous independent folders, where they can get lost, and into Lingo. With this visual library app, you can search, track, organize, browse and above all share your visual assets more efficiently.
If you’re building a mobile app, Inspect will help you achieve a “pixel-perfect” design handoff for both iOS and Android.
This design-handoff tool has plugins for both Sketch and Photoshop. Once enabled, the Sympli plugin will automatically create specs, style guides and visual assets for you to share with the dev team. Sympli also has plugins for Android Studio and Xcode, as well as a standalone web app.
Zeplin is a design sharing tool that streamlines the entire design handoff process. The design teams at Slack, MailChimp, Pinterest, Starbucks and Shopify (just to name a few) all use Zeplin.
Use a version control system
When we think of version control systems, we think of developers and Git. However, version control systems work wonders for designers as well. While designers can also take advantage of Git for their versioning, there are some dedicated design versioning tools, such as the widely used Folio. Whichever versioning platform you choose, don’t skip this key preparatory piece of the design handoff.
Only share the intended design
In the course of creating a site, feature, page or app, you’re bound to try out a slew of alternative approaches. It’s tempting to include those files with the handoff. At the very least, it shows how much thought you’ve put into the process. However, including all those extra files can draw attention away from the intended design and confuse the development team. So unless you’re undecided about the design and specifically want to offer the development team selections to choose from, then it’s best to leave the alternatives and earlier versions out.
Don’t forget secondary pages and screens
Without a meticulous handoff checklist and protocol, the handoff process will certainly have at least a few missing files. These generally won’t be pages and screens that belong to the primary user flow. Rather, they will be subsequent pages/screens such as the “forgot password” page/screen that it’s easy to overlook. All the same, they still need design treatments, and if they don’t make it into the mix, there will be trouble down the road.
Pay close attention to your copy
Be sure to have all of your copy carefully organized along with your screens. Moreover, the dev team needs to know the precise context, situation or trigger that will call for each piece of copy.
Perfecting the handoff
The design handoff is a critical stage in the process of creating a website, feature or app. If the handoff from design to dev gets flubbed, the end-user will never get to experience how beautiful or awesome the product could have been. Here’s the TL:DR version of your design-to-dev handoff best practices:
- Use apps, like Zeplin, to help with the handoff
- Use version control software, such as Folio, to keep all your versions in order
- Only pass on the intended design, not alternatives and earlier versions
- Don’t forget to include all secondary pages/screens
- Pay close attention to the copy, as well as the context where each piece of copy will arise. If you’re able to incorporate all of these best practices into your design-to-dev handoff, you’ll begin to approach the ideal workflow.
Not to toot our own horn, but we’ve got the whole design and dev thing pretty locked down. If you’re the maker of a technical product or service, get in touch with us to find out how we can increase your visibility and improve your customers’ overall experience with our bold designs and strategies.