📦 How to hand-off designs to developers?
📦 How to hand-off designs to developers?
Short answer: Discuss it with them and align on the right way together.
Years ago, before I went into UX, I was designing websites, and the hand-off process was rather unreliable (as I am analyzing it now). I would create png mockups for each page and give them to the developer. It was creating lots of back-and-forth and unnecessary questions. This was the time when PSD -> HTML conversion was a very trendy service for freelancers =) Then there also were exported assets folders, detailed UI specifications with annotations, different apps and plugins designed for dev hand-off (e.g. Zeplin, Invision, etc.), and so many more varied options. And with every next team I worked on (and with) the toolkit for the designer-developer hand-off was different.
Taking all my experiences into consideration (and my user-centred mindset, the developer is your user in this scenario), the way I prefer doing the hand-off is by having a conversation with the dev team at the beginning of the project to understand what is the most efficient and effective way for me to hand-off my designs to them. I am trying to be as open as I can to the varied processes and tools that developers have and I try to tailor my hand-off process to my design artifacts “users”.
I decided for myself, that my ultimate goal as a designer is to increase the chances of having the resulting working product be as close as possible to the way I designed it. With this goal in mind, the hand-off question becomes more about finding a way that prevents miscommunication between design and development and allows us all (the project/product team) to deliver the best possible experience for our users. One of my biggest (sometimes, frustrating) learnings was that what you design barely ever gets coded in the same way, so there is always something that looks/behaves not the way you intended to. And I am not talking about technical constraints and trade-offs. To me, this is an indication that there is a disconnect in the communication between design and development. And, frankly, even with the most detailed hand-off, somehow it is impossible for the developers to make it the way it is designed =) I am still trying to understand why this is happening.
So, with every development team, I am trying to minimize this miscommunication by aligning with them on how they expect me to hand off assets to them, and what is the most effective way for them. To my delight, I haven’t seen any unreasonable expectations =)
To summarize, my recommendation is to decide on the hand-off process together, as a team. And don’t forget, that your goal is to reduce the back-and-forth, and the risk of them coding something too far from what you crafted. So, if your developer doesn’t care about spacing (or other details) while you do, make sure to include these kinds of details in your assets. There is no perfect hand-off, it’s a spectrum between fast with minimal details and slow with full details. Also, it could happen that you include all the tiny (and important details) and the developer will miss them, as it is not important from their point of view (happened to me too many times). So, the value of ongoing communication and reviews can’t be overstated. No hand-off can replace the collaboration with your developer.
While writing this, I realized that this topic is much more complex and I have many more thoughts to share than I initially anticipated. This should provide a rough summary of my thoughts and I will pin this topic to look into later for a more in-depth explanation.