The iOS Design Cheat Sheet

When you are designing a lot of applications for Apple’s touch devices like the iPhone or iPad you often have to follow some conventions regarding sizes or radii of Icons, Buttons or Tables. Because it is always a big time loss if you have to search on the Web for this information again and again, I’ve put the most important specifications into a nice iOS Design Cheat Sheet.

Download the iOS Design Cheat Sheet

You can download the Cheat Sheet as printable (300dpi) PDF or as normal sized PNG.

While I’ve found out some information on my own, these guys provided some very helpful details via Forrst or Twitter too: Sean Nicholls and Fabio Basile.

Some Tips that can be useful

The Help Sheet offers the most important information but the devil is in the detail. When designing for the iOS (especially when you have to design for all kind of displays) there are numerous details you have to care for.

About Pixels & Points

When scaling your design up (for Retina) or down (e.g. for 3GS) you don’t have to change the DPI for your document in Photoshop or Fireworks – you have to absolute double/half the resolution (ignore the DPI and stay at 72).

The Points are more similar to Points for Apple’s devices, more information about the Resolution Independence can be found here.

Automatically added effects to app icons

There are some effects that will be rendered automatically for App Icons, such as:

• Rounded Corners – this effect can not be removed turned off. You should save your Icons as squares without rounded corners because they will be added by the system itself.
• Default gloss effect above the Icon – this effect can be removed if needed, use the UIPrerenderedIcon plist settings to disable.
• Dropshadow – can not be removed.

Automatically added effects to tab bar icons

Tab Bar Icons are handled differently than other Icons; you don’t have to provide normal and active states for the Icon, just the basic shape with transparent background. iOS will add all effects to these shapes. That includes gradients, overlays and dropshadows for both, normal and active states.

Image formats

When exporting images you should always choose to export as PNG (24 or 32 bit).

Any additions?

I hope this Cheat Sheet is a useful resource for everyone who designs iOS Apps. If you feel I’ve missed something, or have a tip that should be added to the post, please let me know in the Comments section below.