Design can be tricky. There will always be lots of changes and several rounds of revisions to hit the mark. And the entire process only gets trickier when your content keeps changing on top of the design requirements.
Have you ever tried to add an image to a Microsoft Word doc? Hear me out here.
I'm sure a lot of us know the struggle of dropping an image into our nicely formatted text, just to have everything shift five lines down, eight to the right, and four pages away from where it should be.
Of course, that's an exaggeration, but it illustrates just how frustrating the process of marrying content and design can be.
Wrangling the Challenge of Changing Content and Design Demands
We recently designed an awesome infographic with a workflow chart, and the outcome was only the result of multiple rounds of revisions, copy updates and style changes. Constantly going back and forth, copy and pasting content, sharing new files, it could be cumbersome and complex.
What smoothed everything out was the chance to collaborate directly with Charrel, our brand designer. We sat down one-on-one and made live content changes as she was building the design. This agile process let us work faster and even make more meaningful changes.
The same is true for development, and of course translation. If your design requirements are changing as development is happening, you're constantly scraping builds, designs and even content. Changes take time, and costs add up.
Designing Around Translation
And when you introduce translation into the development process, you open an entirely new can of worms.
Typically translation for software is performed when Design and Development is completed.
Let's say you had an amazing design for your content in your source language, whatever that language is -- chances are you've prototyped everything in English because that's the primary language of your product. Without a doubt, a lot of time was spent on sizing every element just right, placing every box, and managing the white space around every image.
But then you find out it's going to be translated. Sounds simple enough at first -- just drop in some new content and you're good to go.
Except now you get your translated content back, and it's 25% longer than before. Your design is cluttered and jumbled around, there's no white space left to play with, and you can't just make the app homepage wider as a band-aid fix. The fonts you chose might not even support some new characters or accents introduced.
So there are a few key elements to focus on when incorporating translation into design include:
Text length -- Probably the most obvious cause of revision, text length. Difference between English and German Formatting and Direction -- Right to left vs left to right, font choice, etc Dates and Numbers -- Dates differ in different cultures, time can as well
Yet, many of the localization issues or bugs that might require a redesign can be addressed and circumvented by performing translation when design is complete, rather than waiting for Development to complete.
Designing With Translation
Instead, the idea is to get ahead of any localization challenges that could potentially cost more money to resolve later down the development road, than it would cost to fix now before your app is even built.
So our solution was to introduce translation into the design process.
With our latest Figma integration, anyone using the platform to design their solutions can incorporate either real or pseudo translations into the design process to nail down and fine tune any changes before development ever begins.
Pseudo translation
One of the most important tools for designers, pseudo translation replaces the strings from your design a faux translation. Of course it's not a real translation, but we replicate any potential expansion or contraction ratios. Designers will have a clear visual indication of exactly where translations fit, where they don't, and any adjustments they need to make.
- The biggest benefit here is that designers don't even need to wait for a professional translation from the Smartling side. They can just quickly test sizing and make any changes right in Figma. You can also see if any strings weren't translated at all, or if you need to exclude specific strings or elements from translation.
- Strings are changed based on an estimated ratio, so for example English content being translated to Chinese will by 50%, meanwhile English to German will expand by 60%.
Real Translation
Pseudo Translations don't always cut it. Instead, your team can compress your development cycle by up to potentially 60% by incorporating your translation process directly into the design step. Users can request translations inside Smartling directly from Figma, submitted on a page level, or even granularly down to individual strings and frames of content.
- Content is automatically shipped to Smartling, translated, and sent right back to Figma. Users can even check the status of translations directly from Figma to streamline their workflow even further.
- Compress your development cycle and design edits by incorporating translating directly into the design process. Designers can simply request translations and input the approved content once it's ready to go.
Get Started Now
The most agile localization programs start by translating the content as designers are building the end-user experience.
Changes to content in the design phase should remain light, so it makes sense to start using human translation as soon as you believe the content is finished or close to finished, even if the designs are not.
Even if the content does change, you will be able to leverage translation memory to offset any additional costs incurred with translating new content.
Read more about our new Figma integration and how you can get started!
