from our blog

The Right Way To Handing Over UI-UX Designs To Developers

Posted by Simranjeet Singh

Web design and management, Website Development, Web Design, web development, Development

Communication between two people, two teams, and two companies is good when both the parties understand the content, context, and interpretations of each other’s messages.

 

For an IT agency, good communication is imperative between the same team members, seniors and their subordinates and between different teams as well. Designing and development teams are the ones that usually work hand-in-hand and back and forth for projects. So, good communication between these teams is one of the pillars that make the project a success. 

 

While designers work independently to accomplish the client’s designing requirements, their work is a stepping stone for the developers. Handing over the designs to the development team in the right way reduces the time consumed in repeat back-and-forth communication. It ensures the efficient and timely delivery of the project. 

Let’s Touch and Treat The UI/UX Design Handoff Topics 

What is the best way to package up designs and send them to developers? 

There are more than one perfect ways to prepare a design handoff for the developers. The idea is to make two teams communicate well. Their method doesn’t have to be universally acceptable. But, some general rules that are tried and tested in the industry are a good way to begin. 

Checklist 

Developers or project managers maintain a checklist for the designers to tick all the boxes. This makes sure that nothing gets missed or skipped in the process. Knowing that you have everything allows you to focus on arranging assets in the flow.  

Arranging the Assets 

Each website page has its set of functionalities, assets, and mockups. Each page is connected to other pages through functionalities implemented on CTA buttons, ‘read more’ text or a menu item. See the connection between the functionalities, assets, and workflow. And, if the entire page elements are not systematically arranged for the development team, it creates confusion for them. A lot of time is spent in back and forth communication with the designing team in knowing what’s what and where’s where. 

The Flow 

Sharing static mockups are good for single page websites. But, when dealing with multiple pages, sharing random page mockups without the flow is incomplete sharing. The developers should have the clarity on the connection between the pages. A collection of independent screens doesn’t do a good job. 

Use Automation Tools 

Using automation tools to align the company’s in-house processes is a wise choice. It may take some time for the new members to learn the tool. However, with time, even the difficult-to-use tools become easy with continuous usage. Using tools to automate the UI/UX design handoff process saves a lot of time. The tools ease the work for both the teams. Some of these tools are; Webflow, UXPin, Avocode, Savah among others.

Be Detailed 

If the designs contain a complex function and visual effects that cannot be described through an asset, then be as detailed as you can for those effects. Share a GIF file for reference if you find a relevant one. 

Remove The Clutter

Designers build multiple versions for one page. They should send the finalized mockup design. Don’t leave the room for ‘if’ for the developers. Send them only those assets that are used on the page. Giving them options to choose and allowing them to decide will be time-consuming. 

Naming the File 

Home page final 1, Home Page Final 1-1, Home Page Final Last – a designer’s design walks through many file names until it is handed over to the development team. Designers should name the file name correctly for easy understanding. 

 

Does it matter what design tool a designer uses? What's the difference between using Figma, Sketch, Photoshop, XD? 

 

Out of all the features the designing tools offer, the developers use the limited ones that are relevant to their task to covert the page design into HTML CSS. Yet, they have their preferences based on the ease of use and what they expect from the UI/UX designing tool. 

  • Figma is OS friendly as it is available for Mac, Windows, and Linux. The sketch is available for Mac and Adobe XD is available for Windows 10 and Mac. 
  • Figma and Sketch do offer code export and sharing, however, Adobe XD doesn’t. 
  • Comments on the design for details are pinned on the design itself in Figma, on the preview in Sketch as well as in Adobe XD.  
  • In all the tools PNG, SVG, JPG and other various file types are exported. 
  • Prototyping is integrated with Figma and Adobe XD, but not with Sketch. 

Let us know in the comment section, what’s the most important thing you keep in mind in the design handoff process?

 

Computan has 20+ years of experience as web developers

Simranjeet Singh

Written by Simranjeet Singh

Writer | HubSpot Certified Inbound Marketer and Content Marketer