Instal the last version for ios Sketch software#

This takes a bit more work upfront but gives us a lot of flexibility. we'll mix and match fonts that work together to cover all of our supported scripts. If we're supporting a few scripts, this can be feasible. Of course, the one font we choose must support every single script we need. Given that it meets our aesthetic goals, the first option can sometimes work for us.

Select a group of fonts, a font stack, with each font in the stack covering some of our supported scripts.

Select a font that covers all our supported scripts.

When selecting fonts for our design, we have two basic options: In our case, there are a large number of scripts we have to support: Latin, Arabic, Chinese, and more. To best control our typography, we want to make sure that the font/fonts we select cover our supported languages. Typography: Selecting fonts for supported languages The Arabic script is used for Arabic, Urdu, Farsi, and more. The Latin script, for example, is used for many languages including English and French. 🗒️ Note » A script is a set of characters that can be used for one or more languages.

And we'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. 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. This means that our design will have to accommodate scripts other than Latin. We've been told by our product manager that our app will launch in five different regions simultaneously: North America, Europe, the Middle East & North Africa (MENA), India, and China. The color palette used in the mockup was largely derived from the Smashing Magazine Wallpaper, Let's Get Outside, by Lívia Lénárt. PlayStation 4 Photo by JESHOOTS.COM on Unsplash.Nike Air Jordans Photo by Hermes Rivera on Unsplash.Thumb Icon by Ayub Irawan, ID on The Noun Project.Alert (Notification) Icon by DewDrops on The Noun Project.Search Icon by Landon LLoyd on The Noun Project.Feed (Menu) Icon by Jardson Almeida, US on The Noun Project.Here's a list of these sourced assets, along with the awesome people who provided them for free. Some photos and icons were sourced for the mockup above. Let's start identifying and fixing some of the i18n issues in our design. This mockup is a good start, but we could do better. If you want to see the completed project that we'll reach by the end of the article, open Completed_Discount_Finder_App_Mockup.sketch. Just open Starter_Discount_Finder_App_Mockup.sketch and you're good to go.

🗒️ Note » If you want to work along with us, grab the project GitHub repo, which contains the Sketch file displayed above. We jump into Sketch, get to work, and come up with this. The next step is to make a high-fidelity mockup of this screen that can be given to engineers for building. We've found that our Feed screen-which shows a reverse-chronological ordering of the most recent products on sale in the user's city-is best served by the following design so far.Ī lo-fidelity wireframe of our Feed screenįor brevity, we'll focus on this screen in this article. We'll assume that we'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. Our users can then browse and search for their favorite products to see if they've been discounted. Discounter targets price-conscious retail consumers and aggregates city coupons, flyers, and sale information for these users in one place. Let's assume we've been tasked to design a discount-finder app called Discounter. We'll cover the integration in greater detail a little later here.

Instal the last version for ios Sketch software#

🗒️ Note » With the Sketch integration for Phrase Strings, the software localization solution within the Phrase Localization Suite, we can actually use real translations provided by real translators in our designs. 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. So even if you use Adobe XD, Illustrator, PhotoShop, Figma, Invision, or another design app entirely, come along with us. We'll use the popular design app, Sketch, but we'll be just as interested in the design problems emerging from Sketch iOS internationalization, and potential solutions to them. We can do our users one better by being proactive about i18n and its impact on our designs.Īnd that's exactly what we'll do in this guide. This can lead to rushed design decisions as we, for example, fix labels that break layouts in a language we didn't anticipate. However, we often begin to consider iOS internationalization a bit late in the development cycle. We do this by conducting user research and empathizing with our users' desires as we iterate on our apps' designs. As designers, we want to give our iOS app users joy.