{"id":7435,"date":"2019-05-15T16:58:42","date_gmt":"2019-05-15T15:58:42","guid":{"rendered":"https:\/\/uxstudioteam.com\/?p=7435"},"modified":"2022-05-19T14:34:23","modified_gmt":"2022-05-19T13:34:23","slug":"design-handoff","status":"publish","type":"post","link":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/design-handoff\/","title":{"rendered":"Design Handoff Guide: What Makes Good Designer-Developer Collaboration?"},"content":{"rendered":"

By definition, design handoff takes place when the finished UI has reached the stage for the developers to implement it. Let\u2019s look at the basics and some suggestions to get the best out of the designer-developer collaboration.<\/p>\n

\"Design<\/p>\n

<\/p>\n

Below, you will find some of our most important conclusions when it comes to design handoffs. Keep these anchor points in mind, for designers and developers equally, as well as product team leads and other managers.<\/span><\/p>\n

What does “design handoff” mean?<\/span><\/h2>\n

First of all, I must state that a “finished design” of a digital product does not exist. We can always do something more. So, in this article, \u201cdesign handoff\/handover\u201d refers to the point when designers need to transfer their ideas for development.<\/span><\/p>\n

Since design handoff refers to the end of a phase, the mistake of concentrating on only the best-practices about uploading, exporting and specifying designs comes easy (which I will mostly do).<\/span><\/p>\n

Speaking the same language<\/span><\/h2>\n

The technicalities of the design handoff also matter, but however nice and neat the specification, it makes little difference if you haven\u2019t actually talked to developers until the design handoff<\/a>. Even if several dedicated people are standing ready to take over the mediator role, designers should find their way to the developers\u2019 tables.<\/span><\/p>\n

The preparation for the design handoff should begin at the very beginning of the entire process. (Read more about this approach in Intercom\u2019s <\/span>great article<\/span><\/a>.) The checkpoint of designer-developer discussions should recur repeatedly, all of which using the right tools in your most preferred workflow makes it easier.<\/span><\/p>\n

\"Design
Illustration from Intercom\u2019s article about the values of designer-developer collab.<\/figcaption><\/figure>\n

From screen designs to screen-flow<\/span><\/h2>\n

Your <\/span>screen designs<\/span><\/a> serve not only as reference points to developers. Back in the bad old days, designers had difficulties exporting png\u2019s for different members of their product team, organizing their assets and .psd files for dev, and the discussions and version control needed top organization.<\/span><\/p>\n

Thanks God for the relatively painless present! Zeplin (and similar solutions like Avocode) dramatically improved the entire designer-developer workflow. Upload your design, enter commit messages for version control, comment and discuss or simply use this feature to specify the details. It contains all the assets, made exportable. Could they make it handier?<\/span><\/p>\n

You must have a basic prototype (in Invision, Marvel or Sketch, and links in Zeplin), but developers often request it to provide a static map of all the essential screens and their relations in a more didactic visual form. <\/span>(Full disclosure: Zeplin does not pay us; we simply love the product <3) <\/span><\/i><\/p>\n

Not only does the design handoff itself make it just useful, but it also reveals missing steps and edge cases, and forces designers to rethink illogical steps in the flow, etc. Win-win. <\/span><\/p>\n

\"Design
Hand-drawn sketches of flows for our client Stylelike.<\/figcaption><\/figure>\n

Start the discussion early in the sketching phase.\u00a0The point remains the same: Think it through, make it descriptive and start the discussion! The refined version will make a great checklist!<\/span><\/p>\n

\"Design
High fidelity screenflows perfectly help development explain how a feature works.<\/figcaption><\/figure>\n

Design challenges <\/span><\/h2>\n

1. Edge cases and empty states<\/span><\/h3>\n

I deliberately put this high on the list to ensure they make it onto your checklist. Screenflows include <\/span>edge cases<\/span><\/a> and <\/span>empty states design<\/span><\/a> less often but designers need to provide them. <\/span><\/p>\n

Consider their existence of empty states right from the beginning of the project so not to face unexpected questions long after the design handoff. <\/span><\/p>\n

Edge cases include stuff like designing the longest German-language version of a label, but that doesn\u2019t cover it all. Atypical use-cases might come up. Collecting edge cases in a spreadsheet and providing some written specifications might help simplify things for developers. <\/span><\/p>\n

2. Assets: Icons and pics<\/span><\/h3>\n

The need to design all the image assets manually and then hand them over to development used to cause designers pain. Zeplin <\/em><\/span>solves this problem<\/span><\/a> very well: just group and slice layers correctly. <\/span><\/p>\n

Exporting icons has never caused less hassle for developers, except for Android. Most designers use color masked icons (the most convenient way to recolor icons in Sketch to date) that Android Studio renders impossible to import.<\/span><\/p>\n

The complex icon designs for the web also often come up while handing over pixel-perfect designs to developers. Designers, check out the icons you export from Zeplin in Illustrator: In some cases the layers get messed up, <\/span>resulting in a bigger file size but also a distorted mutation of your icon design. <\/span><\/p>\n

(Sketch seems to be busy working to solve these issues, but until then, just try simplifying the questionable icon in Illustrator and share it with the developers separately.)<\/span><\/p>\n

3. Animations<\/span><\/h3>\n

We could view animating the user interface as the cherry on the top of the design, but we shouldn\u2019t underestimate this phase of the design process. Animations and micro-interactions don\u2019t only work as nice-to-have final touches personalizing our product. If done well, they also serve as descriptive additional features improving the user experience.<\/span><\/p>\n

The animation handover proves slightly problematic since the frequently used tools (eg, the popular Principle) only provide visuals. <\/span>For the developer to understand all the little, almost invisible things that happen in the animation (such as easing curves), we need either:<\/span><\/p>\n