Making Magic: Designer and Developer Collaboration

Developers are a designer’s best friend. They make flat PSD files come to life. They add animation and effects to the design that designers dream about. And in most cases, they can make the impossible possible.

Previously, a unicorn — someone who both designs and develops a website — probably would have been a good option for your redesign. These days, there are teams of specialists who are masters of their craft — whether that’s UX/UI design, client side coding or server side development. Having so many specialists on a project can either make for a very successful project or a complete #websitefail.

So, what’s the secret to a successful project? Collaboration between designers and developers. We need to take the time to understand what our colleagues are capable of creating and keep the line of communication open throughout the entire project. Operating in a silo leaves the project up to assumptions, which you should always avoid at all costs.

 

With the emergence of responsive design, there are more technical elements to consider during a project, including performance, image sizes, design patterns, UX, multiple devices sizes, breakpoints and other variables. With that, comes more programs, code and techniques to learn. The good news is, you don’t have to specialize in every area. Most crucial is the ability speak each other’s language. Without this skill, you’ll never be able to communicate your great ideas to someone who can make them work.

 

Tips for Successful Collaboration

• Keep developers in the loop with a complete sitemap and thorough design specs, so the details aren’t lost by the time the project is ready for integration.
• Create a robust style guide for each project, include global patterns and other small, reusable components.
• Make handoff to the development team a breeze by providing clean and organized PSD or Sketch files. Use artboards to set up your mobile and desktop comps side by side.
• Three things to always include in your website comps: grid and margin guides, layer comps to show interactive elements and callouts for specific guidelines using the notes panel.

 

My favorite kind of team is one that collaborates. When there is a strong bridge between the designer and developer, the project is set up for success from the beginning. I prefer to not just have a hand-off meeting, but to work side by side from wireframes through implementation. Whether you’re a designer or the developer, ask questions. Lots of them.

During the website redesign for Enphase Energy, frequent communication and prototyping software allowed us to make sure the UX solutions fit within the budget and timeline of the project. We used InVision to transform our designs into interactive prototypes with animations and gestures, creating a visualization that allowed us to translate our ideas to the developers. In addition to collaborating with the InVision app, the design team met with the developers on a consistent basis and developed a relationship—by launch we worked together like peanut butter and jelly.

“When there is a strong bridge between the designer and developer, the project is set up for success from the beginning.”

If you want to develop this same relationship with your own team, respect each other’s talent and have empathy. “This communication and cross-disciplinary empathy are just as important as the techniques, methods and development frameworks used to take apart a problem.”

Once your team has established this relationship with each other, you can turn your focus to solving the project’s needs. Doing this will allow for a thoughtful, measured approach in understanding the client’s problem and building their website or app with a frictionless user flow and usable interface.

See more of our work here.

 

---

Sources

• Harper, B. (2013, July 19). Closing the Collaboration Gap between Design and Development | Big Nerd Ranch. Retrieved October 30, 2015, from https://www.bignerdranch.com/blog/back-end-development-and-design/
• McConnell, I. (2015, May 8). Designers And Developers: No Longer A House Divided. Retrieved October 29, 2015, from http://www.smashingmagazine.com/2015/05/designers-and-developers-no-longer-a-house-divided
• Schaden, N. (2015, April 7). 5 ways to bridge the designer-developer gap on responsive web projects – InVision Blog. Retrieved October 29, 2015, from http://blog.invisionapp.com/5-ways-to-bridge-the-designer-developer-gap-on-responsive-web-projects
• Treder, M., Riddle, R., & Cao, J. (2015, September 3). Designers Should Design, Coders Should Code. Retrieved October 29, 2015, from http://www.fastcodesign.com/3050675/designers-should-design-coders-should-code