How not to get ‘Lost in translation’
Building an efficient system of handing over design assets to developers
So you’ve worked your ass off on your designs. Everything is pixel-perfect. Your client loves your design (Too good to be true right?). You’re in a state of bliss! Now all you need to do is wait and watch while your static designs magically turn into interactive screens.
Cut to a couple of weeks later. The day has finally come…your app/website has been launched and you can’t wait to check it out.
And… Puffffff! to your horror, the website seems nowhere close to your design. The font weights are different, the alignment is messed up, the images are pixelated and suddenly, the day turns into you worst nightmare!
Well, most of us have been through this at some point of time as designers. And let’s face it, there’s no point in blaming developers since we can’t expect them to have the same keen sense of design…that’s our part of the job.
Our role as designers doesn’t end with creating just the visual designs…it goes well beyond that. It is our responsibility to hand over the assets, share the style guide and explain the interactions to the developers. It does sound like a lot of work, but frankly it’s not that hard. Tools such as Invision, Zeplin and Creative Cloud really help in simplifying our job.
I generally follow a simple yet effective system to streamline handover process of the designs and assets.
The process starts even before we begin wire-framing. I create a project folder in Adobe Creative Cloud and offer my client access to the folder. This makes it transparent and all the files are accessible to our clients at any given point in time.
Once the approval on the wireframes is received, I make working prototypes of them using Invision and share them with clients and developers. This gives the clients a fair idea of how the app should work and the developers a clear understanding of the interactions involved in each screen. Any potential challenges in development of these interactions are discussed and rectified during this stage.
Once this is approved we go ahead with the visual designs of the screens.
I use Adobe Photoshop for this as it syncs pretty well with Creative Cloud. Photoshop CC also offers libraries which automatically creates a folder store of all the assets. This greatly simplifies our task as designers.
Once the visual designs were finalized, I replace the wire-frames with the actual screens in Invision and finally create a project on Zeplin.
I find Zeplin to be an amazing tool that helps bridge the gap between the developers and designers. It saves both the parties a huge amount of time and it synchronizes pretty well with Adobe Photoshop and Sketch.
After the fine tuning and final approvals, the designs are uploaded on Zeplin for the developers to take it forward. Zeplin automatically creates style guides for each screen offering details such as color codes, font sizes,weights etc. The front-end developers also get access to all the assets saved in Creative Cloud. This completes our handover process and ensures that the design details are maintained in the final realisation of the design.
Businesses have always had this grouse… “what we saw during design phase did not come off in the final version”. Well, it’s high time that we designers took responsibility to fix it. And this process sure has served me well!
How do you ensure that your designs don’t get lost in translation? Would love to know!
