{"id":6544,"date":"2022-04-29T10:40:28","date_gmt":"2022-04-29T10:40:28","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=6544"},"modified":"2023-11-13T22:37:05","modified_gmt":"2023-11-13T22:37:05","slug":"design-handoff-developers","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/design-handoff-developers\/","title":{"rendered":"How to create a design handoff for developers"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">For any <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-does-a-ux-designer-do\/\"><span style=\"font-weight: 400;\">UX designer<\/span><\/a><span style=\"font-weight: 400;\">, the handoff to a developer is the final and crucial step of a project. When a handoff is done correctly, it saves time and effort for both the developer and the designer, as well as improving the quality of the end product and the happiness of the user.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The handoff documents bridge the gap between design and development and while it may sound like an overwhelming process, it doesn\u2019t have to be. To create a seamless design handoff for a developer, we share some important tips that UX designers should follow.\u00a0<\/span><\/p>\n<h2><b>What is a design handoff?<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">When UX designers are fully satisfied with their <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/best-prototyping-tools-for-ux-designers\/\"><span style=\"font-weight: 400;\">designs<\/span><\/a><span style=\"font-weight: 400;\">, they create a document that has all the details and digital assets required for the development team to bring the product to life. This is the design handoff process.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The first step to any smooth design handoff is a strong designer-developer relationship.\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_certificate-in-working-with-developersp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/working-with-developers?utm_source=blog&utm_medium=blog_panel_text&utm_campaign=blog_promo\" style=\"\">\n                    <p>[CERTIFICATE IN WORKING WITH DEVELOPERS]<\/p>\n                    <span>Increase your Confidence when Working with Developers<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h3><b>Building a strong designer-developer relationship<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">It is essential to have a good working relationship with your developer. It will ensure that you can:<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\"> rely on one another for honest feedback<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> find a common ground that works for both of you\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> respect each other&#8217;s expertise and not overstep into each other\u2019s domain.<\/span><\/span><\/li>\n<\/ul>\n<h3><b>Communicate and collaborate\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">For any good working relationship, <\/span><a href=\"https:\/\/uxdesign.cc\/designer-developer-communication-8172f26e8af6\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">communication<\/span><\/a> <span style=\"font-weight: 400;\">and collaboration are key \u2013 it is also important for a successful design handoff. Developers should be brought in early in the design process. Their expertise and feedback should be valued while creating prototypes and designing the user interface. It is important to keep an open dialogue so that you can discuss what worked well in earlier projects and what didn\u2019t.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Good communication will help:\u00a0<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\"> create a more refined design handoff\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> provide the developers with background knowledge and context\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> avoid issues after the design handoff<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Developers are the people who make designs a reality. The sooner they are brought into the design conversation, the sooner the end product can be perfected.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><b>Avoid jargon\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">You don\u2019t want to confuse the developer by using terms that are specific to your role or your design team. Communicate in a language that is simple and easy to understand. It is important to find a middle ground and be on the same page throughout the process.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It is very possible that your development team is not aware of terms such as empathy map, mental model, microcopy etc.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Be as universal and specific as possible to ensure everything you need to share is clearly understood. This will save a lot of time as it cuts back on unnecessary back and forth.\u00a0<\/span><\/p>\n<h3><b>Be aware of each other\u2019s expertise\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">While you are not expected to be able to code, you should possess an understanding of the programming language that developers use and the challenges that they may face in their role. Knowing the basics of vital front end skills, such as CSS, Javascript and HTML,\u00a0 will make you a much better collaborator and will ultimately improve the quality of your product.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you are aware of the programming language as a designer, you will be able to assess which designs can be implemented by a developer. From this, they can create designs accurately.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You should be aware of the complexities of each other\u2019s roles and respect the time that is required to move a project from the design stage into the development stage. <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">A developer\u2019s role is not an easy task. It requires continuous and long hours of writing and rewriting lines of codes, which at times may not yield the same results as you expected.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><b>Preparing for handoff\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">It is now time for you to share with your developer the digital assets necessary for them to get down to business. Some tips to make the handoff process easier for you include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Create templates: <\/strong><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">As a designer, you will be met with tasks you do quite often, so it makes sense to create a template for each task and each deliverable documented in the handoff.\u00a0 This template will fit your aesthetics and workflow so that whenever you need to create a handoff, the templates are already there. This will save you a lot of time.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Hold handoff meetings: <\/strong><span style=\"font-weight: 400;\">Prior to sharing your deliverables, have a design and developer team meeting and walk them through each deliverable you intend to share during handoff. Show them what they are expected to receive and where they can find each of the assets. Answer any potential questions that may arise and provide as much clarity as you can during this meeting. <\/span><span style=\"font-weight: 400;\">In this meeting, you may also demonstrate how to use design software, like <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/user-interface-ui-design-tools\/\"><span style=\"font-weight: 400;\">Figma<\/span><\/a><span style=\"font-weight: 400;\"> or <\/span><a href=\"https:\/\/zeplin.io\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Zeplin<\/span><\/a><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">, as your developers may not be so familiar with them. Since most of your assets will be shared with them on these platforms, it\u2019s important to check that they know how to use them.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Annotate and explain: <\/strong><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">You will be sharing a lot of designs and digital assets with your developer, which may overwhelm them. It is a good practice to annotate and leave comments on each design, explaining each decision you made. These annotations detail the functionality and the behaviour of how the product should work. Their job is to define how the system behaves, how it responds to actions taken by the user, how it communicates results and how it helps fulfil intentions.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Avoid clutter: <\/strong><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Make sure all your designs are presented neatly, as it can be frustrating for anyone looking at it for the first time. Organise and label everything clearly so that going back and forth is easy. You should also provide the developers with editable access to all documents beforehand.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><strong>Review your work: <\/strong><span style=\"font-weight: 400;\">Before you hand over your deliverables, review everything. Ensure that all the links are accessible and working. Make sure that there are no typos and that the correct imagery is used for each section. <\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Now that each of your tasks and designs are agreed upon, we will give you some pointers on how to create a smooth transition from design to development.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This includes (but is not limited to): <\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">User Flows\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Prototypes\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Animations\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Design Handoff Checklist <\/span><\/li>\n<\/ul>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-diploma-in-ux-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ux-design?utm_source=blog&amp;utm_medium=blog_panel_pdux&amp;utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UX]<\/p>\n                    <span>Take our Professional Diploma in UX Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h3><b>User Flows <\/b><b><br \/>\n<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">User flow diagrams are created before any sketches and they define where content lives and the impact it will have on the user. They help developers understand where a screen sits in the structure of a design and the sequence of the main flows. <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">These are more important for products with complex designs and multiple logic possibilities for example edge cases.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">User flow examples include:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Text flows: <\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Simple explanations written in something like an Excel sheet can guide the developer through each interaction without the use of any supporting images or screens.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Chart flows: <\/b><span style=\"font-weight: 400;\">This is a slightly more complex user flow diagram, but it is a visual presentation. <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/ux-tools-students\/\"><span style=\"font-weight: 400;\">LucidCharts<\/span><\/a><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"> are a great asset for creating such flows.<\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Screen\/Wire flows: <\/b><span style=\"font-weight: 400;\">If you would like to take your user flow a step further, create flowcharts using high or low-fidelity <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/best-ux-wireframe-tools\/\"><span style=\"font-weight: 400;\">wireframes<\/span><\/a><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">. This will help the designer visualise each interaction more accurately.<\/span><\/span><\/li>\n<\/ul>\n<h3><b>Comprehensive prototypes\u00a0<\/b><\/h3>\n<p><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/best-prototyping-tools-for-ux-designers\/\"><span style=\"font-weight: 400;\">Prototyping<\/span><\/a><span style=\"font-weight: 400;\"> is possibly one of the most important digital assets within your design handoff checklist. It allows the whole team to visualise each interaction, identify common goals and\u00a0 &#8211; most importantly &#8211;\u00a0 understand what the final product or solution should look like.\u00a0 A comprehensive prototype will make your developer\u2019s life easier. If you use tools like Figma, prototyping should be an easy task for you.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Archive any designs and screens that you <\/span><i><span style=\"font-weight: 400;\">don\u2019t <\/span><\/i><span style=\"font-weight: 400;\">want in your final product. If these are clearly marked in the handoff, it will provide clarity and prevent your developer from facing any confusion.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><b>Animations<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Occasionally, UX designers include animations during interactions on an app to make the final product look more appealing and fun to use. However, at times it may be difficult to explain to the developer <\/span><a href=\"https:\/\/uxdesign.cc\/animation-handoff-how-to-make-sure-what-you-design-is-what-the-developers-build-731547aae34e\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">what the animation should look like<\/span><\/a><span style=\"font-weight: 400;\">. One ideal way to achieve this is to create gifs of the animations and share them with your developer. This allows the developer to visualise and program the animations with ease.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can also create these <\/span><a href=\"https:\/\/uxdesign.cc\/figma-5-ways-to-add-animation-to-your-designs-e3c521aa8902\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">animations on Figma<\/span><\/a><span style=\"font-weight: 400;\">, record and save them as videos and share them further with your team.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><b>Design handoff checklist\u00a0<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Finally, create a simple and easy-to-use checklist, highlighting the features that need to be designed based on priority and their statuses. This will prevent any designs from being overlooked, no matter how thorough you are. <\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">A simple checklist will allow you to:\u00a0<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\"> Communicate with your developer\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Track progress of each feature\u00a0<\/span><\/li>\n<li><span style=\"font-weight: 400;\"> Provide any blockers that are hindering the progress of any feature<\/span><\/li>\n<\/ul>\n<h3><b>Conclusion\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Once you hand your designs over to your developer, your work doesn\u2019t end there. Keep the lines of communication open so that you can track progress and provide any support to ensure that the end product is the best that it can be.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As the developers get started on your designs, actively<\/span><span style=\"font-weight: 400;\"> engage in Quality Assurance (QA) <\/span><span style=\"font-weight: 400;\">sessions to ensure the designs are being implemented as planned and the product is what you as a team envisioned.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you put time and effort into your first design handoff, every handoff from that point on will benefit from it. You will set a high standard for the design team, the development team and the overall quality of the product itself. By establishing clear lines of communication, both teams will be confident in the fact that if any problems arise, they can be solved easily. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Before you sign off on a UX project, read our guide on creating a successful design handoff for developers.<\/p>\n","protected":false},"author":24,"featured_media":7842,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[265,267],"tags":[],"class_list":["post-6544","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-career","category-ux-career-advice"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/6544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=6544"}],"version-history":[{"count":9,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/6544\/revisions"}],"predecessor-version":[{"id":9361,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/6544\/revisions\/9361"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/7842"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=6544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=6544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=6544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}