10 Ways to Improve Design Collaboration with Developers

Many modern work cultures separate design and development teams into independent units. During my time working as a designer at a large company, I experienced this first-hand, with these teams acting as separate units on the same project. There was little communication between us: once designs were completed, we digitally passed them to our development team to build without any additional communication. There were no daily discussions, brainstorming across departments, or exchanging of ideas to accompany the handoff.

I observed five main problems that developed as a result:

1. Unnecessary back and forth between design and development departments. Because there was little communication about the designs, we spent a considerable amount of time explaining concepts and clarifying decisions for our development team. 
2. Creativity was suppressed. We knew so little about each other’s domains, meaning there were limited opportunities for building new, creative products or features.
3. Long, complicated QA processes. Specifications were unclear, so QA testing designs took additional time from every member of the team.
4. Duplication of efforts. Even though there were overlapping skills among team members on distinct teams, we couldn’t leverage each other’s skills.
5. An inability to take advantage of new tools for collaboration. Both our teams used antiquated processes and tools, but since we weren’t regularly communicating, we weren’t identifying opportunities for improvement.

It’s not uncommon for design and development teams to be disconnected, even though these roles are integrated into building a single product.  I often found myself thinking there must be a better way. I wondered if it was possible to improve collaboration between these teams,  increasing value to the client or end user? 

Fortunately, there is, and I was lucky enough to experience it in subsequent professional roles. In this article, I’ll explore how understanding each other’s common processes, workflows, and leveraging design collaboration tools can bridge communication gaps and help designers and developers work together.

Where Design Meets Development 

In theory, the product development process itself is actually pretty straightforward. But it often falls apart in the final two steps: Visual Design and Development. Tellingly, it’s at these stages where design meets development. 

I believe this breakdown boils down to three areas:

1. Poor collaboration between designers and developers
2. A lack of detailed design documentation 
3. Confusing or complicated asset creation for developers

Collaboration Between Designers and Developers

Collaboration between design and development teams occurs at two levels: the macro and micro. In design, these terms are defined as follows:

• Macro design: the overall layout and visual design of a product.
• Micro design: the components of a design, such as the forms, page sections, or buttons.

Collaboration at the macro level falls apart primarily because developers are brought in after a design has already been signed off. This means developers aren’t consulted on design feasibility, so technical limitations aren’t addressed until the small details of the design have already been mapped out. This means designs often must be revised or even completely redone after a ton of hours have already gone in, extending the time it takes to launch a product or feature and costing companies money.

At the micro-level, issues are linked to how feedback is collected. It’s not uncommon for stakeholders to provide feedback across multiple channels: Slack, email, and in person. For instance, I used to share my monitor when presenting designs directly to the team. Everyone took notes and I compiled all this feedback into a spec document. I then had to track down comments from the other channels. As a result, the process was slow and cumbersome – not the qualities needed for a productive conversation.

Detailed Design Documentation

In order to make sense of hidden or dynamic aspects of a page, annotations are needed. Beyond these annotations, full specs (the measurements and relative positioning of elements), as well as a style guide, need to be created. 

When creating a spec document, I would create numbered screenshots of each screen. Below these screenshots, I would add a bulleted list with design intentions, user interactions, questions, and nuances. The document also contained the hex codes and typography details (such as font styles, weights, sizes, and character spacing). This was then shared as a package with Photoshop, static PNG, and annotated PDF files. This is a lot of work, especially after several rounds of revisions, after which it must be completed each time!

In theory, this robust package should be sufficient to implement the design, but questions and new considerations would inevitably cause changes. As new screens were introduced and the flow changed, I had to manually update the files. Sometimes the screens wouldn’t be in order anymore, which meant notes were added to the wrong section. In some cases, a comment would be added to the spec file without me knowing. This method left ample room for miscommunication.

Asset Creation for Developers

