View other articles
The iOS Design Cheat Sheet v2
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 |