Jul 19 2013

Closing the Collaboration Gap between Design and Development

We’ve taught our mobile design classes all over the world this year, and one question that we’ve continually heard is, “How can designers and developers collaborate effectively?” There’s a gap between designers and developers who create mobile apps together, and while I don’t have a simple solution, I do have some thoughts on closing that gap (or at least bridging it).

The problem

First, let’s start by saying that designers are totally dependent on developers to bring their designs to life. On our own, most of us are skilled at creating static mockups and a mildly-interactive prototype with some animation if we’re lucky. But that’s not a shippable app. Nobody wants to spend their time or money on that. So we need a developer to translate our design ideas into code that mobile devices can understand and execute for users around the world.

How do designers typically communicate those ideas to developers? We send a hairball of wireframes, comps, and documentation over the gap to developers on the other side. As development begins, there are inevitably unforeseen changes that must be made and the hairball is held together with emergency meetings and patchwork documentation. Hopefully by the end of development, it still resembles the designer’s intent.

The process above may seem terrible, but it’s very common. As the gap between designers and developers grows, designs are misinterpreted, compromised or lost. So how do we close the gap? Obviously, if all designers knew how to code and all developers knew how to design, there would be no gap. But that’s not realistic at this point. Instead, I believe effective communication can help.

Know your audience

Designers who don’t communicate with developers are asking for their work to be lost in the gap. Additionally, designers should know the constraints of the platform they’re designing for. Knowing what is easy and hard to do from a development perspective is important. You don’t want developers to resent your ideas for being unfeasible or unnecessarily difficult. Basically, demonstrating empathy to your colleagues as well as your users can result in better mobile apps.

Tools that improve the process

Effective communication closes the gap to a much more manageable distance, but I think we’ll see some changes to how mobile apps are made in the near future that will help even more. Like web designers, mobile app designers will benefit from being able to directly manipulate the presentation layer of an app without affecting the content. Brent Simmons experimented with a system he calls DB5 while creating Vesper, which gave his designers the ability to tweak and test the design on their own. I imagine it saved countless hours of dreaded documentation creation and redundant work between Photoshop and the actual codebase.

The gap between design and development is still a huge issue in software development. We’ve shared some strategies that we find helpful at Big Nerd Ranch, and our hopes for the future. What are you doing to close the gap?

2 Comments

  1. Chrystian

    Evolve and do both. Why? because both the developer and the designer have definitive ideas and none is more important than the other. If you hire both, conflict is inevitable.. sooner than later, similar to having two decision making bosses. This is because both the designer and the developer want their personal ideas to be integrated into the App’s final stage. For the designer is easy to say I want this or that.. and for the developer you don’t want to go through all the code work just to satisfy another person idea (you’ll have to pay a lot of money for that because your taking away the developers creativity and most developers depend on that creativity to flourish and succeed, not to mention it deteriorates if not used continuously).

Leave a Comment

Join the discussion. Do not worry, your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>