For your mobile application you will need to prepare many specific graphical assets. This is a small guide which will show you what to prepare and how. I will primarily focus on our customers who want to prepare graphical design on their own. But it might be useful for any graphical designer who doesn’t want to miss anything.
Before you start
It could come handy to go through UI guidelines for both platforms, before you start:
This short summary doesn´t aspire to be a replacement of the official guidelines. Its goal is to list all necessary basic assets you have to prepare for any app. All this is used for both main platforms Android and iOS. The guidelines will help you to prepare proper information architecture for your app, mention why to follow platform-specific style of design, why it is not a good idea to create only one identical design for both platforms and other useful information.
To save some time
Do you prepare your design in Adobe Photoshop? This paragraph could save you some working-hours! Try Cut&Slice me. It is an excellent tool for exporting web and mobile graphic design from Photoshop. Design once and export for all device types with one single click. Everything will be placed in the folders with odd names, ready to use for your developers.
The beating heart of your app. It will represent you in the application store, it will be placed on the phone desktop and users definitely have to identify it when finding your app.
The icon for iOS have to be exported as PNG without alpha and without rounded corners. Those will be made later automatically by Apple.
|29 x 29|
|40 x 40|
|58 x 58|
|76 x 76|
|80 x 80|
|87 x 87|
|120 x 120|
|152 x 152|
|167 x 167|
|180 x 180|
|512 x 512|
|1024 x 1024|
The icon is used as exported, so you have to prepare it with rounded corners, shadows, etc.
|48 x 48|
|72 x 72|
|96 x 96|
|144 x 144|
|512 x 512|
Google Play graphic
Two different formats are used in Google Play to better promote your application in the store. The Feature graphic is currently mandatory, but the Promotional graphic is optional. We recommend to prepare both. Google sometimes changes this requirements, so you will be prepared for future changes.
|1024 x 500||Feature graphic|
|180 x 120||Promotional graphic|
You can find details about this graphic assets in article Google Play Featured-Image Guidelines on official Android Develpers blog.
All graphic assets for Google Play are listed in this Google help.
Splash screen (iOS only)
In Apple terminology called Launch screen. The image shown when your app is starting. It is relevant only for iOS platform, there is nothing like thison Android.
Plain PNG prepared for all device sizes. This is the way to prepare pixel-perfect splashscreen for all devices, but i requires more effort. Traditional splashscreen have to match this criteria:
- Do not use alpha channel.
- Prepare it as PNG.
Required size in pixels is as follows:
|portrait||640 x 960||@2x (retina)|
|portrait||640 x 1136||@2x (retina)|
|portrait||750 x 1334||@2x (retina)|
|landscape||1334 x 750||@2x (retina)|
|iPhone 6 Plus|
|portrait||1242 x 2208||@3x (retina HD)|
|landscape||2208 x 1242||@3x (retina HD)|
|iPad a iPad mini|
|portrait||768 x 1024||@1x (non-retina)|
|landscape||1024 x 768||@1x (non-retina)|
|iPad a iPad mini retina|
|portrait||1536 x 2048||@2x (retina)|
|landscape||2048 x 1536||@2x (retina)|
|12.9-inch iPad Pro|
|portrait||2048 x 2732||@2x (retina)|
|landscape||2732 x 2048||@2x (retina)|
You can prepare only one PNG image 320x320px in size and we will fill place behind it with solid color for all devices. For example white logo of your company on black background. PNG could use transparency and we can place it anywhere on the screen.
Images with app preview for Google Play and AppStore.
Dimensions are the same as for Splashscreen. You have to follow this rules:
- No alpha channel.
- PNG format.
- Max 5 images from one device.
There are no exactly defined dimensions for Android platform. Requirements are only as follows:
- Screenshots from phone, 7 inch tablet and 10 inch tablet with any resolution.
- JPEG or 24bit PNG (without alpha channel).
- Minimal length of both sides 320 pixelů.
- Maximal length of both sides 3840 pixelů.
- Min 2, max 8 screenshots for every device.
For better promotion of your app.
- Minimal length 15 seconds.
- Maximal length 30 seconds.
- Maximal frames rate 30 (FPS).
- Supported formats .mov, .mp4, .m4v.
- Max file size 500MB.
- Video codec H.264.
- Audio codec 256kbps AAC.
- Samling rate 44.1kHz or 48kHz.
- Video is unavailable on 3.5-Inch devices.
- Only one language is accepted.
- Must disclose In-App Purchases.
- Video nesmí obsahovat reklamu, loga platforem, ceny, časové plány.
- Akceptována jsou tato rozlišení videa:
|iPhone 4||video není k dispozici|
|iPhone 5||1920 x 1080 nebo 1136 x 640||1080 x 1920 nebo 640 x 1136|
|iPhone 6||1334 x 750||750 x 1334|
|iPhone 6 Plus||1920 x 1080||1080 x 1920|
|iPad||1200 x 900||900 x 1200|
Vkládá se odkaz na Youtube a tak i vlastnosti videa se řídí požadavky tohoto portálu.
Actual application design
We will not discuss how to design your app properly. It is in-depth described in design guidelines mentioned above. But even if you know what to draw, one simple question remains. What is the recommended resolution of the app design? There is not any simple universal recommendation which would work for all apps, but this resolutions will usually work:
|Phone||960 x 1440 px|
|7″ tablet||1800 x 2700 px|
|10″ tablet||2160 x 3240 px|
In terms of phones, it is adjusted for the smallest displays on the market. It’s more simple to stretch the design for bigger devices than to place the design for big display on a small one.