Design delivery is a necessary workflow for UI designers. Design delivery affects the final implementation of the interface and the size of the fit. So how do you deliver from design to development? This article will teach you how to use tools to help complete the perfect delivery from design to development.


I. Handover project

In fact, before handing over the specific design draft, the project switch and handover should be at the forefront. This is when you need to use task management tools to help you hand over projects. Task management tools ensure that the product team’s workflow is in order:


  • Unify the work flow of the whole team, and enable everyone to communicate on a unified platform
  • Multiple tasks and processes for your team can be maintained and monitored with just a few clicks
  • Use automation system to effectively track time for all team members
  • Create a central node for storing, sharing, and retrieving documents
  • Avoid manually updating and coordinating project progress to save time
  • Virtual meetings can be arranged and attended anywhere in the world



Recommended tools:

1. Droptask

With endorsements from Harvard University, Coca-Cola, and Disney, Droptask gives its users a flexible, easy-to-use task management framework. It introduced the familiar Venn diagram in design and allowed customization in color. It has the shortest learning curve compared to other task management software.


Features:

  • With fun bootstrap views and workflow views for individual tasks
  • You can add notes, assigns, labels, lists, reminders, and attachments to each task
  • Use the Slide bar to select and manage task urgency, priority, progress, and effort
  • You can access and view the history of a task whenever you want
  • You can create a separate category or item and then use drag to relocate the task elsewhere
  • Monitor and manage task notifications for each member


Provide integrated software:

  • Dropbox, Google Calendar, Outlook and Google Drive


2. ActiveCollab

ActiveCollab is another powerful tool for managing and organizing workflows for small teams and general enterprises. It has been in the field for a decade and is popular with many academic institutions and government organizations for its ease of use and flexibility. You can use it to manage various aspects of a project, including time tracking, team collaboration, or product pricing.


Features:

  • The ability to create and organize tasks on a single panel and filter by deadline, label, or person
  • You can select a grantee for each task, add reminders, comments, and files for the team to share
  • Tasks can be grouped in a Gantt chart, column view, or list view
  • Calendars can be synchronized with tasks for specific events
  • Use a stopwatch to track the total hours spent on a task
  • Generate reports for the number of tasks in progress


Provide integrated software:

  • Slack, Quickbooks, Google Drive, Dropbox, Asana and Zapier.

3. Trello

Trello is one of the best task management tools out there, and it defines basic task management. Trello features a simple, interactive kanban that allows you to quickly drag and drop tasks from one column to another. Its free plan doesn’t limit users, boards or listings — features and services that small and start-up businesses desperately need.


Features:

  • Flexible Kanban mode that stores created tasks as cards, panels, and lists
  • Users can create lists in the cards and vote on the performance of each task
  • The email-to-board feature allows users to transfer their Email directly to panels and cards
  • The ability to assign tasks, attach files, add instructions, and progress lists to each panel that contains tasks
  • Comments with emojis can be added to panels and cards for real-time communication with the rest of the team



Provide integrated software:

  • Google Hangouts, Zapier, Google Calendar and GitHub


Ii. Provide design draft and annotation cutting drawing


Obviously, handing over the design and annotating cutout is the most important part of the delivery process. The product interface that users see in their hands is not the designer’s final rendering, but a separate cut through the development technology. As a bridge between designers and developers, cutting map and annotation play a key role. Appropriate cutting map and accurate annotation position can restore the design of effect map to the maximum extent, and exquisite cutting map and annotation will get twice the result with half the effort.


Of course, there are a number of tools available that can help you solve the problem of manually annotating and dissecting images, but there are a few things to be aware of:


What are the points that need to be marked?


  • Text: font size, color
  • Layout control properties: control width and height, background color, transparency, stroke, and rounded corner size (if any)
  • List: List height, color, spacing, etc
  • Spacing: distance between controls, left and right margins
  • Paragraph: line spacing
  • Global properties: such as navigation bar text size, color, left and right margins, default spacing, etc., if you have worked with developers before, in this aspect of development understanding can be omitted.



When do I need a cut diagram?

  • As long as there is no way to do it in code, you need to slice. What can’t the code do? Like ICONS. If you are not sure, please talk to the developer. Developers usually know what is needed.



How many sets should there be?

  • Theoretically, we need to cut 3 sets of maps for iOS, namely @1x, @2x and @3x, for better adaptation. In actual work, iOS only needs to cut two sets of graphs, which are @2x and @3x respectively.
  • Android, more size, need to slice more, usually MDPI, HDPI, XHDPI, XXHDPI and XXXHDPI and so on.



other

  • Output format: The output format must be PNG24-bit, PNG8-bit, and JPG. PNG is recommended.
  • Even size: The output size of the cut diagram must be even. In the case of singular segmentation, the mobile phone system will automatically stretch the segmentation, resulting in blurred edges of the segmentation elements, and the interface effect of the APP developed is far from the original design effect.
  • In order to reduce the package size, all cut diagrams should be compressed before development. If the picture is too large, it is not good for users to load the page in the process of using the APP. Therefore, the size of the picture file should be reduced as much as possible.


