[The iPhone 4 is now out with Retina Display so you need to make even more icons now to deal with the increased resolution. There’s a great post here covering all the new details.]
…and also iPhone UI Element Specifications
This post contains full details on uploading to the App Store. It contains the UI requirements listed in the first 27 of 127 pages of the iTunes Connect Developer Guide PDF as well as on the iPhone Dev Center.
In an effort to ensure any iPhone apps get immediately accepted to the App Store, research shows that completing the iTunes Connect steps correctly is essential. The following are a record of the UI steps.
Excerpts from Sources with UI Focus
Application General Requirements
- Applications for App Store must follow Apple Human Interface Guidelines
- App Description Must be medium length, not three sentences and not 1000s of words. Probably 5-7 sentences will do – think about this information fitting on an iPhone screen, with the user on the App Store searching for our product. NO HTML IN THIS AREA.
- © symbol is appended so no need to add this to copyright dates for software (the dates are entered when submitting the app for approval in a smart form)
- “1.0” – Version example Keep it short and simple, no long versions if possible
- SKU is required but not user facing
- App URL and Support URL are available on product page, right hand column – MAKE SURE THESE ARE LIVE BEFORE SUBMITTING THE APP, to avoid 404 errors.
- App License Agreement URL is important and should also be available before the app is uploaded
App Sizes for Upload
- Compress .app as .zip archive for upload
- 10MB for Cell Downloads (any larger and slower networks won’t be able to handle it).
- 200MB+ use “Application Loader Tool” for large binaries, or on a slow or spotty internet connections
- HARD LIMIT IS 2GB
App ID to identify the application
- App ID for the application should remain static, even across new versions
- Build the app: Active SDK “Device”, Active Config to “Release”, Code Signing Identity, Code Signing Provisioning Profile
When the App Goes Live
Email will be sent to all users with priveleges on the account that the App has been accepted. Make sure all supporting URLs are active before this happens.
Changes to the Application
Marketing Material Updates – Are called “Live Edits” and occur instantly. These include product descriptions, mostly text edits. Possibly Screenshots, though not sure at this time (22-Feb-2010).
App Binary Updates – “Update System in App Store”* This isn’t incremental, but the entire app must be reuploaded for each new version. This update is not a Live Edit and may take some time (eg. approval process).
iPhone App Design UI Requirements
All graphics are 72dpi; transparent background; .PNG; 24 bit files unless otherwise noted. No need to constrain to web-safe colors.
Most authoritative and exhaustive information on Apple’s Developer Website for iPhone, in particular the Custom Icons and Images section.
The Basics
- Screen Resolution: 320×480 (or 480×320 landscape mode)
- Screen is 163ppi (or dpi) as opposed to 72dpi for most monitors. This means your individual pixels are smaller on the iPhone screen than on your monitor. Important to think about particularly for legibility of small text.
- Colors: 262,144
- Contrast: use higher contrast than normal for art on the iPhone screen
- Preferred Graphics Format: .PNG
Graphics
Application Icon: Measures 57 x 57 pixels, with 90 degree corners (if the image measures other than this size, iPhone OS scales it). Does not have any shine or gloss. Does not use alpha transparency. Large 512 x 512 version of icon for display in the App Store.
When you submit your application, you must include a 512 x 512 pixel version of your application icon for display in the App Store. Although it’s important that this version be instantly recognizable as your application icon, it should be subtly richer and more detailed. In other words, you should not simply scale up your application icon to create an icon for the App Store.
You must also provide a 512 x 512 pixel version of your application icon if you’re developing an application for ad-hoc distribution (that is, to be distributed in-house only, not through the App Store). In the ad-hoc case, name the icon file iTunesArtwork (no file extension) and place it at the top level of your application bundle. This icon identifies your application in iTunes.
- Chat Avatars: 50px x 50px
- Chat Bubbles: 37px x 28px These dynamic, all resize to contain text content padded in the center (approx 5px padding)
- Launch Image To enhance the user’s experience at application launch, you should provide a launch image. A launch image looks very similar to the first screen your application displays. iPhone OS displays this image instantly when the user taps your application icon on the Home screen. As soon as it’s ready for use, your application displays its first screen, replacing the launch placeholder image.
- Login and General Screen Backgrounds: 320px x 480px. These are used in the background underneath page ui elements (buttons, etc.).
- Status Bar 320px x 20px
- NavigationBar 320px x 44px
- TabBar Icons: ~30px x ~30px Use pure white with appropriate Alpha; no drop shadow; use Anti-Aliasing
- TabBar 320px x 49px
- ToolBar 320px x 44px
Sizes of iPhone UI Elements
Note: The icon you provide for toolbars, navigation bars, and tab bars is used as a mask to create the icon you see in your application. It is not necessary to create a full-color icon.
iPhone OS automatically provides the pressed or selected appearance for items in navigation bars, toolbars, and tab bars, so you only need to provide a single version of an icon. Because these visual effects are automatic, you cannot change their appearance.
Standard iPhone Fonts
The following fonts are included with the iPhone. Adding more is an extremely difficult process.
- American Typewriter
- AppleGothic
- Arial
- Arial Rounded MT Bold
- Arial Unicode MS, Courier
- Courier New, DB LCD Temp
- Georgia
- Helvetica
- Helvetica Neue
- Hiragino Kaku Gothic ProN W3
- Hiragino Kaku Gothic ProN W6
- Marker Felt
- STHeiti J
- STHeiti K
- STHeiti SC
- STHeiti TC
- Times New Roman
- Trebuchet MS
- Verdana
- Zapfino
iTunes App Store Look and Feel Requirements
- Icons – These can be square, without shine – iPhone automatically rounds and adds shine to all icon graphics
- 57×57 Small Application Icon:, png app icon (no rounded corners or shine needed). Displayed on iphone home screen and on App Store.
- 512 x 512 Large Application Icon: No layers, no transparency, rgb, jpg or tiff format. Displayed on desktop App Store (could also be used as “Feature Application” icon on the App Store).
- Primary Screenshot (no zip-compressed TIFF images allowed) – 1 + 4 Additional, if desired
- Primary screenshot can be uploaded and up to four additional screenshots. REMOVE THE STATUS BAR from screenshots.
- NOTE: Screenshots do not include status bar and up to four can be uploaded
- Portrait Mode 320×460 Minimum; 320×480 Maximum – 72ppi, RGB, flattened, no trans, High quality jpg or TIFF image file format. Do not include the iPhone status bar.
- Landscape Mode 480×300 Minimum; 480×320 Maximum – 72ppi, RGB, flattened, no trans, High quality jpg or TIFF image file format. Do not include the iPhone status bar.
- Additional screenshots can be resized to fit, but it’s best to provide Portrait and Landscape versions for best results.
Optional Art (upon request) – Featured app – Have high quality art available, think movie poster design
- Title Treatment/Logo: Vector eps/ai, 600×600 min converted to a Tiff, PNG or PSG with transparent background
- Background: Min 600×600 JPG, Tiff, PSD, non transparent (this is what the logo rides on top of)
- Fully designed product page: 900 x 530 layered PSD file, this is title plus background only larger.
