How to Achieve Perfect Designer-to-Developer Handoff by Tools

Design handoff is necessary in a workflow. This article teaches you how to use tools to help complete the perfect designer-to-developer handoff .

Design handoff is a necessary component of workflow for UI designers, and it effects the final implementation of the interface. What are the necessary steps to achieve the most effective designer-to-developer handoff?

This article teaches you the most effective process and demonstrates how to use tools to help complete the perfect handoff from design to development.

Handoff project

Project switching and handover should be at the forefront of your workflow process. Task management tools ensure that the product team’s workflow is organized and efficient. An effective management tool will assist in the following:

• Unify the workflow of the entire team and enable everyone to communicate on a unified platform.
• Maintain and monitor multiple tasks and processes of the team in just a few clicks.
• Effective, automated time tracking of all team members.
• Create a central node for document storage, sharing, and retrieval.
• Save time by automating the updating and coordinating of project schedules.
• Arrange and participate in virtual meetings anywhere in the world.

Recommended management tools:

1. Droptask

With an endorsement of world-renowned brands such as Harvard University, Coca-Cola, and Disney, Droptask gives users a flexible and easy-to-use task management framework. It utilizes the familiar Venn diagram and allows for customization on color. It has the shortest learning curve compared to other task management software.

Features:

• Workflow view with guided views and individual tasks.
• Capability of adding notes, assignees, tags, lists, reminders, and attachments to each task.
• Use the slide bar to select and manage task urgency, priority, progress, and workload.
• Access and view task history whenever you need it.
• You can create a separate category or project and use the drag operation to reposition the task elsewhere.
• Monitor and manage task notifications for each member.
• It can be Integrated with Dropbox, Google Calendar, Outlook, and Google Drive.

2. ActiveCollab

ActiveCollab is another powerful tool for small teams and general businesses to manage and organize workflow. It has been deeply involved in this field for ten years. With its ease of use and flexibility, it is widely used by many academic institutions and government organizations.

It can manage all aspects of a project, including: time tracking, team collaboration, or product pricing.

Features:

• Ability to create and organize tasks on a single panel and filter by due date, label or assigned person.
• Assign assignees, add reminders, notes, and files for each task for team sharing.
• Combine various tasks in a Gantt chart, column view, or list view.
• Synchronize calendars with tasks for specific events.
• Use a stopwatch to track the total work time spent on a task.
• Generate a report for the number of tasks in progress
• Fully integrates with Slack, Quickbooks, Google Drive, Dropbox, Asana, and Zapier.

3. Trello

As one of the best task management tools, Trello handles a variety of basic management tasks. Trello’s unique features include its interactive, simple Kanban that allows you to quickly drag tasks from one column to another. Its free plan has no limit on the number of users, the number of boards, or the number of listings, all of which are features and services that small businesses and start-ups need.

Features:

• Flexible kanban mode for storing created tasks in the form of cards, panels and lists.
• Users can create various lists and vote for the performance of each task.
• Email-to-board feature that allows users to convert their email directly to panels and cards.
• Ability to assign tasks, attach files, add notes, and schedule to each panel that contains tasks.
• Add comments with emoticons to panels and cards to communicate with other members of the team in real time.
• Fully integrates with Google Hangouts, Zapier, Google Calendar, and GitHub.

Handoff designs with specs and assets

Obviously, handing over designs and marking assets is the most important part of the entire delivery process. The product interface seen by the user is not the designer’s final rendering; a separate cut image is implemented through additional development techniques. Critical is cut and label as a bridge between designers and developers; the appropriate cut map and accurate label position can maximize a design

Of course, there are a lot of tools for automatic ‘specing’ and cutting, which can alleviate the problem of manual labeling and cutting, but there are some points to consider:

What needs to be marked?

• Text: font size, color
• Layout control properties: control height, background color, transparency, stroke and fillet size (if there are rounded corners)
• List: height, color, spacing of content, etc.
• Spacing: distance between controls, left and right margins
• Paragraph: line spacing
• Global attributes: such as navigation bar text size, color, left and right margins, default spacing, etc.

When do you need assets?

• You need to provide assets if there is no way to achieve the desired design through code, such as icons. When in doubt, communicate with the developers. Generally developers will know what is needed.

How many sets should I cut?

• In theory, when working with iOS, we need to cut 3 sets of assets, @1x, @2x and @3x, in order to ensure better fit; in actual work, iOS only needs 2 sets of assets, respectively: @ 2x and @3x.
• With Android, the variety in sizes is greater and you need to slice more, usually MDPI, HDPI, XHDPI, XXHDPI and XXXHDPI.

Other

