New Tools Help App Designers and Developers Work in Sync

Building apps takes a team. And for a team to be effective they need to work well together. Unfortunately, UI designers and developers often have a hard time communicating with each other since, in some ways, they speak a completely different language.

Because of this disconnect, the application development process typically hits a snag when the time comes to handoff designs. Often, a lack of vital design information needed by developers to complete a project causes a back-and-forth between design and development teams. While not intentional, the lack of communication between the two parties can be frustrating, often extending a project’s hours and cost.

To illustrate how these problems can affect a project, let me share one of my own frustrating experiences. Back in 2014, I was engaged in discussions with a group of designers on icon updates – the conversation lasted one and a half weeks. During this period, different icons were shared with me in a variety of ways – as attachments, via Dropbox, or attached to Jira tickets. 

As a result, I wasted several days attempting to synchronize workflows and pinpointing the correct and latest version of each icon. Two days were wasted on this back and forth process. 

A typical design handoff package can include manually crafted visual specs, pre-generated assets, or even a source graphic file. However, this approach is vulnerable to human error. First, manual static specs often omit crucial information. Second, using source files of the mockup means developers must have the graphic editor installed and assumes some level of familiarity or user know-how. 

These factors often spin off a chain of back and forth communications between design and development teams as they try to figure out key specifications and questions, such as, “How thick is a border on this button?” or “How do I extract a PNG with transparent padding from this PSD?” 

It’s a frustrating back and forth experience for both parties that cuts into valuable time and slows an app’s time to market.  

Getting mobile and web designers and developers to speak the same language is an uphill struggle, but newer collaboration paradigms and tools are now making it possible for them to work in sync, ensure smooth handoffs, quickly communicate and implement changes, and complete development iterations faster. As designers and developers look to more synchronized workflows and streamlined development, here are my picks of feature capabilities that teams should look out for in collaboration tools that can bring the quickest wins:

Integrated Collaboration: Many collaboration tools run independently of the user’s design or development tool of choice, making collaboration more of a headache than it should be. Integration is changing that. Today, collaboration tools can plug-in directly to design and development environments such as Sketch, Photoshop, Android Studio, and Xcode, for more seamless, centralized workflows and access to visual specs, assets, comments, and updates notifications – in one place.

Design Mockup Inspection: Rather than deal with cumbersome manual creation of the design specs or redline documents, immediate value for developers can be gained through the ability to automatically create an interactive visual specification where developers can get sizes, distances, and detailed information on properties of every single design element in platform-specific units.

Automatic Asset Generation: Generating and scaling assets for Android, iOS, and web projects is another challenge. Designers need a way to automatically generate and properly scale these assets in both vector and bitmap formats, whether they are working in Sketch or Photoshop.

A Common Asset Language: Designers don’t always speak in the same asset terms as developers (i.e., naming conventions or code), which can lead to confusion, errors, and even broken builds. By automating asset naming tasks, day-to-day woes can be eliminated. Capabilities such as handling asset name duplicates, exporting hidden assets, and the ability to create asset renaming rules once and then apply them every time the mockup is updated, can streamline this process. It also ensures that designers are more likely to adhere to asset naming requirements for Android projects.

Repeatable Brand Management: Imagine being able to build brand books that allow design teams to set brand guidelines once (colors, text styles, and so on) then share and reapply them to the next project, without reinventing the wheel?

Easy Project Data Sharing: Instead of spinning their wheels trying to find project data in emails, cloud storage, or other environments, designers and developers can benefit from a central hub for project sharing and collaboration that is unique to their needs. One that allows them to make updates, add comments, compare changes visually, and switch between versions, all in one place. Broken workflows and poor lines of communication can quickly become a thing of the past.

Designers and developers shouldn’t have to learn both languages of design and code to be able to work together.

We should be able to do what we do best as a design and development team – be the creators, inventors, and builders that we are. It’s time to focus on making awesome apps, not the routine back and forth between design and engineering teams.