Of course, the above points need to consider, find the right tool will help you to solve the problem. From Sketch, PS and other design tools, upload the design draft to the annotation cutting tool through the plug-in, and immediately automatically generate annotations and download the annotation cutting tool with one click:



Recommended tools:

1. A copy

Copycat is faster and simpler collaborative product design. The main functions are intelligent annotation, one-key cut diagram, diverse annotation, interactive prototype, full picture drawing board, team management, really realize from product to development as long as one document. Here mainly explains its outstanding annotation and cutting graph function.

Features:

  • Support download selected cut map and all cut map; Select all kinds of multiplier, can be downloaded by one key;
  • By selecting, hover and using different shortcut keys, you can switch between four annotation modes: unselected annotation (distance between two layers), inter-layer annotation (distance between two layers), multi-selected annotation (distance between multiple layers) and percentage annotation (percentage value of annotation);
  • Convert units of measure in the Unit Conversion panel; Automatic generation of style code, one-click copy and paste;
  • One feature that surprised me was the magnifying glass function. Holding down the Z key brings up a magnifying glass that allows you to view minute details. If the magnification is insufficient, you can also adjust the magnification by holding down the Z key and using the “+/-” key. In many cases, the notes are very dense and the design elements are very small, so you don’t have to worry about this magnifier function.




  • Switch to layer tree. The layer tree shows all layers and their hierarchies. Click on layers to display them in the Canvas.





Plugin support:

  • Sketch
  • Adobe XD CC
  • Photoshop



2. Zeplin



Features:

  • Support to download selected cut map and all cut map.
  • Double-click any Page in Dashboard to go to Canvas; Click select a layer, mouse Hover to another layer, you can view the annotations between layers;
  • The right panel displays detailed information, including X/Y, width/height, color values, shadows, fonts, text content, etc.
  • You can easily add color values, fonts, etc. to Styleguide by clicking the “+” button.


Plugin support:

  • Sketch
  • Adobe XD CC
  • Figma
  • Photoshop


Third, show the prototype


The interactive prototype is a good illustration of the navigation structure used for the site, as well as the basic user flow, animation and interaction, and internal links of the site. The visibility of this design is not only good for customer understanding, but also for developers when they start building and drawing the site. Tools like Invision and Marvel are great for creating interactive prototypes. Even better, with tools like Adobe XD and Copycat, prototyping is one of the great built-in features that makes it easy for designers to transition from design to prototyping by simply clicking on a TAB.



Recommended tools:

1. Adobe XD

As a leader in design software, Adobe certainly has a pretty sharp tool to match — Adobe XD. This is a simple and easy to use and rapid interaction design, product prototyping software! Can be used for UX, UI design and rapid prototyping. Users can easily create interactive APP interfaces and web prototypes in a short period of time, and easily show their ideas to others.


Features:

  • Switch from Design to Prototype: Drag lines between artboards to add life to your prototype. Create overlay to stack content for a more realistic experience – no need to copy artboards for keyboards, menus, and dialogs. Set fixed positions for the header and footer so that they remain the same as the viewer scrolls.
  • Support for importing other application files. You can directly open files in Adobe Photoshop CC, Illustrator CC, Photoshop, and Sketch in XD. The file is automatically converted to an XD document, leaving the artboard and layers intact.


2. A copy


Just explained the annotation slice map function plate of Copy guest, now let’s talk about its prototype plate.


Features:

  • Switch from Design to Prototype: through the top Tab, you can switch to the prototype section, where you can set the page jump interaction, and quickly create high fidelity interactive prototype. From the design software to upload to the copycat, double click the layer to create an interactive hot area, a variety of animation effects to choose from, but also support gesture interaction, delay automatic jump and other effects.
  • Convenient interactive presentation: click on the presentation icon, you can enter the presentation state. Click on the QR code icon to display the QR code, and scan the QR code to preview the prototype on the phone. You can also send links to people who need to see the prototype, which is very convenient.


4. Hold handover meetings


Coordination and organization between designers and developers is key to project success. In fact, online talk more, not as deep as offline communication. A design and development transition meeting is a good way to do that. At the meeting, we can communicate and discuss, explain the difficult problems, and prepare for the start of product development.



Recommended tools:

PPT (this we all understand, will not elaborate hot)


You can check it out again:

Uncovering – Routine work of senior product manager

Super practical App prototype design tool guide, beginners must see

4 collaborative design tools – Help you build flexible and efficient design teams

Understanding these design principles will help you create the best user experience possible

【 Vomit blood collation 】 Foreign product manager course recommendation, there is always a suitable for you!