Speaking as a designer, one of the major issues faced in taking a product live, is ensuring that the developer output matches the designs that were created! Too many designers would be familiar with the issue of creating an unforgettable UI, only for the final developed output to look miles apart from their creation!
However, my dear designers, it need not be like this! In fact, some of the best designs we’ve produced have come from a strong sense of collaboration between design and development teams! In this piece, I’ll break down some tactics we’ve utilized in the past to ensure communication between both parties stays smooth, and that designs appear in users’ hands the same way we intended.
Strive for Pixel-Perfection
One of the major factors which can influence the success of your designs, when handing them over to a development team is being as specific as possible when it comes to dimensions, and beyond! Informing them of the gap between elements, pixel-perfect alignment, and exact measurements for borders can be the difference between an accurate final product, and a perfect one. The best part is, that most software used by designers, be it Figma, Sketch, or XD features this capability built in, allowing you to pass these dimensions on to developers with minimum hassle.
Communication is King!
Don’t hesitate to set up reviews, and iterative discussions with the development team. After all, it’s unlikely that your design gets translated into perfection on the first try alone. For this reason, it’s effective to have development review cycles, in a similar fashion to design reviews, with iterations on previous flows, and development in newer ones moving in parallel. Not only will this ensure more logical consistency between designs and the final product, but also that the team won’t be overwhelmed by feedback at once, since it’s rolled out in a more organized fashion.
Demonstrate Complex Interactions
Should there be any complicated, or long-winded interactions, or animations involved with your design, it’s best to walk the development team through it, rather than merely leaving an example. This will allow you to provide additional insight, such as motivations, and end goals, allowing the dev team to more effectively understand its place in the overall design.
Know Your Code
Recognizing and understanding what code your developers will be utilizing can give you an insight into what the final product will look like. As a designer, a great activity could be to understand the code before the design process has even begun, allowing you to make insightful decisions as to what could play well in the design, and what would be difficult to translate overall.
Understand the Platform
Something which is oftentimes overlooked by designers, but goes a long way in translating designs to users’ hands is understanding the platform in question. Recognizing the strengths and limitations of the platform early on in the design process can lead teams to ideate more realistic concepts for the project. Furthermore,
Conclusion
All told, designers can take simple steps to ensure that their development partners are given an easy time. Not only does this build a stronger relationship for future projects together, but also allows for some information exchange to take place. With developers gaining more knowledge about design, and the designers getting an insight into code and development, it’s a mutually beneficial process, which can be smoothened by taking the steps mentioned above!
About Author
Co-founder and Design Director at Onething Design Studio Gurugram, Haryana, India
Manik first came across experience design when he was building Places, a ride-sharing app based on Facebook’s social graph. Even though the app was never launched, the process taught Manik so much about design and development. Since then, design became integral to him. He along with his friends began this endeavor to explore the world of design. They were highly disappointed with the poor use of design in the industry, so in 2014, they launched Ketchup Design Studio. The name was later changed to One thing Design in 2015, and since then they have transformed a lot of businesses with the power of design.