At the point of handoff, assets must be sized, optimized and exported for the developer to use. Designers follow a specific naming convention in order to easily locate files. While it’s important for indexing files and searchability, the manual work involved means things are prone to error and creates a delivery lag that prevents the developer from providing early feedback. 

The Solution? Implementing a Design Collaboration Process 

The combination of antiquated systems and poor communication between departments leads to design and development teams becoming siloed. Within each team internally, though, there are often solid processes. Clearly, a process for design collaboration that brings designers and developers together is needed. Good design collaboration consists of tools and workflows that are used to go from ideas to products. They use a series of components that can be used and reused to manage designs of any scale. And they help design teams produce more consistent and efficient work while streamlining their collaboration with stakeholders and development teams.

Here’s how you can start implementing better design collaboration: 

1. Choose a Design Collaboration Tool 

Over the last several years, a number of products have been developed to help designers and developers work together. Products like AdobeXD, Sketch, Figma, Zeplin and InVision, to name a few, have latched onto the design system concept and are creating tools that contribute to the collaboration between developers and designers.

While these companies are innovating across the entire design system, I’ll focus on Zeplin and Sketch, as those are the products I use most often. In my experience, Zeplin and Sketch have helped build an open, transparent, and seamless way to exchange information between designers and developers. And it’s a significant step towards making tedious handovers a thing of the past.  

Today, a lot of products that designers and developers use in tandem can now be connected directly. Sketch, a tool for designing digital interfaces and icons, can be connected directly to Zeplin, a tool for developing wireframes and prototypes. This means I can simply click a button to transfer files from Sketch to Zeplin, instead of manually transferring it over. Once my designs are in Zeplin, I simply add my team to move to the next stage. From here, we can share the wireframes and prototypes with stakeholders so they can view, comment, and download assets in seconds. 

Collaboration 

Along with centralized, timestamped feedback, Zeplin has a tag feature which can help remote or distributed teams filter screens on video calls. For example, I typically create ‘Under Review’, ‘Final Approved’ and ‘WIP’ tags, to easily get everyone up to speed on project progress. 

My favorite feature of this design collaboration tool is the ability to comment.  Comments can be placed by anyone, like pins, on a design screen. Similarly, anyone with access can reply to comments to discuss a particular part of the design. This makes it easy to understand what the comment is referencing. 

Documentation & Asset Creation 

Design collaboration tools often have built-in style generators (or plugins) that generate all colors used on each page. This gives the development team quick access to all colors used on each page. Colors can be added to the master style guide by clicking the ‘+’ sign.  Then, Zeplin automatically assigns names to the hex codes, which can simplify verbal communication.

Just as colors are sorted by page, so are assets. Using Sketch, I can quickly export an entire page design containing my sliced assets. Then, once in Zeplin, a developer can download them straight from the screen, SVGs included. If something changes along the way, no problem. Every time I export into Zeplin, the asset attachments will be refreshed to reflect the latest version.

Using Sketch and Zeplin together, I spend less time generating static mocks, creating page styles, naming files and sorting assets. On the development side, they’re no longer left swimming and confused in a sea of documents.

2. Think Responsively for Asset Creation 

When designing a graphic asset, think about how the application will work on devices of all sizes and shapes. Consider typography, relative compositions and how these assets would look on mobile, tablet and desktop. Make sure to optimize each asset for its respective device, considering both load time and visual display.

3. Involve Developers Early in the Design Process 

Even if you’re using tools like Photoshop or Sketch, get developers involved in the designs from the beginning. Having their insight into how things translate to a web application and how to structure pages might lead to the evolution of a different design. And integrating them early on can ensure a seamless transition of design to HTML.

4. Standardize how Design Files are Handed off

The handoff from design to development is crucial. It usually requires designers handing off design files created using Photoshop, Sketch, or another tool and the developer converting those designs into HTML. Here are some tips to improve the handoff: 

• Optimize design files for development. 
  • When handing off a design file, label every single layer.
  • Group layers based on sections on the page.
  • Use smart objects/layers within Photoshop. They help create layer groups easily for different sections within the website that developers can easily use by double clicking on the layer that opens into a new tab.
  • Use color coding to indicate hover states, click states, and other interactive elements.

