The iOS Design Cheat Sheet (Vol. 2)
Displays, dimensions and icons.
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.
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 |
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 |
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 |
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 |