Free Download: New to 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, 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 physical pixels (ex. Iphone 6=1242px x 2208px), while developers refer to 1x, 2x and 3x sizes. There’s a lot of info, but don’t worry, it’s not so scary. Retina sizes refer to 2x Large (2x LG) and 3x Sizes. A 2x LG size is essentially an iPhone 6 size, whereupon developers would sometimes expand the standard 2x size to fit the 2x-large size.
Naming Convention: Apple recommends adding “2x” and “3x” to your original file name to accommodate for different sizes. As a Designer, you have a wonderful job of creating multiple versions of your files in different sizes, so yay for production time. Also, for ease of search, you’ll have to refrain from using fancy CAPS in the file naming, spaces or start with a number, else your files may get lost in the system.
Mobile Image Conversions: While working on a new mobile project, I had to work off of old 1x raster-based models, and needed to convert some individual image elements to 2x and 3x sizes + vice versa, so there was a lot of conversions. After chocolate-stress-eating and math (yuck!), numbers arose and this doc was formed. The conversion is not 100% pixel accurate, but this method will get you in the same pixel range for presentation purposes. Disclaimer: this method isn’t necessary if you’re working from scratch in a vector format or from a recent Photoshop file.
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.