{"id":6077,"date":"2019-03-11T08:30:42","date_gmt":"2019-03-11T07:30:42","guid":{"rendered":"https:\/\/phraseapp.com\/blog\/?p=6077"},"modified":"2024-11-06T17:37:42","modified_gmt":"2024-11-06T16:37:42","slug":"designing-apps-in-sketch-for-ios-internationalization","status":"publish","type":"post","link":"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/","title":{"rendered":"Designing Global-Ready iOS Apps with Sketch: A Step-by-Step Tutorial"},"content":{"rendered":"<p>As designers, we want to give our iOS app users joy. We do this by conducting user research and empathizing with our users&#8217; desires as we iterate on our apps&#8217; designs. However, we often begin to consider iOS internationalization a bit late in the development cycle. This can lead to rushed design decisions as we, for example, fix labels that break layouts in a language we didn&#8217;t anticipate. We can do our users one better by being proactive about i18n and its impact on our designs.<br \/>\nAnd that&#8217;s exactly what we&#8217;ll do in this guide. We&#8217;ll use the popular design app, <a href=\"https:\/\/www.sketchapp.com\/\">Sketch<\/a>, but we&#8217;ll be just as interested in the design problems emerging from Sketch iOS internationalization, and potential solutions to them. So even if you use Adobe XD, Illustrator, PhotoShop, Figma, Invision, or another design app entirely, come along with us. I think you may learn a couple of things about designing for i18n along the way, and that can only make you a more well-rounded mobile app designer.<\/p>\n<p>\ud83d\uddd2\ufe0f <em>Note \u00bb<\/em> With the <a href=\"https:\/\/phrase.com\/integrations\/sketch\/\">Sketch integration for Phrase Strings<\/a>, the software localization solution within the Phrase Localization Platform, we can actually use <em>real translations<\/em> provided by <em>real translators<\/em> in our designs. We&#8217;ll cover the integration in greater detail a little later here.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Overview<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/#our-mini-project-discounter\" title=\"Our (mini) project: Discounter\">Our (mini) project: Discounter<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/#photo-and-icon-credits\" title=\"Photo and icon credits\">Photo and icon credits<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/#the-need-for-internationalization-i18n\" title=\"The need for internationalization (i18n)\">The need for internationalization (i18n)<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/#typography-selecting-fonts-for-supported-languages\" title=\"Typography: Selecting fonts for supported languages\">Typography: Selecting fonts for supported languages<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/#using-font-book-to-test-fonts\" title=\"Using font book to test fonts\">Using font book to test fonts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/#using-sketch-to-test-fonts\" title=\"Using Sketch to test fonts\">Using Sketch to test fonts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/#system-fonts\" title=\"System fonts\">System fonts<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/#googles-noto-fonts\" title=\"Google&#8217;s Noto fonts\">Google&#8217;s Noto fonts<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/#designing-for-variable-text-width\" title=\"Designing for variable text width\">Designing for variable text width<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/#testing-layouts-for-i18n-in-sketch\" title=\"Testing layouts for i18n in Sketch\">Testing layouts for i18n in Sketch<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/#working-with-right-to-left-languages\" title=\"Working with right-to-left languages\">Working with right-to-left languages<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/#highlighting-and-i18n\" title=\"Highlighting and i18n\">Highlighting and i18n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/phrase.com\/blog\/posts\/designing-apps-in-sketch-for-ios-internationalization\/#wrapping-up-our-localization-tutorial-with-sketch\" title=\"Wrapping up our localization tutorial with Sketch\">Wrapping up our localization tutorial with Sketch<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"our-mini-project-discounter\"><\/span>Our (mini) project: Discounter<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let&#8217;s assume we&#8217;ve been tasked to design a discount-finder app called <em>Discounter<\/em>. Discounter targets price-conscious retail consumers and aggregates city coupons, flyers, and sale information for these users in one place. Our users can then browse and search for their favorite products to see if they&#8217;ve been discounted.<br \/>\nWe&#8217;ll assume that we&#8217;ve done some research, tested a low-fidelity prototype, and have a good idea of some flows and interactions we want to use in our app. We&#8217;ve found that our <em>Feed<\/em> screen\u2014which shows a reverse-chronological ordering of the most recent products on sale in the user&#8217;s city\u2014is best served by the following design so far.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6079 \" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/01-iids-feed-screen-wireframe-681x1024.png\" alt=\"A lo-fidelity wireframe of our demo app layout | Phrase\" width=\"572\" height=\"919\" \/><\/p>\n<p style=\"text-align: center;\"><em>A lo-fidelity wireframe of our Feed screen<\/em><\/p>\n<p>For brevity, we&#8217;ll focus on this screen in this article. The next step is to make a high-fidelity mockup of this screen that can be given to engineers for building. We jump into Sketch, get to work, and come up with this.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6080 size-large\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/03-iids-starter-sketch-mockup-detail-602x1024.png\" alt=\"Demo app mock up | Phrase\" width=\"602\" height=\"1024\" srcset=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/03-iids-starter-sketch-mockup-detail-602x1024.png 602w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/03-iids-starter-sketch-mockup-detail-176x300.png 176w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/03-iids-starter-sketch-mockup-detail.png 734w\" sizes=\"(max-width: 602px) 100vw, 602px\" \/><\/p>\n<p style=\"text-align: center;\"><em>Sketch mockup of Feed screen<\/em><\/p>\n<p>\ud83d\uddd2\ufe0f <em>Note \u00bb <\/em>If you want to work along with us, <a href=\"https:\/\/github.com\/PhraseApp-Blog\/sketch-i18n-ios-app\">grab the project GitHub repo<\/a>, which contains the Sketch file displayed above. Just open <code>Starter_Discount_Finder_App_Mockup.sketch<\/code> and you&#8217;re good to go. If you want to see the completed project that we&#8217;ll reach by the end of the article, open <code>Completed_Discount_Finder_App_Mockup.sketch<\/code>.<\/p>\n<p>This mockup is a good start, but we could do better. Let&#8217;s start identifying and fixing some of the i18n issues in our design.<\/p>\n<h3 id=\"toc_2\"><span class=\"ez-toc-section\" id=\"photo-and-icon-credits\"><\/span>Photo and icon credits<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Some photos and icons were sourced for the mockup above. Here&#8217;s a list of these sourced assets, along with the awesome people who provided them for free.<\/p>\n<ul>\n<li><a href=\"https:\/\/thenounproject.com\/search\/?q=newsfeed&amp;i=102559\">Feed (Menu) Icon by Jardson Almeida, US on The Noun Project<\/a><\/li>\n<li><a href=\"https:\/\/thenounproject.com\/search\/?q=search&amp;i=1594154\">Search Icon by Landon LLoyd on The Noun Project<\/a><\/li>\n<li><a href=\"https:\/\/thenounproject.com\/search\/?q=notifications&amp;i=934038\">Alert (Notification) Icon by DewDrops on The Noun Project<\/a><\/li>\n<li><a href=\"https:\/\/thenounproject.com\/ayub12\/uploads\/?i=1517796\">Thumb Icon by Ayub Irawan, ID on The Noun Project<\/a><\/li>\n<li><a href=\"https:\/\/unsplash.com\/photos\/w83s82yd3Fk\">Nike Air Jordans Photo by Hermes Rivera on Unsplash<\/a><\/li>\n<li><a href=\"https:\/\/unsplash.com\/photos\/eCktzGjC-iU\">PlayStation 4 Photo by JESHOOTS.COM on Unsplash<\/a><\/li>\n<\/ul>\n<p>The color palette used in the mockup was largely derived from the <a href=\"https:\/\/www.smashingmagazine.com\/2019\/02\/desktop-wallpaper-calendars-march-2019\/\">Smashing Magazine Wallpaper<\/a>, <em>Let&#8217;s Get Outside<\/em>, by <a href=\"https:\/\/pathlove.com\/\">L\u00edvia L\u00e9n\u00e1rt<\/a>.<\/p>\n<h3 id=\"toc_3\"><span class=\"ez-toc-section\" id=\"the-need-for-internationalization-i18n\"><\/span>The need for internationalization (i18n)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>We&#8217;ve been told by our product manager that our app will launch in five different regions simultaneously: North America, Europe, the Middle East &amp; North Africa (MENA), India, and China. This means that our design will have to accommodate scripts other than Latin. We should also keep in mind language direction since Arabic, Hebrew, and other languages are written right-to-left, and their respective layouts flow in that direction. And we&#8217;ll have to mind our label widths as well since a word or phrase in English can have a relatively long translation in another language.<\/p>\n<p>\ud83d\uddd2\ufe0f <em>Note \u00bb <\/em>A script is a set of characters that can be used for one or more languages. The Latin script, for example, is used for many languages including English and French. The Arabic script is used for Arabic, Urdu, Farsi, and more.<\/p>\n<h2 id=\"toc_4\"><span class=\"ez-toc-section\" id=\"typography-selecting-fonts-for-supported-languages\"><\/span>Typography: Selecting fonts for supported languages<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To best control our typography, we want to make sure that the font\/fonts we select cover our supported languages. In our case, there are a large number of scripts we have to support: Latin, Arabic, Chinese, and more. When selecting fonts for our design, we have two basic options:<\/p>\n<ol>\n<li>Select a font that covers <em>all<\/em> our supported scripts<\/li>\n<li>Select a group of fonts, a font stack, with each font in the stack covering some of our supported scripts<\/li>\n<\/ol>\n<p>Given that it meets our aesthetic goals, the first option can sometimes work for us. Of course, the <em>one<\/em> font we choose must support every single script we need. If we&#8217;re supporting a few scripts, this can be feasible.<br \/>\nOtherwise, we need a font stack, i.e. we&#8217;ll mix and match fonts that work together to cover all of our supported scripts. This takes a bit more work upfront but gives us a lot of flexibility. Since we&#8217;re covering a lot of scripts, we&#8217;ll be going with the font stack here. We&#8217;ll get to our font selection in a minute.<\/p>\n<p>\ud83d\uddd2\ufe0f <em>Note \u00bb <\/em>We fully acknowledge the distinction between the terms &#8220;font&#8221; and &#8220;typeface,&#8221; but for practical reasons, we will stick with using &#8220;font.&#8221; Thank you for your understanding.<\/p>\n<h3 id=\"toc_5\"><span class=\"ez-toc-section\" id=\"using-font-book-to-test-fonts\"><\/span>Using font book to test fonts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In all cases, it&#8217;s best to test our font selection to make sure it supports the scripts and languages that we&#8217;ll need in our app. One way to do this in macOS is through the built-in <em>Font Book<\/em> app.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6081 size-large\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/04-iids-font-book-1024x616.png\" alt=\"Font book app | Phrase\" width=\"1024\" height=\"616\" \/><\/p>\n<p style=\"text-align: center;\"><em>The Info<\/em> (\u2139\ufe0e) <em>tab in macOS&#8217; Font Book app can indicate a font&#8217;s supported languages and scripts<\/em><\/p>\n<p>\ud83d\uddd2\ufe0f <em>Note \u00bb <\/em>You can also use Font Book&#8217;s <em>Search<\/em> bar to filter fonts by a particular language. Enter &#8220;French&#8221;, for example, to see only fonts that support it.<\/p>\n<p>Font Book gives an idea of the supported languages, but it&#8217;s not bulletproof. A font&#8217;s metadata could be inaccurate or out of date. So we should test our selected font(s) in more concrete ways before committing to them.<\/p>\n<h3 id=\"toc_6\"><span class=\"ez-toc-section\" id=\"using-sketch-to-test-fonts\"><\/span>Using Sketch to test fonts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To shed some doubt regarding a font&#8217;s support for our languages, we can test it directly in Sketch. Doing this is pretty simple. We select the text in a text layer, and make sure that it&#8217;s using the font under test and that it&#8217;s written in the language under test.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6082 size-large\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/05-iids-testing-fonts-sketch-e1552293852418-1024x758.png\" alt=\"Testing fonts in Sketch | Phrase\" width=\"1024\" height=\"758\" \/><br \/>\n<em>Take a look at the<\/em> Text <em>section of the inspector while you&#8217;re testing a text layer<\/em><\/p>\n<p>As we change the copy of a text layer to test different languages, we should keep an eye on the contextual Inspector pane in Sketch. The first dropdown in the <em>Text<\/em> section will reveal the currently set font. If this is reading &#8220;Multiple&#8221; or a font other than the one we set ourselves, then the font we set may not support the current language.<br \/>\nFor example, notice that in the screenshot above the text layer we&#8217;re using to test Arabic has its font set to &#8220;Multiple&#8221;. This means that we&#8217;ll probably need to use a different font, one that supports Arabic script or add an Arabic-supporting font to our app&#8217;s font stack.<\/p>\n<p>\ud83d\uddd2\ufe0f<em> Note \u00bb <\/em>Certain scripts can act funny in Sketch if you add character spacing to them. I find it best to set the <em>Text &gt; Character<\/em> spacing field to zero (which sets it <em>auto<\/em>) in the inspector when testing a text layer in multiple scripts.<\/p>\n<h3 id=\"toc_7\"><span class=\"ez-toc-section\" id=\"system-fonts\"><\/span>System fonts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>While not exactly overflowing with personality, using system fonts oftentimes alleviates the pain of creating a multilingual font stack. Operating Systems like Android and iOS are made to support almost all locales on Earth so their default font families usually support all the languages we need in our apps.<br \/>\nTo use iOS system fonts, simply <a href=\"https:\/\/developer.apple.com\/fonts\/\">download them from Apple<\/a> and install them on your machine. They&#8217;ll then be available for you to use in Sketch and other apps.<\/p>\n<p>\ud83d\uddd2\ufe0f<em> Note \u00bb <\/em>Even though Font Book may tell you system fonts don&#8217;t support your language, they may well do, perhaps by falling back on a compatible alternate font. Test them in an iOS app yourself to make sure.<\/p>\n<h3 id=\"toc_8\"><span class=\"ez-toc-section\" id=\"googles-noto-fonts\"><\/span>Google&#8217;s Noto fonts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Our mockup is currently using Google&#8217;s Noto Serif and Noto Sans fonts. <a href=\"https:\/\/www.google.com\/get\/noto\/\">Google&#8217;s Noto fonts<\/a> are made by the Internet giant with the goals of supporting all languages and working together harmoniously. Noto Serif and Noto Sans come with a good amount of style variants, and both cover a set of 500+ languages!<br \/>\nWhile these base Noto fonts cover an immense number of languages, they don&#8217;t cover all of them. For example, Noto Sans and Noto Serif don&#8217;t cover common scripts used in the Middle East and North Africa, such as Arabic and Berber. We can search for a particular language on the Noto page to see which Noto fonts support it.<\/p>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6083 size-large\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/06-iids-noto-language-search-1024x954.png\" alt=\"Google noto finding fonts that support languages | Phrase\" width=\"1024\" height=\"954\" \/><em>Enter a language in the Noto page&#8217;s search bar to find fonts that support it<\/em><\/p>\n<p>Since our app is to be deployed in the <a href=\"http:\/\/www.worldbank.org\/en\/region\/mena\">MENA<\/a> region, we will need to add some fonts that support Arabic and Hebrew. We&#8217;ll use Noto Kufi Arabic, Noto Sans Arabic, Noto Serif Hebrew, and Noto Sans Hebrew to round out our font stacks. Here are the two stacks we&#8217;ll use:<\/p>\n<ul>\n<li>For headers and display text, we&#8217;ll use Noto Serif, Noto Kufi Arabic, and Noto Serif Hebrew<\/li>\n<li>For body and UI text, we&#8217;ll use Noto Sans, Noto Sans Arabic, and Noto Sans Hebrew<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6084 size-large\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/07-iids-noto-test-1024x183.png\" alt=\"A side-by-side test of the vertical alignment of our font stack | Phrase\" width=\"1024\" height=\"183\" srcset=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/07-iids-noto-test-1024x183.png 1024w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/07-iids-noto-test-300x54.png 300w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/07-iids-noto-test-768x138.png 768w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/07-iids-noto-test-1536x275.png 1536w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/07-iids-noto-test-2048x367.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><br \/>\n<em>A side-by-side test of the vertical alignment of our font stack<\/em><\/p>\n<p>One of the biggest benefits a font family like Noto gives us is that it allows us to mix and match different Noto variants without worrying about breaking the layout. For example, when we set a label with a Noto font to a particular font size, we can be confident that switching that label to another Noto font won&#8217;t break our layout on the vertical axis.<\/p>\n<p>\ud83d\uddd2\ufe0f<em> Note \u00bb <\/em>You may have noticed in the above image that we have overflowing labels and that our right-to-left languages have left-to-right layouts. We&#8217;ll get to these issues in just a moment.<br \/>\n\ud83d\uddd2\ufe0f <em>Note \u00bb <\/em>I&#8217;ve used Google Translate for some of these translations. And for Amazigh, I just typed jibberish, since I couldn&#8217;t find an Amazigh translation tool. I probably could have avoided all of this if I used the Phrase Sketch integration (more on that below) since the integration along with Phrase would have allowed me to get real translators to provide me with the translated text I need.<\/p>\n<h2 id=\"toc_9\"><span class=\"ez-toc-section\" id=\"designing-for-variable-text-width\"><\/span>Designing for variable text width<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Even with our increasing mobile phone screen sizes, real estate on mobile is a precious commodity. And translations of the same phrase in different languages can significantly vary in length. This is a recipe for text labels getting truncated and causing users to miss information, or get annoyed because our interface looks broken to them.<\/p>\n<h3 id=\"toc_10\"><span class=\"ez-toc-section\" id=\"testing-layouts-for-i18n-in-sketch\"><\/span>Testing layouts for i18n in Sketch<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>We can catch potential i18n layout problems before they happen by testing our layouts during the design phase.<\/p>\n<h4>Using Phrase&#8217;s Sketch integration<\/h4>\n<p>Nothing beats testing out layouts with the real data that we want to use in our production app. To make this quick and easy, Phrase has released a Sketch plugin that allows us to pull text provided by our translation team directly into our Sketch designs. Given that we have a Phrase account with locales set up at the ready, we would just need to install and quickly configure the Phrase Sketch Integration. We then get access to a simple menu that allows syncing our design&#8217;s text with text provided by our project translators, or machine translation. The integration&#8217;s menu also enables us to switch languages on the fly to test our design in different locales.<\/p>\n<p>\ud83d\uddd2\ufe0f <em>Note \u00bb <\/em>If you haven&#8217;t worked with Phrase before, you&#8217;ll find it&#8217;s pretty straightforward to get started (for free). You can also check out the getting-started guide for basic instructions. You can try the integration, along with other awesome Phrase features, by signing up for a <a href=\"https:\/\/eu.phrase.com\/idm-ui\/signup\">free 14-day trial<\/a>.<\/p>\n<p>The basic workflow of using Phrase in Sketch designs is as follows:<\/p>\n<ol>\n<li>Pushing the current design text in some source locale to Phrase via the <em>Push Translations menu command<\/em><\/li>\n<li>Getting our translators to translate the text on the Phrase web console into our target locales<\/li>\n<li>Pulling the translations back into our design via the <em>Pull Translations<\/em> menu command<\/li>\n<li>Switching our language over to a target translation to test our design in that locale<\/li>\n<\/ol>\n<p>After our translators have translated the design copy to Arabic in the Phrase web console, we can switch our Sketch design over to Arabic to test it out. For a right-to-left language like Arabic, it&#8217;s a good idea to flip the horizontal components of the design when testing. This provides a more accurate view of what our production app will look like in Arabic. We&#8217;ll look at language direction and right-to-left languages in more detail a bit later on in this article.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-7052 size-large\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/07\/update01-iids-test-lang-phraseapp-plugin-599x1024.png\" alt=\"Identifying layout problems in Arabic with the Phrase Sketch Plugin | Phrase\" width=\"599\" height=\"1024\" \/><\/p>\n<p style=\"text-align: center;\"><em>Identifying layout problems in Arabic with the Phrase Sketch integration<\/em><\/p>\n<p>We can already tell that some of our layouts just aren&#8217;t optimized for Arabic. We&#8217;ll have to take care of that, and we&#8217;ll do so a bit later on here as we continue to test and refine our design. With Phrase&#8217;s Sketch integration, we were able to get ahead of our layout issues and know about them during the design phase, saving time and money and giving us control over the designs before they head over to developers.<\/p>\n<p id=\"toc_11\"><strong>Using the psuedol10n integration<\/strong><\/p>\n<p>Of course, we could just manually add a lot of text to each of our text layers and see where our layout breaks. However, this could be a bit tedious. Luckily, <a href=\"https:\/\/github.com\/arieare\">Arie Aulia Nugraha<\/a> has created a little plugin for us called <a href=\"https:\/\/github.com\/arieare\/Sketch-Pseudol10n\">Pseudol10n<\/a>, which we can use to test for variable text width. Pseudol10n converts an artboard&#8217;s text layers to pseudo-Thai or pseudo-Vietnamese. The latter expands text layers by 35%, which helps us test overlaps and layout breakage.<br \/>\nAfter installing the plugin, we&#8217;ll have a new Sketch menu command: <em>Plugins &gt; Pseudol10n &gt; Psuedolocalize to<\/em>. We can run the new command after selecting an artboard. We&#8217;ll be asked to select <em>Thailand<\/em> or <em>Vietnam<\/em>. I prefer <em>Vietnam<\/em> since it extends text layers more than <em>Thailand<\/em>. Selecting either one will create a new artboard with what seems like gibberish text.<\/p>\n<p>\ud83d\uddd2\ufe0f<em> Note \u00bb <\/em>The Psuedol10n integration only works if the target artboard&#8217;s text layers are not inside symbols. If our artboard is using symbol layers that we want to test, we have to detach those layers from their respective symbols. We can do this by creating a copy of the artboard and detaching the copy&#8217;s symbols. We can also create a copy of the entire Sketch file, open the copy, and delete all its symbols; this detaches all symbol layers in our artboards.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6085 size-large\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/08-iids-pseudo-language-test-576x1024.png\" alt=\"Identifying layout problems using the Pseudol10n plugin | Phrase\" width=\"576\" height=\"1024\" \/><\/p>\n<p style=\"text-align: center;\"><em>Identifying layout problems using the Pseudol10n integration<\/em><\/p>\n<p>After running Psuedol10n on our artboard, we can see a few potential problems:<\/p>\n<ul>\n<li>The width of the &#8220;20% off&#8221; label can overflow its background<\/li>\n<li>The product name and store labels can potentially overlap<\/li>\n<li>The before and after price labels can potentially overlap<\/li>\n<li>The expiry label can get a little too close to other labels on its row<\/li>\n<\/ul>\n<p id=\"toc_12\"><strong>Achieving dynamic padding with the Anima integration<\/strong><\/p>\n<p>We&#8217;ve revealed through testing that our red &#8220;% off&#8221; label doesn&#8217;t expand to fit its content. While this is often acceptable in static mockups, we can easily fix this right in Sketch using an integration. There are a few dynamic padding (or &#8220;dynamic button&#8221;) integrations out there that can help us with this. My personal favorite at the moment is <a href=\"https:\/\/www.animaapp.com\/\">Anima<\/a>, which is a general-purpose responsive layout and prototyping plugin.<br \/>\nAfter installing Anima, we get a little panel in our inspector pane.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6086 size-full\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/09-iids-anima-pane.png\" alt=\"The Anima plugin inspector panel | Phrase\" width=\"507\" height=\"404\" \/><\/p>\n<p style=\"text-align: center;\"><em>The Anima integration inspector panel<\/em><\/p>\n<p>In our product card symbol, we select our label&#8217;s layer group, which contains the text layer and the background rectangle. We then use Anima&#8217;s <em>PINS<\/em> to anchor it to the top-right of its parent. This will keep the group fixed to that corner as it resizes. We can then click the \u2795 button in the <em>PADDING<\/em> area of Anima to enable dynamic padding.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6087 size-large\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/10-iids-set-padding-in-anima-e1552293938567-1024x663.png\" alt=\"Pinning and padding using Anima | Phrase\" width=\"1024\" height=\"663\" srcset=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/10-iids-set-padding-in-anima-e1552293938567-1024x663.png 1024w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/10-iids-set-padding-in-anima-e1552293938567-300x194.png 300w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/10-iids-set-padding-in-anima-e1552293938567-768x497.png 768w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/10-iids-set-padding-in-anima-e1552293938567-1536x995.png 1536w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/10-iids-set-padding-in-anima-e1552293938567-2048x1327.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p style=\"text-align: center;\"><em>Pinning and padding using Anima<\/em><\/p>\n<p>We should also make sure that our inner text layer has a centered horizontal alignment and is set to auto-width (not fixed). Setting the text layer to auto-width will allow it to expand and grow as its text changes.<br \/>\nWith that in place, our label will expand and contract naturally as its content size changes. And since we made these changes at the symbol level, all our product cards get this benefit at once.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6088 size-large\" title=\"\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/11-iids-dynamic-price-label-574x1024.png\" alt=\"Our label expands and contracts according to its content | Phrase\" width=\"574\" height=\"1024\" srcset=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/11-iids-dynamic-price-label-574x1024.png 574w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/11-iids-dynamic-price-label-168x300.png 168w, https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/11-iids-dynamic-price-label.png 684w\" sizes=\"(max-width: 574px) 100vw, 574px\" \/><\/p>\n<p style=\"text-align: center;\"><em>Our label expands and contracts according to its content<\/em><\/p>\n<p id=\"toc_13\"><strong>Avoiding overlap by adjusting the layout<\/strong><\/p>\n<p>The remaining issues that we identified were overlapping labels and labels that could get too close to each other. There&#8217;s no magic bullet for addressing these types of issues. It will depend on what makes sense for our current interface. One strategy we can utilize for solving our overlap issues is to move labels to their own rows. We have to balance this with the need to keep our cards from being too tall. Here&#8217;s one redesign of our product cards that can alleviate some of our problems.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6089 size-large\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/12-iids-adjusted-for-width-design-589x1024.png\" alt=\"Our updated design | Phrase\" width=\"589\" height=\"1024\" \/><\/p>\n<p style=\"text-align: center;\"><em>Our updated design<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6090 size-large\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/13-iids-testing-updated-design-586x1024.png\" alt=\"Testing our updated design reveals that it's better suited for variable-width text | Phrase\" width=\"586\" height=\"1024\" \/><\/p>\n<p style=\"text-align: center;\"><em>Testing our updated design reveals that it&#8217;s better suited for variable-width text<\/em><\/p>\n<p>While not perfect, by moving things around, we achieved a design for our product cards that is much better suited for variable-width labels. Doing this at the design stage gives us a lot more control over the UI as we consider i18n. Our updated design gives us the added benefit of not covering up the product image with other UI elements. Nice \ud83d\udc4d\ud83c\udffd<\/p>\n<h2 id=\"toc_14\"><span class=\"ez-toc-section\" id=\"working-with-right-to-left-languages\"><\/span>Working with right-to-left languages<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>It can be worth our time to do some testing with right-to-left (RTL) layouts if we know that we&#8217;re supporting RTL languages. For example, we can test our product card to see if it works in Arabic and Hebrew when we flip the layout direction.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6091 size-large\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/14-iids-rtl-product-card-test-1024x814.png\" alt=\"A test of our product card in different layout directions | Phrase\" width=\"1024\" height=\"814\" \/><\/p>\n<p style=\"text-align: center;\"><em>A test of our product card in different layout directions<\/em><\/p>\n<p>\ud83d\uddd2\ufe0f <em>Note \u00bb <\/em>The Anima integration&#8217;s <em>Stack<\/em> feature can come in handy while flipping elements on the same row. We can put all elements in a row in a Stack and pin the Stack layer itself appropriately. Then we can drag elements on the canvas and have them automatically pop into place in the Stack. This can save a bit of time when testing RTL layouts.<br \/>\n\ud83d\uddd2\ufe0f <em>Note \u00bb <\/em>It&#8217;s often a good idea to flip directional icons when testing RTL designs. Notice, for example, how the thumb icon is flipped horizontally in the RTL artboards above.<\/p>\n<h2 id=\"toc_15\"><span class=\"ez-toc-section\" id=\"highlighting-and-i18n\"><\/span>Highlighting and i18n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You may have noticed that our sorting indicator is in italics.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6092 size-full\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/15-iids-sorting-indicator-italics.png\" alt=\"Italic layout problem | Phrase\" width=\"418\" height=\"195\" \/><\/p>\n<p style=\"text-align: center;\"><em>Italics can be a problem for i18n<\/em><\/p>\n<p>This can be an issue when localizing to languages that don&#8217;t have italics, like Arabic, for example. It&#8217;s best to use bolding or color highlight to achieve a more universal text highlighting scheme.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-6093 size-full\" src=\"https:\/\/phrase.com\/wp-content\/uploads\/2019\/03\/16-iids-bold-sorting-indicator.png\" alt=\"Bold highlighting | Phrase\" width=\"706\" height=\"182\" \/><\/p>\n<p style=\"text-align: center;\"><em>Bold highlighting covers more languages than italic<\/em><\/p>\n<p>\ud83d\uddd2\ufe0f <em>Note \u00bb <\/em>You can get the completed mockup from this article&#8217;s companion <a href=\"https:\/\/github.com\/PhraseApp-Blog\/sketch-i18n-ios-app\">GitHub repo<\/a>. Just download or pull the repo and open <code>Completed_Discount_Finder_App_Mockup.sketch<\/code>.<\/p>\n<h2 id=\"toc_16\"><span class=\"ez-toc-section\" id=\"wrapping-up-our-localization-tutorial-with-sketch\"><\/span>Wrapping up our localization tutorial with Sketch<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We hope that you&#8217;ve learned a few things about designing in Sketch with i18n in mind. Considering i18n at the design stage of app development gives designers more control over how to solve potential problems that can arise as an app is getting localized. This makes designers proactive\u2014rather than reactive\u2014allowing them to create i18n-aware designs that delight users in different parts of the world.<\/p>\n<p>If you&#8217;re working with a whole team of designers, developers, translators, and more, and if you want a more organized and efficient localization workflow in app design and development, check out <a href=\"https:\/\/phrase.com\/platform\/strings\/\">Phrase Strings<\/a>, the dedicated software localization platform within the Phrase Localization Platform.<\/p>\n<p>With its robust Sketch integration, Phrase Strings makes using real translated data in your designs a breeze. It tracks translation versions so that your translators can easily go back to older ones. You can even do over-the-air translation updates with Phrase, so your translations get to your users immediately without waiting for an app update.<\/p>\n<p>Check out all <a href=\"https:\/\/phrase.com\/roles\/designers\/\">Phrase&#8217;s solutions for designers<\/a> and take your multilingual UX design to the next level.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Internationalization can have a big impact on UI and UX. Let&#8217;s take a look at some key design challenges that can come up when using Sketch for iOS i18n\u2014and how Phrase can help solve them.<\/p>\n","protected":false},"author":41,"featured_media":38849,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_stopmodifiedupdate":false,"_modified_date":"","_searchwp_excluded":"","footnotes":""},"categories":[40],"class_list":["post-6077","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-localization"],"acf":[],"_links":{"self":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/6077"}],"collection":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/comments?post=6077"}],"version-history":[{"count":14,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/6077\/revisions"}],"predecessor-version":[{"id":60048,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/posts\/6077\/revisions\/60048"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/media\/38849"}],"wp:attachment":[{"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/media?parent=6077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phrase.com\/wp-json\/wp\/v2\/categories?post=6077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}