• Output format: The cut output format must be png24, png8, jpg 3 formats. PNG is recommended.
• The size is even: the cut output size must be kept even. In the case of a singular cut, a mobile phone interface will automatically stretch the cut image, resulting in blurred edges of the cut elements, a negative deviation from the original design.
• In order to reduce the size of the package, all the cut charts should be compressed as much as possible before being developed. A bigger picture size is not conducive to the fast loading time, so the image cut should try to compress the size of the image file as much as possible.

With the right tools, these issues and considerations can be resolved with ease. With design tools like Sketch and PS, you can easily upload the design draft to the annotation cut-out tool through the plug-in, and with one click, automatically generate the annotation and download the cut-out.

Recommended handoff design tools:

1. Mockplus iDoc

Mockplus iDoc is a faster and simpler collaboration design tool. The main functions are smart annotation, one-click cutting, multiple annotations, interactive prototyping, full-featured drawing board, and team management. It truly implements a document across the full workflow cycle, from product to development.

Features of its excellent annotation and cutting functions include:

• It supports downloading and selecting all assets; you can select various assets, which can be downloaded with one click;
• You can switch between four specs modes by selecting, hovering, or using different shortcut keys: unselected specs(distance between two layers), inter-layer specs (interval between two layers), multi-selected specs (multiple distance between layers), percentage specs (the percentage values of specs);
• The unit of measure can be converted in the Unit Conversion panel; the style code is automatically generated and can be copied and pasted with one click;
• One of the features that surprised me was the magnifying glass feature. Hold down the ‘z’ button and a magnifying glass will pop up to see tiny details. If the magnification is not enough, you can adjust the magnification by using the “+/-” key while holding down the ‘z’ button. Many times the labels are dense and the design elements are very small, and therefore there is no need to use this magnifying glass function.

• Switch to the layer tree. The layer tree shows the hierarchical relationship of all layers. Click on the layer to display it in the Canvas.

Fully Integrates with:

• Sketch
• Adobe XD CC
• Photoshop

2. Zeplin

A seasoned cutting and ‘specing’ tool.

Features:

• Support for downloading ‘all’ or selected assets.
• Double-click on any page in the Dashboard to enter the Canvas; click to select a layer, mouse over to another layer, then you can view the specs between the layers;
• The right panel shows detailed information, including X/Y, width/height, color values, shadows, fonts, text content, etc.
• Convenient add color values, fonts, etc. to the Styleguide by clicking the “+” button.

Fully Integrates with:

• Sketch
• Adobe XD CC
• Figma
• Photoshop

Interactive prototype

Interactive prototyping can illustrate the navigation structure, basic user processes, animations, interactions, and internal links of a website. Prototyping not only helps the customer understand the design, it also assists developers when they start building the website.

Tools like Invision and Marvel can create interactive prototypes very well. Even better, Adobe XD and Mockplus iDoc have built-in prototyping features to assist designers in transitioning their designs to prototypes by simply clicking on a tab.

Recommended Interavtive prototyping tools:

1. Adobe XD

As a leader in the field of design software, Adobe certainly has a very sharp tool to compete with — Adobe XD. This is an easy to use and fast interactive design and prototyping software application. It can be used for UX, UI design, and rapid prototyping. Users can easily create interactive APP interfaces, web page prototypes, and present design ideas to others in a short period of time.

Features:

• Switch from design to prototype: Drag lines between the artboards to add vitality to the prototype. Create overlays to stack content for a more realistic experience — no need to copy artboards for keyboards, menus, and dialog boxes. Set a fixed position for the header and footer so that the position of the header and footer remains the same as the viewer scrolls.
• Support for importing other application files. You can open files in Adobe Photoshop CC, Illustrator CC, Photoshop, and Sketch directly in XD. The file will be automatically converted to an XD document, and the artboard and layers will remain intact.

2. Mockplus iDoc

Above, I explained the assets and specs function section of Mockplus iDoc. Now let’s talk about its prototype section.

Features:

• Switch from design to prototype: Switch to the prototype section with the top tab, where you can set up page jump interactions and quickly create high-fidelity interactive prototypes. Upload from the design software to iDoc, double-click the layer to create an interactive hot zone, choose from a variety of animation effects, support gesture interaction, and delay automatic jump and other effects.
• Convenient interactive presentation: Click on the demo icon to enter the demo state. Click the QR code icon to display the QR code and use your phone to scan the QR code to preview the prototype on your phone. It’s also very convenient to send a link to someone who needs to see the prototype.

Hold a handover meeting

Coordination and organization between designers and developers is key to the success of the project. A design and development handover meeting is an essential strategy for successful implementation.

A successful handover meeting should address any difficulties or issues with the design, as well as prepare everyone involved in the start-up phase of product development.