{"id":17556,"date":"2019-04-15T12:34:02","date_gmt":"2019-04-15T11:34:02","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=17556"},"modified":"2020-11-12T11:45:06","modified_gmt":"2020-11-12T11:45:06","slug":"managing-design-handover","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/managing-design-handover\/","title":{"rendered":"Managing Design Handover"},"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\"><em>This article is an excerpt from the Marvel eBook, <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/ebook-collaboration-handoff-edition\/\">The Book of Collaboration: Handoff Edition<\/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\">Many designers and developers hesitate at the idea of collaboration because it sounds like accepting compromises. Nowhere is this dilemma more apparent than when our workflows overlap and the design is ready for developers to begin building.<\/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\">\u201cGreat products come from harmony between the design vision and technical details. Collaboration is the method for creating that harmony.\u201d<\/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\">When designers deliver a complete design mockup to developers for implementation, both sides tend to view it as a competition; both sides are pushing for their own concerns and trying to avoid unnecessary compromises and wasteful rework.<\/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\">If the designer gets their way, the developer must make a sacrifice, and vice-versa. The designer wants to avoid major changes and is invested in seeing the design vision achieved accurately because it\u2019s better for the business and users. The developer wants to ensure the new implementation isn\u2019t adding technical debt or causing additional work, again because this is better for the business and users.<\/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:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/04\/Mockup_01@2x.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17562\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/04\/Mockup_01@2x.png\" alt=\"\" width=\"2402\" height=\"1680\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/Mockup_01@2x.png 2402w, https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/Mockup_01@2x-600x420.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/Mockup_01@2x-768x537.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/Mockup_01@2x-1500x1049.png 1500w\" sizes=\"auto, (max-width: 2402px) 100vw, 2402px\" \/><\/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\"><span class=\"long-quote\">\u201cDesigners and developers competing during this phase is a shame because both perspectives are important. Design and development concerns shouldn\u2019t compete\u200a\u2014\u200athey should support one another. Both teams are trying to create a great product, and all concerns should be welcome if they support that goal.\u201d<\/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\">This is why teams should change how they approach the transition from design to development. The old way is damaging and sets up unhealthy competition when everyone should be collaborating and supporting one another\u2019s goals.<\/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\">It\u2019s destructive to teamwork and removes important opportunities for both designers and developers to do their best work.<\/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\">The other downside is that when designers hand over source files so developers can take over the project, this implies that design work is done, which couldn\u2019t be further from the truth. Even the best design mockup can\u2019t foresee every technical challenge or hurdle during implementation.<\/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\">\u201cA mockup is a plan, and even the best plans have to adapt.\u201d<\/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\">Your team can remove common frustrations and conflicts by approaching this phase of each project differently.<\/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;\">Build better products, in harmony<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">With this eBook, you\u2019ll find the frustrations and set-backs that occur during the design-to-development process highlighted and challenged with forward thinking solutions.<\/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\">Explore new ways to get cross-functional teams on the same page, every step of the way.<\/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\/ebook-collaboration-handoff-edition\/\">Download the free eBook<\/a> \ud83d\ude80<\/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\/resources\/the-book-of-collaboration-handoff-edition\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17564\" src=\"https:\/\/marvel7077.wpengine.com\/wp-content\/uploads\/2019\/04\/Social_06.png\" alt=\"\" width=\"1728\" height=\"864\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/Social_06.png 1728w, https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/Social_06-600x300.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/Social_06-768x384.png 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/Social_06-1500x750.png 1500w\" sizes=\"auto, (max-width: 1728px) 100vw, 1728px\" \/><\/a><\/p>\n<h3 class=\"pageWrap pageWrap--s marginTop-l marginBottom-m c-black lineHeight-xl fontSize-xl fontWeight-5\">Further reading:<\/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 class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/making-case-design-sprints\/\" target=\"_blank\" rel=\"noopener noreferrer\">Making the Case for Design Sprints<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/why-design-systems-fail-how-to-make-them-work\/\" target=\"_blank\" rel=\"noopener noreferrer\">Why Design Systems Fail, and How to Make Them Work<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/how-we-built-handoff\/\" target=\"_blank\" rel=\"noopener noreferrer\">How We Built Handoff<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/designing-styleguide-elements-building-compelling-products\/\" target=\"_blank\" rel=\"noopener noreferrer\">Designing a Styleguide: Elements That Go Into Building Compelling Products<\/a><\/li>\n<li class=\"LinkSuggestion__LinkSuggestionWrapper-sc-1mdih4x-0 bRwwZe\"><a class=\"link link--blue fontWeight-4\"class=\"LinkSuggestion__Link-sc-1mdih4x-2 dcwLhi\" href=\"https:\/\/marvelapp.com\/blog\/sprint-story-smart-home-sprint\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sprint story: Smart home sprint<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This article is an excerpt from the Marvel eBook, The Book of Collaboration: Handoff Edition. Many designers and developers hesitate at the idea of collaboration because it sounds like accepting compromises. Nowhere is this dilemma more apparent than when our workflows overlap and the design is ready for developers to begin building. \u201cGreat products come from harmony between the design&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/managing-design-handover\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":12,"featured_media":17560,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[500],"tags":[],"class_list":["post-17556","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-process"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\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\/managing-design-handover\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Managing Design Handover\" \/>\n<meta property=\"og:description\" content=\"This article is an excerpt from the Marvel eBook, The Book of Collaboration: Handoff Edition. Many designers and developers hesitate at the idea of collaboration because it sounds like accepting compromises. Nowhere is this dilemma more apparent than when our workflows overlap and the design is ready for developers to begin building. \u201cGreat products come from harmony between the design... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/managing-design-handover\/\" \/>\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=\"2019-04-15T11:34:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-12T11:45:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/Blogpost_02-1500x656.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"656\" \/>\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=\"2 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\/managing-design-handover\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2019\/04\/Blogpost_02.png\",\"width\":\"5988\",\"height\":\"2620\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/managing-design-handover\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/managing-design-handover\/\",\"name\":\"Managing Design Handover\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/managing-design-handover\/#primaryimage\"},\"datePublished\":\"2019-04-15T11:34:02+00:00\",\"dateModified\":\"2020-11-12T11:45:06+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/managing-design-handover\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/managing-design-handover\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/managing-design-handover\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\"},\"headline\":\"Managing Design Handover\",\"datePublished\":\"2019-04-15T11:34:02+00:00\",\"dateModified\":\"2020-11-12T11:45:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/managing-design-handover\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/managing-design-handover\/#primaryimage\"},\"articleSection\":\"Design Process\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/managing-design-handover\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\",\"name\":\"Naomi\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c520343b1feb2f69cca53916bf57f5c457b3a2640d405e0f9f20a8f8e8bb7ca7?s=96&d=mm&r=g\",\"caption\":\"Naomi\"},\"description\":\"Writing for Marvel. Writing for fun. Eating everywhere, all the time.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/17556","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\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=17556"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/17556\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/17560"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=17556"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=17556"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=17556"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}