<div>
<figure><img alt="" src="https://d262ilb51hltx0.cloudfront.net/max/1024/1*SsRwmxeGALu1MLN1G3uPEQ.png"></figure>
<h4>For seamless collaboration, the bridge should be made strong and&nbsp;perfect!</h4>
With short deadlines and crunch schedules, designs are often handed down to the development team one week before the product/feature&rsquo;s release date, and they are asked to start sprinting. The designs usually consist of Photoshop files (PSDs) or Sketch artboards with a lot of layers and zero specs to accompany them.
The fact we need to understand is that this does not actually help the team, because what goes that way comes back the same way. The team will now or then spend time on making the product perfect. A better way out is to go on in a systematic way and give the developer everything necessary for a great&nbsp;product.
We understand the time crunch and so we embrassed all of this under one roof&#8202;&mdash;&#8202;<a href="http://www.canvasflip.com">CanvasFlip</a>. Here&rsquo;s the list of things you need to pass on to the development team&nbsp;:
<ol>
<li>Design specifications</li>
</ol>
First things&nbsp;first!
&ldquo;A picture is worth a thousand words&rdquo; is quite a popular adage. And we cannot agree more that it does! It makes it possible to absorb large amounts of data in a glance. However, in the development business, a picture or a PSD might not be&nbsp;enough.
For developers, they need few numbers in addition to these PSDs and Sketch artboards. They need a design&rsquo;s exact attributes to be able to write the HTML and CSS necessary to recreate the text and shape elements via code. If the design is not accompanied by RGB values and other specifications from the designer, then making approximate guesses or hunting through layers could lead either to errors or the loss of precious development time.
<a href="https://canvasflipsurvey.typeform.com/to/E9hxDX">Secret&nbsp;: CanvasFlip is coming up with the integrated design hand-off tool SPECs. A week to go! Take this survey and be a part of the private BETA&nbsp;group!</a>
2. Storyboards
Storyboards showcases the flow of elements and the navigation from the links on the design screen, creating a visual narrative for the developer. Some links may not even load pages, but instead trigger effects like dropdown menus or modal windows. Storyboards give developers a snapshot of the entire experience so they understand why some complex interactions might be necessary. This makes sure that the developer is convinced about the elements &amp; links; and hence does not misses out on any of&nbsp;them.
<figure><img alt="" src="https://d262ilb51hltx0.cloudfront.net/max/500/1*travnIDEm6vKQu3weoWpsA.jpeg"><figcaption>(<a href="http://johnnyholland.org/2011/10/storyboarding-ux-part-1-an-introduction/">Image source</a>)</figcaption></figure>
3. Interaction Maps
Interaction maps are pretty much like the storyboards except that they focus more on the flow of the design screens rather than the elements and links. I usually take a print of the automatically generated interaction map in CanvasFlip and drop annotations for the development team. This is extremely helpful for the developers (Developers would agree with&nbsp;me).
<figure><img alt="" src="https://d262ilb51hltx0.cloudfront.net/max/960/1*i5C9pUqxERZSXEmqYuoZrQ.png"><figcaption>Interaction map generated in CanvasFlip</figcaption></figure>
4. User&nbsp;personas
The strongest way to align design and development is to focus everyone on user needs. It&rsquo;s important to list down the user behaviours, goals, fears, ambitions and&nbsp;habits.
Personas are not just a tool for designers. In my experience, personas tend to be ignored by developers, so to ensure this valuable research reaches the wider product team I pin up print-outs around the office to constantly remind the design and product team about whom we are creating for. It also acts as a great reference point to back any decisions made throughout the design and development process.
<figure><img alt="" src="https://d262ilb51hltx0.cloudfront.net/max/650/1*H4zwcSwPty-SMvqNp3cMTg.png"></figure>
I usally mention the equivalent position holder in my company so that the team gets a clear reference to the&nbsp;persona.
5. Prototypes
Developers will always need some way to reference a designers mockups as they build websites or apps. It&rsquo;s also useful to be able to interact with the mockups and experience how a user should be able to navigate through each page. If there are iterations to the design then online mockups can be quickly updated in one central&nbsp;point.
<figure><img alt="" src="https://d262ilb51hltx0.cloudfront.net/max/792/1*BRRAPzw9R0YfxAGOI1qQ6w.png"><figcaption>Prototypes help developers visualize the vision of the&nbsp;project</figcaption></figure>
<blockquote>I hear, I forget; I see, I remember; I use, I understand</blockquote>
6. User testing&nbsp;report
Usually the developers are not very bothered about the user testing report, neither are the designers very vigilant about forwarding the same. But in my experience, I believe that collaborating on the user research creates a stronger sense of joint ownership and creation. Usability tests usually pin points the issues in the designs but to fix them, the team needs to brainstrom. I make sure that my developers too are a part of the discussion.
<figure><img alt="" src="https://d262ilb51hltx0.cloudfront.net/max/960/1*nJt5aVSe9dLIbSpCghRT-Q.png"></figure>
<h3>Over to&nbsp;you</h3>
Do you have any other items on your checklist while you hand off your designs to the product team? Do let us know in the comments section&nbsp;below.
<figure><a href="http://www.canvasflip.com/?ref=mediumchecklist"><img alt="" src="https://d262ilb51hltx0.cloudfront.net/max/1024/1*ffzERRzjN2R4RtNJGxg09w.png"></a></figure>
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=3a05d025be0e" width="1" height="1">
<hr>
<a href="https://blog.prototypr.io/checklist-for-handing-off-designs-to-product-team-3a05d025be0e">Checklist for handing off designs to product team</a> was originally published in <a href="https://blog.prototypr.io">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.
</div>

Checklist for handing off designs to product team

For seamless collaboration, the bridge should be made strong and perfect!

Top Stories