Iphone App Design

Resolutions & Display Specifications

Resolutions

Devices Portrait Landscape
iPhone 5 iPhone 5, 5S, 5C 640×1136 px 1136×640 px
iPhone 4/4S 640×960 px 960×640 px
iPhone & iPod Touch 1st, 2nd and 3rd Generation 320×480 px 480×320 px
Retina iPad iPad 3, iPad 4, iPad Air 1536×2048 px 2048×1536 px
iPad Mini 768×1024 px 1024×768 px
iPad Mini Retina 1536×2048 px 2048×1536 px
iPad 1st and 2nd Generation 768×1024 px 1024×768 px

 

Displays

Devices PPI Color Mode Color Temperature
iPhone 5 iPhone 5, 5S, 5C 326 8bit RGB Warm
iPhone 4/4S 326 8bit RGB Cool
iPhone & iPod Touch 1st, 2nd and 3rd Generation 163 8bit RGB Warm
Retina iPad iPad 3, iPad 4, iPad Air 264 8bit RGB Warm
iPad Mini 163 8bit RGB Warm
iPad Mini Retina 326 8bit RGB Warm
iPad 1st and 2nd Generation 132 8bit RGB Warm

 

App Icons

One of the biggest changes in iOS 7 is the new dimensions and the visual language used for app icons. Apple introduced a grid system, increased the general size of icons on your home screen and also masked icons with a different shape.

Dimensions

Device App Icon AppStore Icon Spotlight Icon Settings Icon
iPhone 5 iPhone 5, 5S, 5C 120×120 px 1024×1024 px 80×80 px 58×58 px
iPhone 4/4S 120×120 px 1024×1024 px 80×80 px 58×58 px
Retina iPad iPad 3, 4, Air, Mini Retina 152×152 px 1024×1024 px 80×80 px 58×58 px
iPad Mini 76×76 px 512×512 px 40×40 px 29×29 px
iPad 1st and 2nd Generation 76×76 px 512×512 px 40×40 px 29×29 px

 

User Interface

The biggest change in iOS 7 is definitely the all new flat user interface design language used across the whole operating system. While pretty much all gradients and shadows got removed from UI elements, the sizes of commonly used design elements got changed in some cases as well.

Commonly used design elements

Device Height of Status Bar Height of Navigation Bar Height of Tab Bar Width of Tables
iPhone 5 iPhone 5, 5S, 5C 40 px 88 / 64 px 98 px 640 / 1136 px
iPhone 4/4S 40 px 88 / 64 px 98 px 640 / 960 px
Retina iPad iPad 3, 4, Air, Mini Retina 40 px 88 px 112 px dynamic
iPad Mini 20 px 44 px 56 px dynamic
iPad 1st and 2nd Generation 20 px 44 px 56 px dynamic

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s