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.
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.
You should also check how to work with fonts. Especially when you intend to use custom font, please go through its licence carefully.
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.
| Dimensions |
|---|
| 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.
| Dimensions |
|---|
| 48 x 48 |
| 72 x 72 |
| 96 x 96 |
| 144 x 144 |
| 512 x 512 |
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.
| Type | Dimension |
|---|---|
| 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.
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:
Required size in pixels is as follows:
| iPhone 4 | ||
|---|---|---|
| portrait | 640 x 960 | @2x (retina) |
| iPhone 5 | ||
| portrait | 640 x 1136 | @2x (retina) |
| iPhone 6 | ||
| 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:
There are no exactly defined dimensions for Android platform. Requirements are only as follows:
For better promotion of your app.
Requirements:
| Zařízení | Landscape | Portrait |
|---|---|---|
| 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.
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:
| Device type | Dimensions |
|---|---|
| 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.
