Designing for Mobile: iOS
Designing for iOS could be difficult if you do not know about the up-to-date features about Apple devices(iPhone, iPad, Apple Watch).
There are few important guidelines to be followed., but let me curate the important things straight away to design an app.
Knowing about Display and Resolution Specifications:
I was really excited about iPhone3 series launch in india when I peek my eyes to design apps for mobile. It was around 2008, a handy phone with
320 x 480 in resolution.
In 2015, Apple came with iPhone6, 6+ as the latest release. Playing around from 3 series to 6 series gave me an inspiring walk-over in my design career.
Generally we can design for iPhone5 or iPhone6(because both are @2x devices), and give specifications like font size, button size, padding, color, etc,. and the given specification will render automatically for iPhone6+.
Since iPhone3 are very rare in market.
Assets Specification:
There are specific sizes need to be noted like @1x, @2x and @3x.
For example: the bottom bar icons are of sizes 25 x 25 @1x, 50 x 50 @2x and 75 x 75 @3x.
And there comes Downsampling on iPhone6+ Read more about this here
Typography:
Helvetica Neue is the best default font to design apps.
And now Apple comes with the new font ‘San Francisco’ . It was introduced earlier for apple watch., and later they planned and announced to fix San Francisco fonts for iOS web/mobile apps and San Francisco-compact fonts for Apple Watch apps.
In addition to the suggested fonts, there are good alternative fonts to use. Click here to find the entire list of pre-installed fonts.
Generally .ttf (true type font) is used in an app.
Custom Fonts:
For playing safe, we can use fonts that are free for commercial usage.
There are fonts that could be licensed for the app usage, MyFonts offers good collection of licensed fonts.
App Design can be done for iPhone5 640 x 1136 or iPhone6 750 x 1334 resolution and the specifications for the same can be given to the developers, and for the assets, all(1x, @2x, @3x) sizes should be given.
Status Bar, Top Navigation Bar, Bottom Tab Bar, Search Bar:
The specifications are for @2x screens: iPhone4, 5 and 6.
Font Sizes to be used:
Standard readable size is 24px, 28px, 32px, 34px, 48/51px and based on the requirements you need to follow these typo sizes in design.
Color Palette:
Apple is using vibrant colors for the interface as one of their guidelines as follows.
But when it comes to brand, theme, concepts, creativity and though it’s a guideline suggested from Apple: of-course you can and should use your own colors: that’s what every designer needs to skin their product :-)
I’m highlighting to design app in @2x resolution 640 x 1136 or 750 x 1334 that would be the best option and for @3x you can work on the specifications like images, icons, etc,.
And when it comes to the tapping area for the user, 88px height is the suggested one as standard @2x. (Keep this is in mind all time!)
And rest is in all your hands to shed your love on your designs.
I’ll cover up about icons, app icons, appstore screen-shots next, next, by next :-)
Written by: Jagadish Thanki
Design Showcase: Dribbble & Behance
Twitter handle: @jagadishthanki
