Localise designs with Sketch and Invision
As a Belgian Designer it’s not uncommon that your work will be translated into three languages. In case you didn’t know Belgium has Dutch, French and German as official languages. For a population of about 11 million people those are a lot of languages to support.
When designing interface elements for a variety of languages it’s important to know if your elements work equally–as–well in every supported language. It’s hard to get it right and near impossible to fix at the end of a project.
Work together with your Copywriter
At the beginning of a project I take a moment and sit down with the Copywriter in charge. We figure out what the project is about, talk about the tone of voice we’re going to use, how we imagine it will look like visually, how our visions differ, etc. Just by using pen and paper we both get an idea of what we’re doing rather quickly.
Copy belongs to the Copywriter
I often kick–off by writing my own copy, not that it’s any good, but it gives me an idea what the story will look like. What I do next is upload screenshots to Invision and let the Copywriter take a look at my awful copy creation (it can be confronting at times). I also provide a JSON file that includes all the text values used in the design.
The JSON is generated by a homemade plugin called Sketch i18n, it enables you to translate pages in Sketch. The Copywriter can edit this file and send back copy adjustments (or translations). These are then imported back into Sketch to see what effect they have on the UI and enables you to iterate on copy fast.
Copy that breaks the interface
It’s not unusual that a lengthy piece of copy breaks the UI. By spotting it early in the process you can come up with better solutions and warn developers about breaking components, adding developer notes about how the UI components should scale will definitely make your life easier.
Conclusion
Iterate quickly with your Copywriter so you can spot breaking UI components early on. It’s not easy to design for multiple languages but tools like Invision, Sketch and Sketch i18n will make it a bit easier to handle.
Sidenote: This is my current workflow and I’m always curious how others handle copy iterations and multilingual projects, let me know on Twitter!
