How to prepare graphical design for mobile app

25. 04. 2018

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:

• Android design guidelines
• iOS Human Interface Guidelines

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.

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.

Icon

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.

iOS

The icon for iOS have to be exported as PNG without alpha and without rounded corners. Those will be made later automatically by Apple.

Android

The icon is used as exported, so you have to prepare it with rounded corners, shadows, etc.

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.

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.

Traditional splashscreen

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:

Generated splashscreen

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.

Screenshots

Images with app preview for Google Play and AppStore.

iOS

Dimensions are the same as for Splashscreen. You have to follow this rules:

• No alpha channel.
• PNG format.
• Max 5 images from one device.

Android

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.

Video

For better promotion of your app.

iOS

Requirements:

• 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:

Android

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:

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.