{"id":6257,"date":"2020-03-20T18:12:49","date_gmt":"2020-03-20T18:12:49","guid":{"rendered":"http:\/\/www.glajumedia.com\/en\/?p=6257"},"modified":"2022-03-22T22:17:50","modified_gmt":"2022-03-22T22:17:50","slug":"design-to-code","status":"publish","type":"post","link":"https:\/\/www.gmedia.la\/en\/design-to-code\/","title":{"rendered":"Design-to-Code Guide: Why you need to know about this process?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">When you decide to get your product or service into the virtual world, the only way to get done is by navigating into many handoffs. To get the work done, it comes to your designers and developers that execute different tasks.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The designer main work is interface features, users experience, and graphics\/visuals, while developers concentrate on making a product functional and designers\u2019 ideas into digital reality. Both teams must work together, even when sometimes they cannot understand each other which leads to handoff failure.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Have you ever heard about engineering handoff, design handoff, or developer handoff? Get more information about what it is, its benefits, bests practices and more.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6263\" src=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/03\/undraw_our_solution_htvp-2-1.png\" alt=\"\" width=\"1134\" height=\"771\" srcset=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/03\/undraw_our_solution_htvp-2-1.png 1134w, https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/03\/undraw_our_solution_htvp-2-1-980x666.png 980w, https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/03\/undraw_our_solution_htvp-2-1-480x326.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1134px, 100vw\" \/><span style=\"color: inherit; font-size: 1.95em;\">WHAT DOES&nbsp; \u201cDESIGN-TO-CODE\u201d MEAN?<\/span><\/p>\n<p><a href=\"https:\/\/blog.prototypr.io\/can-we-talk-about-design-handoff-for-a-minute-b01efb7eb6ed\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">&nbsp;Alex Lareo<\/span><\/a><span style=\"font-weight: 400;\"> says that \u201c Design Handoff is the process of handing off the designed material to the developers so they can implement design into a functional \u2026 things (web, app, whatever)\u201d. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Inside of this process comes to the stage where design-to-code use engineering handoff tools to obtain the styles, fonts, and images resources from your design files. With this kind of handoff, it comes easily to comprehend for the engineers to develop.&nbsp;<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">THE MAIN REASON BEHIND DESIGN-TO-CODE FAILURE<\/span><\/h2>\n<h3><b>Miscommunication between designer and engineers<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">In the past, design-to-code handoff used to be a stressful experience. First, the designers meant writing out all their instructions as layers in Photoshop without considering last-minute changes. Then, engineers needed to reach out to designers for further information because the designers\u2019 documentation was discrepancies, inconsistencies, and many other things.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Other miscommunication problems between designers-developers&nbsp;<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Unnecessary back and forward feedback between designers and engineers.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">QA issues because of the time-consuming.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The inability to take advantage of new tools.<\/span><\/li>\n<\/ul>\n<h3><b>Inadequate design structure<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u201cDesign systems are an investment. Many companies don\u2019t employ people to focus on design systems until the inefficiencies of not having one become too painful to bear.\u201d \u2013 <\/span><a href=\"https:\/\/phase.com\/magazine\/designer-and-developer-handoff-guide\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Diana Mounter, GitHub<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400;\">By not having the right structure, designers do not have a clear vision of how to achieve their objectives. The could get overboard with their creations that lead to a poor UX and overwhelm process for the engineers.&nbsp;<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6265\" src=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/03\/undraw_design_notes_8dmv-2.png\" alt=\"\" width=\"1128\" height=\"812\" srcset=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/03\/undraw_design_notes_8dmv-2.png 1128w, https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/03\/undraw_design_notes_8dmv-2-980x705.png 980w, https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/03\/undraw_design_notes_8dmv-2-480x346.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) 1128px, 100vw\" \/><\/p>\n<h2><span style=\"font-weight: 400;\">MAKING YOUR DESIGN-TO-CODE BETTER FOR EVERYONE<\/span><\/h2>\n<h3>Constant and easy communication between designers and engineers<\/h3>\n<p><span style=\"font-weight: 400;\">To reduce any kind of misunderstanding, designers should bring developers from the early stages. This step is crucial because both teams would be able to discuss some ideas. By getting observations from engineers, it is really important because they will arrive with the best implementation for the designers\u2019 prototypes.&nbsp;<\/span><\/p>\n<h3><b>Speaking the same language&nbsp;<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">The language that designers and engineers use between them also matters because they need to understand each other. In some cases, it would better to have a mediator between designers and developers with the most universal and simple terms.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Keep in mind designers that not everybody knows terms such as mood boards, orphans, bleed, etc. Also, engineers don\u2019t forget that most of the human being can understand language like cache, API, crawling, etc.&nbsp;<\/span><\/p>\n<h3><b>Design-to-code tools<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">The best way to reduce future handoff is by<\/span> <span style=\"font-weight: 400;\">using a complete product design platform. For example, tools such as Sketch, InVision, Marvel, Figma\u2026 would help you communicate easily and clearly. Keep in mind to run research with your design team to see which tool works best for your goals and time to master.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">A successful design-to-code is a critical part of creating a competitive product. However, you should never forget that the vital elements are good communication and collaboration between different teams.&nbsp;<\/span><\/p>\n<p><span style=\"font-weight: 400;\"> <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6261\" src=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/03\/undraw_design_tools_42tf-2.png\" alt=\"\" width=\"1404\" height=\"716\" srcset=\"https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/03\/undraw_design_tools_42tf-2.png 1404w, https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/03\/undraw_design_tools_42tf-2-1280x653.png 1280w, https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/03\/undraw_design_tools_42tf-2-980x500.png 980w, https:\/\/www.gmedia.la\/wp-content\/uploads\/2020\/03\/undraw_design_tools_42tf-2-480x245.png 480w\" sizes=\"(min-width: 0px) and (max-width: 480px) 480px, (min-width: 481px) and (max-width: 980px) 980px, (min-width: 981px) and (max-width: 1280px) 1280px, (min-width: 1281px) 1404px, 100vw\" \/><\/span><\/p>\n<p><span style=\"font-weight: 400;\">This article is a little guide of how designers and developers should work together toward the same goal. Therefore, <a href=\"http:\/\/www.glajumedia.com\/en\/\" target=\"_blank\" rel=\"noopener\">Glajumedia<\/a> has the experience and knowledge work on a design-to-code handoff project with businesses around the world. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you decide to get your product or service into the virtual world, the only way to get done is by navigating into many handoffs. To get the work done, it comes to your designers&#8230;<\/p>\n","protected":false},"author":1,"featured_media":6269,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[41,44],"tags":[211,95,124],"class_list":["post-6257","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-category-mobile-application","category-category-uxui","tag-design-to-code","tag-web-design","tag-web-development"],"_links":{"self":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts\/6257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/comments?post=6257"}],"version-history":[{"count":0,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts\/6257\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/media\/6269"}],"wp:attachment":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/media?parent=6257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/categories?post=6257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/tags?post=6257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}