5. Walk Through Designs with your Development Team During Handoff

Once you have completed a design, have an initial call with the developers to review the design. It might seem redundant at first but it helps you cover minute details that might be missed once development starts.

6. Implement Effective Developer Handoffs 

Issues like incorrect font spacing or unaligned images are common and tend to require design teams to become involved again in the QA process. Here are a few things that developers can do before the designs are thrown into QA. 

• Take full-page screen captures: I use a handy chrome plugin to take full page screen caps (it will scroll the full height of the page.).
• Use annotation tools: Here’s another place where using tools like Zeplin that have an annotation feature helps. You can add notes and information to designs and it can be used to notate design discrepancies with a visual reference.

If you’re interested in exploring other tools like Figma or AdobeXD for developer handoff, here’s a list of top developer handoff software. 

7. Create Space for Open Communication  

Have an open culture for easy communication between design and development. Everyone should be able to reach out to anyone within your organization for easy information flow. Here are some things I’ve found effective in the past and with current clients:

• Designers, join in on the daily scrum. This is a great way to understand the bigger picture, stay creative and think of end users while creating designs.
• Use Slack: Slack is great for file sharing, sending screenshots and being available for the development team.

8. Learn the Common Terminology and Processes for Each Other’s Teams

As a designer, I feel I’ve grown as I’ve learned about front-end web development. Being able to speak the same language as my developer team, understand what’s important to them, and getting to know their processes have greatly aided my ability to communicate effectively with them and streamline our collaboration process. Similarly, I appreciate it when developers have knowledge of my domain. Here are some pointers for how designers and developers can expand their knowledge of each other’s fields:

For designers:

• Learning the basics of coding can help you see and understand your designs in the big picture. Here are some great resources to get started: Intro to Web Development, Making a website, 30 days to learn HTML & CSS, Intro to HTML & CSS.
• A great resource to help designers streamline collaboration with developers is: Working with Developers (5 Tips for Designers) | Design workflow tutorial

For developers:

• Learning some basics of design theory (such as color theory, whitespace, vertical rhythm, etc.) is a good starting point. Being able to interpret the designer’s intention can be key to correctly implementing the design into code. Here’s a helpful resource to learn more: https://ishadeed.com/article/compare-design-to-code-result/
• Work on the details. One of the most desirable qualities for a front-end developer is attention to detail. Practice by comparing your HTML side by side with the design, and try and spot the differences.

9. Build Product Teams Instead of Functional Teams 

I have seen large companies break teams down by function rather than by products. Imagine a team of 15-20 UI/UX designers, developers, user experience specialists and QA teams on different floors of a building. This setup doesn’t exactly make for an environment rich in collaboration and seamless knowledge transfer. Instead, organizations should break teams down into individuals working together on a product and encourage them to work together. If your company has teams distributed across the globe, they can create dedicated communication channels (e.g. on Slack) and virtual meetups for teams.

Are you looking to hire a UI/UX Designer? Look through our network of top pre-vetted designers. 

10. Follow and Share the Latest Design Trends 

It’s important to stay in sync with current design trends if you want to keep up with the times. Share interesting articles on design, designs you find fascinating or just beautiful designs with your team. For developers, being up on the latest design trends and methods of implementation makes you exponentially more valuable. Some resources that I go to for inspiration include  Design Shack and Codrops. 

Final Thoughts

Smooth collaboration between designers and developers on any project is critical for creating a successful product. If your organization hasn’t already kicked off their design collaboration strategy, now’s the time. To help get you started, this roadmap should provide some guidance in implementing structure and processes for your digital workplace to bridge the geographic or functional boundaries that may exist across teams in your company.

Having a good system in place will also allow design and development teams to focus their efforts on solving the real challenge: building a deeper understanding of the end user and designing a product that not only solves problems but creates a unique and personal experience.