Connect

Case Study Article

4 Tips to improve communication between designers and developers

There’s always been this separation in the website design business — designers vs. developers. But why?

The line between design and development is getting less clear every day. More designers have development skills and more developers are becoming well-versed in design.

And it means that the lines of communication between the two are wide open. Here’s how to ensure that both sides of the website project are working together effectively to ensure the best possible projects.

1. Start with empathy for one another

The ability to understand and share the feelings of others is the definition of empathy. Empathy is being able to put yourself in another person’s shoes.

Empathy is something creative teams talk about quite a bit:

  • Empathy for users
  • Empathy for clients
  • Communicating that empathy with the design

But creative teams seem to forget to apply this concept when working together. It’s very much the same thing.

For creative managers and art directors

Create a workplace culture where open question and answer is commonplace, non-confrontational and accepted. Everyone in creative meetings should feel like they can speak up, offer suggestions and will be heard. Finally, remember to invite and include designers and developers in meetings throughout the process; an inclusive culture starts with you!

For designers

Stop to think about what the development process is like. Think about the coding you do know and understand, try to speak the language with developers as much as possible and understand limitations from their perspective. (Don’t know anything about coding? Try Code Academy, which comes with easy to use tools that can help you learn the basics starting today.)

Then make sure to actually include developers in the design conversation. There’s nothing worse than having a project handed to you that you know nothing about. A developer who knows the problem you want to solve with design will be a better partner in finding a solution. And they might have ideas you did not even know were possible.

For developers

Just as designers should learn a little code to make speaking the language of development easier, developers should learn a little design theory. A basic understanding of concepts surrounding color and space, plus a few trends, can keep the conversation flowing. It also helps if you can get through talking about x-heights and tails without your head spinning.

The good news is that there’s plenty of information available. Pick a design blog or two and make a point to read an article each week. (Some of our favorites include Design Shack, Web Designer Depot and Designmodo.)

2. Make the job easy for each other

While talking about the process from the beginning of projects is vital, communication needs to continue throughout the life of the project. There are plenty of tools to help facilitate this process.

You can also help each other with good file management throughout the design and development process. Have a conversation about what files types, formats and other deliverables will change hands. Both designers and developers should be explicit in their needs. (You might even find that some of the documentation you are providing is unnecessary.)

Here are a few tips to help you start the conversation:

  • Organize and name assets using a common format and develop a standard file naming convention.
  • Create and share smaller elements individually, rather than single files that have to be changed for different uses.
  • Organize elements into component sets and you will start seeing patterns that can be added to a pattern library or style guide. Smaller components can also be used in larger components. Identifying and naming these elements and components together helps define a common vocabulary that your whole team will understand.
  • Annotate all of your deliverables.
  • Share a Dropbox or Google Drive folder with subfolders that contain specs, screens, and assets.
  • Be consistent with with how you group and name files. And be tidy. Remove outdated versions of assets and only include final, approved versions.
  • Images should be exported in all sizes needed and in the right format.
  • Send the developer a prototype to help communicate motion and interactions if needed.
  • List all key details including all fonts and colors (hex codes please!) as well as margin and padding requirements.

3. Don’t work in silos

While you may have gotten away with it in the past, you can’t work in a silo.

Designers and developers should work side by side as much as possible. In physical locations, their desks should be in close proximity to encourage communication. This allows for informal conversations to happen spontaneously.

If you work remotely, keep Google Hangouts, Skype or Slack ready and available for chatting during projects and working hours.

Make a point to hold regular design reviews so that the entire team can take a look at the progress of projects and talk about the design and UX. Invite designers and developers to brainstorm and try to keep meetings frequent, but short, to encourage participation. Regardless of the topic or project progress, include designers and developers at every meeting throughout the duration of the project.

4. Be open-minded

Stop talking negatively about other designers or developers. Just because you don’t agree with an aesthetic choice or fully grasp a UX concept, doesn’t mean it is wrong. Take a more open approach to the process and stop to really think about things before making judgement.

For some people this process is easy. For others, it can require a little more work. Here are five things you can do daily to help yourself be a little more open-minded throughout the design process (and in life in general):

  1. Stimulate your eyes with new things. Look at art or design or objects that you wouldn’t normally see. Think about why they “work.”
  2. Make a point to learn something new. Pick a learning adventure that relates to the group you want to better connect with.
  3. Listen. Listen. Listen.
  4. Don’t say no or protest something without an alternative solution. (You might find this tougher than you expect.)
  5. Stay focused on problems and solutions throughout the design process, not a tally of who did what.

Conclusion

The key to communication at any level starts with listening and a collaborative approach. If you find this to be a problem in your workflow, step back and tackle this issue just like a design dilemma: What is the problem? Then you can work toward a solution.

Great communication starts face to face, but in today’s world with team members coming from virtually anywhere, a good set of tools can help. Hop over and take a look at our guide to all the tools you need to make communication between designers and developers even easier.