The iOS Design Cheat Sheet (Vol. 2)

Displays, dimensions and icons.

This article is outdated.

The current version of this article includes data for iOS 8 and all new Apple devices while this one only covers all iOS versions up to 6 and iPhone 4.

View the new version

More than a year ago, I published the iOS Design Cheat Sheet, a collection of useful data about iOS devices and things you have to keep in mind when designing something for iOS. Since the last update of my Cheat Sheet, a lot has changed in the world of Apple’s mobile devices. Designers now have to deal with a retina resolution iPad (aka. “The new iPad”), and a new 16:9 format iPhone 5.

Instead of a bulky PDF, the new Cheat Sheet is right here on this site. This way, people can find it more easily and won’t need to download anything if they just want to know a specific icon size. If you have spotted some wrong data or if you think there is something important missing, just let me know and I will quickly update the cheat sheet.

Resolutions

Devices Portrait Landscape
iPhone 5 640x1136 px 1136x640 px
iPhone 4/4S 640x960 px 960x640 px
iPhone & iPod Touch 1st, 2nd and 3rd Generation 320x480 px 480x320 px
Retina iPad iPad 3, iPad 4 1536x2048 px 2048x1536 px
iPad Mini 768x1024 px 1024x768 px
iPad 1st and 2nd Generation 768x1024 px 1024x768 px

Displays

Devices PPI Color Mode Color Temperature
iPhone 5 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 264 8bit RGB Warm
iPad Mini 163 8bit RGB Unknown
iPad 1st and 2nd Generation 132 8bit RGB Warm

Icons

Devices App Icon Pixels Radius Appstore Icon Pixels Radius Spotlight Icon Pixels Radius Document Pixels Tab Bar Pixels
iPhone 5 114x11420px 1024x1024180px 58x5810px 44x58 60x60
iPhone 4/4S 114x11420px 1024x1024180px 58x5810px 44x58 60x60
iPhone & iPod Touch 1st, 2nd and 3rd Generation 57x5710px 512x51290px 29x295px 22x29 30x30
Retina iPad iPad 3, iPad 4 144x14424px 1024x1024180px 100x10020px 128x128 60x60
iPad Mini 72x7212px 512x51290px 50x509px 64x64 30x30
iPad 1st and 2nd Generation 72x7212px 512x51290px 50x509px 64x64 30x30

Commonly used design elements

Devices Height of Status Bar Height of Nav Bar Height of Tab Bar Width of Tables
iPhone 5 40px 88px 98px 604px / 1100px
iPhone 4/4S 40px 88px 98px 604px / 924px
iPhone & iPod Touch 1st, 2nd and 3rd Generation 20px 44px 49px 302px / 462px
Retina iPad iPad 3, iPad 4 40px 88px 98px dynamic
iPad Mini 20px 44px 49px dynamic
iPad 1st and 2nd Generation 20px 44px 49px dynamic
Like what you’re reading? Subscribe to get notified about new articles.
RSS