The best tips for collaboration between designers and developers

The best tips for collaboration between designers and developers

Joanne Amos's Layout avatar

Designers and developers can be a match made in heaven. When working together effectively, they can literally change the world.

So why is it that most projects start with design and end with development? This process causes a massive disconnect, with designers handing over their precious designs, then anxiously waiting to see if developers interpret them as intended.

It shouldn’t be this way. Designers and developers are on the same team; they simply have different roles, skillsets, and strengths.

“If you want to make successful websites, you need to work collaboratively, not competitively. ”

The importance of collaboration

To take a project from basic idea to outstanding product, designers and developers need to work in sync, with close collaboration and clear communication throughout.

At the end of the day, we’re all in this together. So guessing, assuming, arguing, finger pointing, and rolling eyes at each other will only result in friction, which ultimately spills over into a substandard product.

It’s easy to blame the other “side” when things don’t turn out as expected, but it’s important to remember that designers and developers each have their own talents and different ways of viewing things. Therefore, what may be obvious to one could be an alien concept to the other.

Collaboration is a learned skill, and it’s one that must be mastered if your web team wants to fulfill its potential.

Here are my best tips for better designer-developer collaboration:

  1. Work together from the outset
  2. Develop standards for collaboration
  3. Embrace open, respectful conversation
  4. Create prototypes

1. Work together from the outset

In a traditional web design process, the designer takes care of the initial phases of a project – researching, analyzing, and creating prototypes – leaving developers in the dark until the designs are pinged over to their desk and they’re given their instructions. 

This process is filled with problems. Designers may have dreamed up a magnificent design, only to find out that it’s difficult, time-consuming, or downright impossible to implement. Meanwhile, developers will feel disconnected from the project, as they won’t have a full understanding of the reasons behind it.

If developers are invited into the design huddle from the outset, they’ll understand the problems the product is aiming to solve and gain an appreciation of the user’s needs. They’ll also be able to validate designs and uncover technical considerations that could cause issues further down the line.

In other words, if designers and developers work together on a project from its inception, there’s less chance of poor or unworkable designs, a higher chance of satisfaction for the end user, and plenty of room for creative solutions.

2. Develop standards

When designers and developers have the appropriate knowledge and correct tools for a job, they can get things done quickly. But all too often, time is wasted on discussing logistics.

Flywheel’s front-end developer, Josh, and our design intern, Rese, sit side-by-side!

For example, deciding on a WordPress plugin that has the power to pull together design considerations with technical constraints can cause considerable discussion. Once you’ve agreed on something, however, it makes perfect sense to adopt that plugin as standard on other similar projects, unless it’s unsuitable for logistical reasons. 

The same can be true of naming conventions, sizes, grids, margins, etc. By standardizing your systems and processes, everybody will know what’s expected of them, you won’t get bogged down in sweating the small stuff, and you’ll have more time to focus on creating a product that works for everybody.

3. Open, respectful communication

Frequent, open communication is essential if you want your project to be successful. And I’m not talking about banging off a load of emails throughout the day.

Emails are great for some things – providing a written summary of a discussion, for example. But they can also be problematic. It’s easy to skim an email to get an overall impression of its contents, especially when you’re flat out on a project and your inbox is overloaded. But it’s equally easy to miss something important, or get the wrong impression thanks to somebody’s tone or style of writing. This is especially true for designers and developers, as they’re often arriving at a situation from different expectations, conflicting viewpoints, and speaking a different language.

Emails often create an illusion of communication, but this is a mere mirage. All members of your project team should communicate regularly, either in person, on the phone, or via video conferencing, to ensure nothing gets lost in translation. Communicate with respect and empathy, actively seek feedback, and bounce ideas off each other. This creates an environment of trust and a platform for creativity.

4. Create prototypes

As the old adage goes, showing is better than telling. But experiencing trumps them both.

Start prototyping as early as possible on a project. For a start, it helps the client to better understand your ideas and means you can start user testing. But more importantly, it eliminates misinterpretation and shows developers exactly how you envision the product to work. Because developers speak the language of interaction, it’s easier for them to map out how the product should be built. It also cements the designer-developer collaboration from an early stage, highlighting the single goal that everybody is working towards.

“Designers and developers that collaborate closely from the outset and communicate openly are much more likely to develop outstanding websites. ”

Keep reading: Why you should include your developer in your design process

The internet is abuzz with discussion about why designers should learn to code, or at least be aware of the basics of web development. If designers know a thing or two about web development, they can better understand how their design will look when it’s finalized and coded in a template. Maybe that odd widget area in the footer needs some extra padding in order to fully work with your responsive design, after all?

That’s just one of the reasons you should include your developer in your design process. For more collaboration tips, download this free guide!

What tips do you have to ensure better collaboration between designers and developers? Can you add anything to our list? Join in the conversation below.

This article was originally published 11-28-2017. It was last updated 5-30-2019.

Comments (1 )

  1. Regiane Folter

    May 29, 2018

    I like your positive outlook about the collaboration between designers and developers - and I agree that together we could change the world! Thanks for sharing these tips. Recently, a group of colleagues just published an article about this subject. It was based on an experience with a project in which we designed & developed a mobile app. If you want to read the story, it's available here:

Join the discussion