AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
![]() ![]() 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, 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 projected 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's 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 also cover the integration in a bit more detail a little later here). Check out the Phrase Sketch integration page for more details. Note » With the Phrase Sketch integration 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 article. This can lead to rushed design decisions as we, for example, fix labels that break layout 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. ![]()
0 Comments
Read More
Leave a Reply. |