For several years now at Convertus, I have led a team of designers in working closely with a number of developers with a goal in ensuring a smooth hand-off process when developing our website products, internal workflow, and client-specific custom projects. I am often surprised by the amount of recurring issues that seem to pop-up, such as the interactions behind certain buttons / transitions between mockups, to the lack of clarity between how colours / font are supposed to be used from one element compared to another.
One thing I've come to understood with certainty is that communicating with developers is a completely different experience than communicating with project managers, salespeople or with support personnels. There were days where I felt like the developers just did not seem to understand what I was trying to convey no matter how I phrased it; whereas other days, we were completely in sync and I wondered if they have secretly gained the ability to read my mind with 100% accuracy (which obviously would be fantastic -- not that it would ever happen... in the near future).
Communicating with developers is a skill that I have been working on for the past 5 years and I have discovered some useful tips & tricks along the way. Keep in mind - these works for me as a designer, but it may not be for everyone! So if you have some tips & tricks below that you have found useful yourself, let me know in the comments below!
1) Don't Just Communicate -- Collaborate!
Communicating verbally with developers is so important because everyone will see things differently based on their past experiences or personal preferences. But more importantly, designers & developers have different talents and strengths which causes them to view the same situation in completely different ways.
I always make an effort to encourage open collaborations with developers so I can gain a better understanding of the project and see things from their point of view. There may be elements of a project that I think could be easily implemented, but may not be possible due to certain technical constraints from the other team that I don’t know about. Open communication will allow the project to run more smoothly, and more importantly, the developers will feel much more intrinsically motivated to complete the task because they feel that they have taken ownership over the project!
2) Show It Off with a Mockup
Depending on where your current workflow is on the project - maybe you have an actual mockup, or a wireframe, or even just a series of drawings that you've used to jot your ideas down on paper - having something is better than nothing! Developers love visuals and a general foundation to bounce off on, compared to hearing the standard "I think this idea would be cool so let's do it."
For those who aren't as familiar: Sketch is a design software for UI designers that focuses on interface and icon design and has features that help enhance the overall design process. Zeplin is a tool for UI designers and developers; it allows designers to upload designs directly from Sketch and add them to project folders in Zeplin. And because annotations are added automatically to the designs, you have one online location that the entire team can contribute to.
3) Get Real-Time & On-Page Feedback
When I have my full website mockup ready designed in my Sketch Application - I also use the Invision App, which is a prototyping tool that allows for real-time collaboration for teams. Invision App is very intuitive to use and allows designers to version control their mockups in real-time quickly.
Just in case you're wondering: It's different from Zeplin in that I use Invision App for more of the real-time on-page feedback portion of our discussions, whereas Zeplin is for when the design elements have been approved and confirmed by the clients, and I am passing off the design using Zeplin to the developers so that they can easily select the element out of the mockup directly.
Because Invision App allows developers to see what the end result will look like, they have a better idea of what the end goal is. It also allows them to add in tooltips and comment boxes for any questions they may have. And it makes the designers’ lives easier by letting us answer their questions directly over the mockup.
4) It's All About Patience & Continuous Improvements
Whenever a developer comes back to me and says something isn’t feasible, the temptation to become frustrated and is strong. Over time I have found that the best way to handle the situation is by simply asking that they explain the reason why. This ties in to communication – once I am able to see things from their perspective we will be able to work together more effectively. It is also a learning process for me, because once I understand why certain things won’t work, I can learn from that and use the information going forward.
I have also found that as a designer, it is important for me to constantly stay on top of current industry trends. I need to constantly be improving myself so I am familiar with new tools being used or innovations for new features that could benefits my projects. I can’t be of use to anyone if I’m not constantly improving my own skills and knowledge.
This collaboration between designers and developers is so important for creating beautiful, functional designs. If the two sides can’t find a way to come together and combine their skillsets, the end result will lack efficiency and value. And while one side can often get frustrated at the other (and they often do), talking it through & using a number of visual tools to explain the scenario really does help make things that much more effective.
When designers and developers are able to effectively work together to accomplish their projects, they can create an incredible user experience that will far outweigh any frustration or difficulties felt during the process. Both jobs require a lot of skill and hard work and combining the abilities of both teams is where the true magic happens.
Thanks for reading! If you have some tips & tricks below that you have found useful yourself in keeping it cool & communicative between designers & developers, let me know in the comments below.