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.
by Ivo Mynttinen
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 |
Glad you liked it. Would you like to share?
Facebook
Twitter
Sharing this page …
Thanks! Close
Add New Comment
Showing 21 comments
Is there an android cheat sheet like this anywhere? Awesome work anyways, thanks so much!
I never saw an Android Cheat Sheet out there and it might be hard to create one due to Androids platform fragmentation and different UIs (like 2.3 compared with the new Holo). However, I would suggest to stick with the official Android Design Guidelines (http://developer.android.com/d... since you will find the most valuable information there.
Nice roundup - thanks!
I had no idea that the colour temperature varied between devices
Nice work!
A few suggestions, if you don't mind:
- "Height of Title Bar" should probably be "Height of Nav Bar".
- It'd be good to see the measurements in iOS points as well as pixels.
- This post will give you the corner radius for the icons listed: http://stackoverflow.com/a/102...
Thanks for this great work.
very useful.
Gr8 work, really useful :)
Not totally sure about the border radius numbers here. From what I understand, they won’t all have nice round numbers. Reference: drbarnard’s answer in this post: http://stackoverflow.com/quest...
That's correct, some radius numbers are not round. However, you round them down for several reasons: it's hard to use decimal numbers when working with pixels (every saw a 1/3 pixel?), some graphic design software does not support decimal values when working with a pixel grid (because of this fact) and also the radius is created automatically when you deploy your app which means you will always have the correct values, even if your radius is slightly different (as long as your radius is smaller as the Apple radius).
Photoshop does actually support decimals for rounded rectangle corner radius. It's a little quirky, but does work (tested in Photoshop CS5 and CS6).
Fireworks for example won't allow it. You can switch to percentage values but that screws up anything even more.
Don't you mean 24-bit RGB—eight bits per channel—and not 8-bit RGB color?
Please, reconsider adding the PDF back. Bookmarking is not more convenient than downloading a PDF.
Thanks! A PDF would be awesome for printing.
I didn't understand why the width of tables is 604px on iphone 4/4S. Typo?
(Edited by author 3 weeks ago)
No this is not a typo, it describes the width of tables. Here you can see what I mean: http://cl.ly/M1Ka
Hm.. I see, the default width of grouped table views. Thanks. :)
I'd still love to have a .pdf of this one - can I still get it?
You could get the old iOS Cheat Sheet http://ivomynttinen.com/blog/t... which is available as pdf, but the old one is obviously outdated. There are currently no plans to transform the new one into a pdf.
(Edited by author 3 weeks ago)
PDF +1 :D
How about pixel to point scaling on the devices?
Others useful: UIButtons (44px recommended), UITextfield, Keyboard size...
Reactions