{"id":12284,"date":"2017-09-20T11:45:58","date_gmt":"2017-09-20T10:45:58","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=12284"},"modified":"2021-01-17T23:26:29","modified_gmt":"2021-01-17T23:26:29","slug":"guide-successful-design-handoffs","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/guide-successful-design-handoffs\/","title":{"rendered":"A Guide to Successful Design\u00a0Handoff Document"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A good product is a lot about the problem that you pick &amp; the ideas that you implement. But a well-sorted &amp; deliberate <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design handoff document<\/strong> and a process can play more than a handy role; ironing out quite a few wrinkles that can cause unnecessary escalations and ad-hoc duct-taping later during the execution phase.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">&quot;As designers, we are the guardians of execution and thus equally responsible for the air bubbles that might exist in the finished product. Thus before every release, it\u2019s imperative for the designer to sign off the build. But it\u2019s not always that <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design Quality Check<\/strong> is given it\u2019s due place in the process, and most product releases burdened by tight timelines end up bypassing this or at the most subset it under exercises like Dogfooding. The problem with bypassing Design Quality Check is that it looks like an easier trade-off to make instead of squeezing in those precious few hours before the release \u2014 More than the immediate quality loss what\u2019s even more harmful is the legacy it carries onto the upcoming releases &amp; sometimes it almost lingers throughout the lifecycle of the product, either as a function of team\u2019s mindset or the actual workflow.&quot;<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Having underscored the importance of a design quality check, <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">there\u2019s a responsibility that designers have too<\/strong>, which could lighten the burden of quality check &amp; bug bashing later on, which is \u2014 <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">how were the designs shared? <\/strong><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For the most part, it really does depend on how comprehensively were the designs published by the designer to the stakeholders. <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Designers, more often than not, want to see themselves as Thinkers but not so much as Executionists.<\/strong> It helps to learn a thing or two looking at the way Developers operate. The Version Control rigour, Namespacing of the files\/modules, Documenting iterations or Commit messages or Patch notes etc. It would only help us designers get more productive &amp; useful at our job.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Designers, more often than not, want to see themselves as Thinkers but not so much as Executionists.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">&quot;With this premise, I\u2019d like to share some thoughts on how designers can adopt a few techniques to ease our &amp; our colleagues\u2019 work in the execution phase with the help of a well rounded &amp; thorough <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">design handoff<\/strong>.&quot; <\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When a design is handed over to the developer, <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">there\u2019s multiple layers of information that needs to be conveyed<\/strong>. In addition to the Mockups and Specs+Assets, one must also share the Interactions, Copy, and a Checklist. All these cover different aspects of the design solution and need to be collated in one, simple, accessible document that sits on the cloud. You can call it the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design Handoff Document<\/strong>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/09\/1xR_3V3Ftyhz3L1_4UQh_tw.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/09\/1xR_3V3Ftyhz3L1_4UQh_tw.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Design Handoff Document<\/strong> is a throwaway artefact. It serves the goal to build something, and that\u2019s it.<\/p>\n<section class=\"long-post-content\">\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\" class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"#part1\">Mockups<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"#part2\">Interactions<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"#part3\">Copy<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"#part4\">Specs &amp; Assets<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"class=\"link link--blue fontWeight-4\" href=\"#part5\">Checklist<\/a><\/li>\n<\/ul>\n<\/section>\n<div id=\"part1\">\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">1) Mockups<\/h2>\n<\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There isn\u2019t much to mention here. We all have been generating &amp; sharing UI mocks comfortably since many years now. But I do have a couple of points to make\u00a0:<\/p>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Naming your files<\/strong>\u00a0: Let the file\/screen name not possess any form of versioning. The name of the screen should simply describe it\u2019s function. If you\u2019re not yet using a <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uxdesign.cc\/design-assets-version-control-and-you-566a00bf0eee#.e443fi1ko\">version control solution for your designs<\/a>, you probably should.<br \/>\nPlus, make sure you use <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/danielmiessler.com\/blog\/a-list-of-different-case-types\/#gs.GWYjAyE\">consistent casing<\/a> when naming your screens, whether it\u2019s \u2018<em>camelCasing<\/em>\u2019 or \u2018<em>Sentence casing\u2019 <\/em>or<em> \u2018lower casing\u2019<\/em> etc.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Have the necessary, archive the rest<\/strong>\u00a0: At the time of handoff, you\u2019d have collectively zero\u2019ed on an option you\u2019re going to build. So weed out all the older iterations &amp; explorations. It also helps you write simpler filenames.<\/li>\n<\/ol>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/09\/1c9RDVD-VKq1ZH-tKlYjABg.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/09\/1c9RDVD-VKq1ZH-tKlYjABg.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<div id=\"part2\">\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">2) Interactions<\/h2>\n<\/div>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Make a flow\u00a0<\/strong>: Putting the mockups together is only half the work done. You\u2019d need to stitch the screens together based on the flow using Hotspots (or just make an Interactive Prototype). It helps the product manager understand how the user journey is panning out; and helps the developer plan her\/his approach to code.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Figure out the fidelity<\/strong>\u00a0: Not every screen has to be fleshed out with high fidelity prototypes. Few screens could simply be static with explanatory comments, few could get away with platform-specific standard interaction patterns and few might require those custom prototypes. There\u2019s no blanket rule for all the screens, so discuss with your developer &amp; plan accordingly. Do not end up spend a ton of time prototyping a simple interaction pattern that already exists.<\/li>\n<\/ol>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Whether you choose to communicate the interactions through an <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Interactive prototype<\/strong> or <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Comments marked up on each static screen<\/strong> \u2014 it\u2019s upto you. But the idea is to have the interactions documented. There\u2019s a tendency to leave this bit till the last minute when you hear designers say, \u201c<em>I will sit with the developer &amp; hash it out\u201d; <\/em>but it\u2019s not efficient.<\/p>\n<div id=\"part3\">\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">3) Copy<\/h2>\n<\/div>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>My advice is to list all the Copy in a 3-column <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">table<\/strong> using any cloud tool of your team\u2019s choice (<a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.dropbox.com\/en\/help\/9173#tables\">Paper by Dropbox<\/a> or <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.google.co.in\/sheets\">Sheet by Google<\/a>). There\u2019s always a lot of Copy that cannot be shoe-horned in the UI mocks, so we\u2019d need to record them somewhere else.<\/li>\n<li>For reference, I\u2019ve drawn a brief template for our Copy table \u2014<br \/>\n\u2022 First, specify the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>type<\/em><\/strong> of copy. This helps developers quickly parse through the list. The rows could be grouped by the name of the screens (Homepage, Cart, Checkout etc.)<br \/>\n\u2022 Second, specify the situation &amp; context of the copy. (<em>Eg. Whether the user is logged in or if it\u2019s a repeat user. Or, if there\u2019s an ephemeral event which\u2019d influence a particular UX).<\/em> Mentioning the context or the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>heuristic<\/em><\/strong> helps the developer understand when should the message appear\/disappear.<br \/>\n\u2022 Lastly, the actual <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>message<\/em><\/strong>.<\/li>\n<\/ol>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/09\/1-NFfVkXfNK89MobFMn09Tg.jpeg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/09\/1-NFfVkXfNK89MobFMn09Tg.jpeg\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">More often than not, most of the product &amp; design folks don\u2019t spare enough brain cycles on Copywriting. Different team compositions would dictate if you\u2019d need a specialist copywriter or not. But this post is not about whether the designer should write her\/him own copy; nor is this another rant about how <em>\u2018copy is king\u2019<\/em>. I\u2019m just saying you should have all the copy documented when you share the designs.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Plus, you\u2019d anyway not want your developer to <em>\u2018fill in\u2019<\/em> the copy for you in the final hour before the release. (\u2018cuz you are obviously not around \u2018cuz you\u2019ve already left for the day. Oh, designers.)<\/p>\n<div id=\"part4\">\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Specs &amp; Assets<\/h2>\n<\/div>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Automate: <\/strong>Today, with the abundance of handoff tools available, a designer should not be allowed to waste any time redlining the designs with specs, measurements, and style guides. Let\u2019s make use of these nifty tools and save our team\u2019s time. It\u2019s just <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">a matter of properly organising layers &amp; groups in your sketch file<\/strong>and let the tools do the rest.Whenever you ought to define\/refine your visual vocabulary \u2014 Give <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/blog.lingoapp.com\/home\/2016\/8\/3\/introducing-lingo-a-home-for-your-visual-language\">Lingo<\/a> a spin, which helps you create a sharable style guide.<\/li>\n<li><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Accountability: <\/strong>Automating the handoff process gives designers the authority to question the developer incase of deviation from the prescribed designs.<\/li>\n<\/ol>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/09\/1ce5nMVEEEtndoVcUIRy64Q.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/09\/1ce5nMVEEEtndoVcUIRy64Q.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">For example, <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>raise a jira ticket<\/em><\/strong> against the responsible developer the moment you spot a discrepancy in the build. This way there\u2019s organised accountability within a timeframe and no email escalations against the designer.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">And oh..<\/h2>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>When sharing your Specs, don\u2019t forget to communicate to the developer the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/better-grid-systems-ui-design-tools\/\"><strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Grid System <\/strong><\/a>you\u2019re using in your designs. I use <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/built-to-adapt\/intro-to-the-8-point-grid-system-d2573cde8632#.fsaskxn6w\">8-point grid system<\/a> considering almost all the screen-sizes in the market are divisible by 8. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/spec.fm\/specifics\/8-pt-grid\">Here\u2019s how<\/a> you can start using it in your designs.<\/li>\n<li>If your designs involve a lot of state-changes for buttons or labels, then <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/sketch-app-sources\/design-to-development-my-process-for-ios-asset-management-and-handoff-da4fb7d9471e#.nc5kn3sbp\">PaintCode<\/a> is known to <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/a-first-project-with-paintcode\/pushing-the-arrow-s-buttons-b2f00c951897#.urcyv18r7\">serve this need well<\/a>. Plus, it translates the SVG paths &amp; ColorData to generate Swift or ObjC classes, and you can simply share the swift\/objC\/java file with the developers. I\u2019ve heard many developers appreciate PaintCode, although personally I haven\u2019t used it.<\/li>\n<\/ul>\n<div id=\"part5\">\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">5)Design Handoff Checklist<\/h2>\n<\/div>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The most gut-wrenching part of any design execution exercise is the \u2018<strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">missing designs<\/strong>\u2019. There\u2019s always an edge case or two missing from the designs shared, and this always gets escalated mostly during the last mile of design execution, with a sense of panic because of the looming deadlines. This leaves the designer reacting to the situation instead of responding with reasonable thought.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A practical solution to avoid all the last moment chaos, is \u2014<\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Maintain a plain-jane <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>checklist<\/em><\/strong> of all the cases &amp; features that need to be designed; created &amp; managed by the designer on the project.<\/li>\n<li>The checklist will flag the <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>status<\/em><\/strong> of the feature being picked up or not, and whether it\u2019s completed or under works. All the completed rows should have the link to the corresponding design.<\/li>\n<li>If a certain feature is moved to the next version because of a certain <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>dependency<\/em><\/strong>, then the corresponding team is marked along with a describing <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>comment<\/em><\/strong>.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/09\/1GGd6W4RhNOXJhxzQn2YQgQ.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/09\/1GGd6W4RhNOXJhxzQn2YQgQ.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>Anything that does not exist on the checklist, is not accountable for implementation, and this understanding is established between product, design &amp; engineering at the start of design solutioning. This way the checklist acts as a <strong class=\"c-slate lineHeight-l fontSize-l fontWeight-5 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">reference &amp; single source of truth<\/strong> incase of a deadlock or confusion around whether or not the feature was agreed upon to build.<\/li>\n<\/ul>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/09\/109A0NjzRfw8GAQ90gHxFOg.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6580\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/09\/109A0NjzRfw8GAQ90gHxFOg.png\" title=\"\" alt=\"\" \/><\/a><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We designers do spare a lot of thought and care while designing for our users; and it would only be fair to extend similar empathy toward our teammates. So one should try to keep the <em>Design Handoff Document<\/em> as simple &amp; consumable as possible; without design jargon &amp; funky acronyms. I\u2019m reminded of this popular programming quote that goes<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">&quot;Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.&quot;<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This article was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/uxdesign.cc\/https-medium-com-91bilal-guide-to-successful-design-handoffs-18345f42d5d6\">Bilal's Medium page<\/a>.<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now in our case, the developer doesn\u2019t skim but actually dissects your designs, going knees deep, implements them. Doesn\u2019t he deserve the <em>most<\/em> empathy? Probably does.<\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">\nFurther reading:<br \/>\n<\/h3>\n<ul class=\"pageWrap pageWrap--s list list--unordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/handy-user-experience-testing-checklist\/\">A Handy User Experience Testing Checklist for Fast-Paced Designers<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/i-wish-id-known-designing-conversational-uis\/\">What I Wish I\u2019d Known About Designing Conversational UIs<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/how-we-built-handoff\/\">How We Built Handoff<\/a><\/li>\n<li><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/showing-process-important\/\">Why Showing Your Process is So Important!<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>A good product is a lot about the problem that you pick &amp; the ideas that you implement. But a well-sorted &amp; deliberate Design handoff document and a process can play more than a handy role; ironing out quite a few wrinkles that can cause unnecessary escalations and ad-hoc duct-taping later during the execution phase. &quot;As designers, we are the&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/guide-successful-design-handoffs\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":172,"featured_media":12316,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-12284","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"A Design Handoff Document is a throwaway artefact. It serves the goal to build something.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/guide-successful-design-handoffs\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Guide to Successful Design\u00a0Handoff Document\" \/>\n<meta property=\"og:description\" content=\"A Design Handoff Document is a throwaway artefact. It serves the goal to build something.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/guide-successful-design-handoffs\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-20T10:45:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-17T23:26:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/09\/handoff.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2598\" \/>\n\t<meta property=\"og:image:height\" content=\"1550\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"7 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/guide-successful-design-handoffs\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/09\/handoff.png\",\"width\":2598,\"height\":1550},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/guide-successful-design-handoffs\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/guide-successful-design-handoffs\/\",\"name\":\"A Guide to Successful Design\\u00a0Handoff Document\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/guide-successful-design-handoffs\/#primaryimage\"},\"datePublished\":\"2017-09-20T10:45:58+00:00\",\"dateModified\":\"2021-01-17T23:26:29+00:00\",\"description\":\"A Design Handoff Document is a throwaway artefact. It serves the goal to build something.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/guide-successful-design-handoffs\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/guide-successful-design-handoffs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/guide-successful-design-handoffs\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/5e5dc77a5d9728b533f6220d28d19b21\"},\"headline\":\"A Guide to Successful Design\\u00a0Handoff Document\",\"datePublished\":\"2017-09-20T10:45:58+00:00\",\"dateModified\":\"2021-01-17T23:26:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/guide-successful-design-handoffs\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/guide-successful-design-handoffs\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/guide-successful-design-handoffs\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/5e5dc77a5d9728b533f6220d28d19b21\",\"name\":\"Bilal Mohammed\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6b2117c39bd9894465736478258ba07a2cdcd02736e489bb87c702a88e1f5b7f?s=96&d=mm&r=g\",\"caption\":\"Bilal Mohammed\"},\"description\":\"Design @AmazonKindle \\u00b7 Anime \\u00b7 Lip Balm \\u00b7 Hates 3D \\u00b7 Mentor @tryDesignLab \\u00b7 Past \\u2014 @Flipkart @Practo\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/12284","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/172"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=12284"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/12284\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/12316"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=12284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=12284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=12284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}