Free Download: New to Native Mobile Design? Tutorial on How to Design for Different Mobile Sizes, Image Conversions, & Touchpoints
. Posted by Sherrie Thai by Shaireproductions.com .
These tutorial images are freely available for download and are a resource for Designers new to Mobile Design. I created and compiled this quick reference guide for fellow colleagues and although this is a distilled version, I hope it may be useful to you.
Mobile Design Size Considerations: If you’re working on a native mobile design, where you’ll have to address both IOS and Android platforms, design for IOS first at 1x, as the sizes are standardized, rather than Android models, where there are dozens of varieties and loads of extra production work. Eek! (Although I’m an Android user, designing for Apple is a more streamlined process). When designing for Mobile, you have to consider the viewport size and export assets at the various sizes: 1x, 2x and 3x sizes for IOS. Retina sizes refer to 2x and 3x Sizes.
Android: MDPI (Baseline), HDPI, XHDPI, XXHDPI, XXXHDPI. There’s a lot of info, but don’t worry, it’s not so scary. As a Designer, you have a wonderful job of creating multiple versions of your files in different sizes, so yay for production time, but luckily, there’s quick export tools available in the major programs like Sketch, Illlustrator, XD, etc. to help you along with the process. For the old school Android devs, the ANDROID ASSET STUDIO is an amazing tool (especially for 9 patch)–plug and play 🙂
At the 1x model, 1 point (IOS measurement)=1 DP (Android measurement). You don’t have to create the 2x or 3x versions, as everything is expandable from there. Generally, you only have to design at 1x and export the design assets at all viewport sizes.
Naming Convention: Apple assets will need to be labeled with “@2x” and “@3x” after your original file name to accommodate for different sizes. For Android, you’ll have to refrain from using fancy CAPS in the file naming, spaces, hyphens, or start with a number, else your files may get lost in the system.
Designing Mobile Touchpoints, Sizes & Padding: When designing touch devices, you have to account for the touchpoint size of your design elements (links, buttons, etc). Everyone has different-sized fingers, so the touchpoint surface size for everyone varies, but on average, stick to 45-57px minimum (1x format) for a button or a link. The more space you have around the touchpoint (40-50px), the better the user experience would be, as people wouldn’t be frustrated while clicking on the wrong thing.