Resources/

App Store Optimization Guide for iOS Apps. Part 2: Graphics Optimization

The 2nd part of our ASO guide reviews the aspect of graphics optimization. Discover how you can improve the visual metadata to promote your app efficiently!

September 12, 2019

In ASO Guide Part 2, we provide an in-depth look at how to ace the graphics metadata of your mobile iOS app or game on the App Store by Apple. Learn all you need to know about the best, most effective App Store Optimization of the visuals in your app icon and screenshot images as well as app preview videos. (See ASO Guide Part 1 for the guidelines on how to optimize texts and ASO Guide Part 3 for the guidelines on how to leverage the other available techniques and resources.)

#1. App Icon — Design a Compelling Logo

Design a Compelling Logo

Image credit: developer.apple.com

App icon, or app logo, is the first element users see once they've found your app or game on the App Store, along with the app name. That is why an icon needs to be eye-catching and visually stand out, making a very strong impression already at first glance. Ideally, it should also communicate the (high) quality of your mobile app and hint at its core purpose.

In fact, iOS game and app developers are expected to provide a bunch of icons for their products, making sure they look great everywhere. A large app icon sized 1024x1024 px is used throughout Apple’s App Store — it’s your main app icon that appears on your app’s product page, in the search results, editorial featurings, and so on. Smaller ones are needed to make sure your app icon looks great on all supported iOS devices and are intended for the on-device home screen and in-system use. In addition, apps can have separate small icons for display in the the ‘Spotlight’ search results, ‘Settings’ app (for apps with settings), and notifications (for apps supporting notifications).

Good news for those developers whose mobile apps are supposed to create documents: You are not required to additionally supply document icons as the system will generate them for you automatically based on the main app icon.

ASO tips and guidelines: app icon

1. Opt for a recognizable and memorable app icon design that is meaningful in conveying what your mobile app does. It should give a clear idea of the app’s purpose together with the app’s name (which is accompanying the icon all over the App Store) and differentiate your product from competitors. Getting a professional graphic designer involved to work with you on your app icon concept and implementation is usually a must. Before beginning to work on the app icon — and basically all other graphics — check Apple’s official Human Interface Guidelines and make sure to adhere to them at all times.

2. Keep your app icon simple and neat. Implement no more than one focus point to instantly capture the user's attention. Do not overload it with complicated forms, multiple colors, or unnecessary small elements. Avoid using screenshots, photos, sketches, or UI elements as part of the icon.

3. Design the app icon consistent with your iOS app's general visual style that you should keep in mind when choosing a color palette, shapes, etc.

4. Think twice before using any words and texts on your app icon. It is shown together with the app name. There are also many other text fields that you can make use of for copy, whereas the icon itself should remain a fully graphical, visual element not designed for reading.

5. Organize A/B tests to determine the best performing version that attracts the most attention of your target audience.

6. Remember to add your app icon in all the necessary sizes. In addition to a big one for the App Store, you are required to upload smaller icons for different devices to be shown on the Home screen and other places throughout the system when the user has already got your app. It is recommended to add separate app icons for use in the ‘Spotlight’ search, as well as in ‘Settings’ and notifications if these are supported in your iOS app.

7. Mind scalability as your app icon should be legible in all sizes. In particular, keep in mind that if you fail to provide smaller icons for ‘Spotlight,’ ‘Settings,’ and notifications, the system will automatically shrink the main app icon to fit the display specifications determined specifically for those locations. Also, for example, document icons are automatically created from your main app icon.

8. Developers are allowed to make an App Store icon look different from smaller icons. However, be careful as you certainly do not want to confuse users showing them too different-looking icons for your app on their devices on the one hand and on the App Store on the other hand. According to Apple’s guidelines, the App Store icon “should generally match the smaller version in appearance, although it can be subtly richer and more detailed since there are no visual effects applied to it.

9. To add beauty and contrast, consider using gradients, borders, shadows, and some other graphical features as you see fit. However, no border or overlay should be used on the ‘Settings’ icon because it is automatically provided with a 1-px stroke to make sure they look fine on the Settings' background.

10. Test your app icon intended for display on users’ iOS devices when your app is already installed against diverse backgrounds, differently colored and structured, making sure it is finely visible and recognizable on any kind of wallpaper that users might have.

11. You may build alternate app icons and allow your app users to choose from them. If that's your choice, make sure you provide the same whole bunch of app icons of different sizes.

12. Double-check that your app icon image is perceived the way you want in all your target languages, countries, and cultures.

App icon specifications and requirements

  • PNG format.
  • sRGB or P3 color space.
  • Flattened layers without any transparency.
  • Square shape with square corners, not rounded (Apple implements a dedicated mask to automatically round the corners of the icons).
  • No reproduction of iPhone, iPad, or other Apple's products, like any copyrighted product or object, is acceptable.
  • Apple requires a large icon as your main app icon — for use throughout the App Store. (See the 'App Store icon size' specifications below.)
  • Apps must also provide smaller, device-specific icons to be used on users’ devices when the app is already installed. (See the 'In-system icon size' specifications below.)
  • If you choose to follow a recommendation to upload additional icons, adhere to the corresponding specifications. (See the 'Spotlight icon size,' 'Settings icon size,' and 'Notifications icon size' specifications below.)

Icon size specifications:

App Store icon size

  • 1024px × 1024px (1024pt × 1024pt @1x)

In-system icon size

  • iPhone 180px × 180px (60pt × 60pt @3x) and 120px × 120px (60pt × 60pt @2x)
  • iPad Pro 167px × 167px (83.5pt × 83.5pt @2x)
  • iPad, iPad mini 152px × 152px (76pt × 76pt @2x)

‘Spotlight’ icon size

  • iPhone 120px × 120px (40pt × 40pt @3x) and 80px × 80px (40pt × 40pt @2x)
  • iPad Pro, iPad, iPad mini 80px × 80px (40pt × 40pt @2x)

‘Settings’ icon size

  • iPhone 87px × 87px (29pt × 29pt @3x) and 58px × 58px (29pt × 29pt @2x)
  • iPad Pro, iPad, iPad mini 58px × 58px (29pt × 29pt @2x)

Notifications icon size

  • iPhone 60px × 60px (20pt × 20pt @3x) and 40px × 40px (20pt × 20pt @2x)
  • iPad Pro, iPad, iPad mini 40px × 40px (20pt × 20pt @2x)

See the official App Icon Guidelines from Apple to learn more.

Checklist for app icon ASO

Make sure your iOS app icon is:

  • relevant and compelling
  • concise and simple
  • recognizable and memorable
  • consistent with the app design
  • lacking texts
  • provided — ready and good-looking — in all required and recommended sizes
  • finely tested (backgrounds, devices, performance…)
  • without forbidden elements
  • appropriate for each local market targeted
  • following the iOS app icon restrictions when it comes to format, size, etc.

#2. Screenshots — Develop Captivating Screenshots from Your App

Develop Captivating Screenshots from Your App Img

Image credit: developer.apple.com

Screenshots play a very important role in capturing the attention of users on the App Store and making them want to download your mobile app or game. Shown right next to (just after) your app video preview(s), screenshots are intended to visually communicate what your app does along with demonstrating its user experience, supplying extra information about it, and highlighting its key features in the form of beautiful visual samples.

As a graphical element, app screenshots have no direct influence on how high an iOS app appears in search all over Apple’s App Store as they are not among the ranking factors at all. However, screenshots are visible both on an app page, where they are among the very first elements seen, and in the search results. So they actually mean a lot for conversion rates when it comes to the App Store optimization.

While uploading video app previews is totally optional and up to developers, Apple requires at least one screenshot to be added.

ASO tips and guidelines: screenshots

1. Use screenshots to visually communicate the user experience of your mobile app by using images from its user interface. Utilize matching colors and visual forms whose harmony does the best job of representing the essence, spirit, and objective of the app.

2. Focus every screenshot to highlight a certain feature or value in a way that, taken altogether, they provide a complete understanding of the greatness of your app. Consider designing and arranging the screenshots in a way that makes them logically connected and telling a story.

3. Think of making up a cool 'panoramic' view across two or more subsequent (usually portrait-oriented) screenshots for another test as sometimes, when implemented properly, this practice can bring amazing results. When doing so, make sure the screenshots actually match and fit together with no shifts. Do not split text between the screenshots to keep all this enjoyably legible.

4. When an iOS app supports the dark mode, make sure to add at least one screenshot that shows it in action.

5. Make effort to work on the content. In fact, it is a very good practice to put a short and compelling copy on the screenshots, voicing a feature, or value, or action displayed on the image. Such content can be very helpful in making the whole gallery look like an exciting visual story that truly engages. Make sure the content and the resulting complex screenshot image follow the 'AIDA' copywriting formula — captures Attention, arouses Interest, creates a Desire, and makes users take an Action.

6. Consider the orientation of your app screenshots as it actually matters.

  • Portrait (vertical) orientation allows more screenshots to fit the screen width-wise, which means you can show the user more features (or actually say more different things) within the first impression and with no or less need for them to scroll for more assets/info. When you are using portrait-oriented screenshots, the first three of them will be displayed in the search results and users will see the first two of them in the first visible frame on the product page (the entire first one and the left half of the second one).
  • Landscape (horizontal) orientation guarantees a focus on one particular key message. If you decide to opt for the landscape orientation for your iOS app screenshots, then only one — the first one — will be shown in the search results and in the first impression frame on your product page; at the same time, a promotional text will get included in the first impression of users on your app product page as it will be shown right under the screenshot.

Note that videos (app previews) have a higher priority than screenshots, which means previews are always shown before screenshots, on the same place and according to the same logic. For example, if you've added one landscape preview, it will be the only descriptive visual asset shown about your mobile app in the search results and it will occupy the whole width of the first impression frame on the product page. If you've added one portrait preview, it will be shown at the first place plus the first two (portrait) screenshots in the search results, and it will be shown first on the product page (before the screenshots). And so on.

7. Given the above, make sure to concentrate the biggest impressions in the very first screenshots, starting from the more important features and benefits, in order to make sure what is seen on the first screen (without any scroll) is most meaningful and attractive to ensure the best conversion rates. According to studies, you have just a few seconds to convince the user (when they are on your product page) to learn more about your app and install it — in fact, seven seconds is the average time they stay on an app's product page.

8. Try different ways of screenshot design (including both layout and content), orientation, arrangement, and so on to identify the best forms and options. A/B testing indeed is a must when it comes to the visual part of your app description and promotion on the App Store.

9. Localize your app screenshots for every local market. Keep in mind that the most effective localization is not translation alone. Make sure the look and content are finely adapted and will be perceived well in each target country and culture.

10. Different devices need different sizes, so make sure to submit your app screenshots for each type of device on which your app is supposed to be opened and used (for size details, see the next section below dedicated to requirements and specifications for screenshots).

If your app indeed looks the same on all iOS devices and in all sizes, you are explicitly allowed by Apple to upload the highest resolution images for each device type, iPad or iPhone. In this case, the system will scale your app screenshots automatically for all other (smaller) device sizes. For example, it is sufficient to provide iPhone screenshots required for 5.5'' (iPhone 6s Plus, iPhone 7 Plus, and iPhone 8 Plus) and 6.5'' (iPhone Xs Max) devices, and iPad screenshots required for 12.9'' iPad Pro of the second and third generations.

11. Think ahead as you are only allowed to upload screenshots when you release a new version of your app or when its status is editable.

App screenshot specifications and requirements

  • Hi-res RGB images with 72 dpi and vertical (portrait) or horizontal (landscape) orientation. Flattened, i.e. with all the image layers condensed into a single one
  • No transparency
  • File format: JPEG or PNG
  • It is allowed to upload 1 (minimum) to 10 (maximum) screenshots
  • Screenshots must be directly relevant to your iOS app’s look. Apple strongly encourages developers to show the app in use rather than a title art, or splash screen, etc.
  • Unauthorized use of protected third-party images or terms is prohibited. So is any objectionable visual or content.

Screenshot size specifications:

iPhone screenshot size

  • 6.5'' (iPhone 11 Pro Max, iPhone 11, iPhone XS Max, iPhone XR) 1242x2688 px (portrait) or 2688x1242 px (landscape)
  • 5.8'' (iPhone 11 Pro, iPhone X, iPhone XS) 1125x2436 px (portrait) or 2436x1125 px (landscape)
  • 5.5'' (iPhone 6s Plus, iPhone 7 Plus, iPhone 8 Plus) 1242x2208 px (portrait) or 2208x1242 px (landscape)
  • 4.7'' (iPhone 6, iPhone 6s, iPhone 7, iPhone 8) 750x1334 px (portrait) or 1334x750 px (landscape)
  • 4'' (iPhone SE) 640x1096 px (portrait without status bar) or 640x1136 px (portrait with status bar) or 1136x600 px (landscape without status bar) or 1136x640 px (landscape with status bar)
  • 3.5'' (iPhone 4s) 640x920 px (portrait without status bar) or 640x960 px (portrait with status bar) or 960x600 px (landscape (without status bar) or 960x640 px (landscape with status bar)

iPad screenshot size

  • 12.9'' (3rd generation iPad Pro) 2048x2732 px (portrait) or 2732x2048 px (landscape)
  • 12.9'' (2nd generation iPad Pro) 2048x2732 px (portrait) or 2732x2048 px (landscape)
  • 11'' (iPad Pro) 1668x2388 px (portrait) or 2388x1668 px (landscape)
  • 10.5'' (7th generation iPad, iPad Pro, iPad Air) 1668x2224 px (portrait) or 2224x1668 px (landscape)
  • 9.7'' (iPad, iPad mini) High Resolution: 1536x2008 px (portrait (without status bar) or 1536x2048 px (portrait with status bar) or 2048x1496 px (landscape without status bar) or 2048x1536 px (landscape with status bar). Standard resolution: 768x1004 px (portrait without status bar) or 768x1024 px (portrait with status bar) or 1024x748 px (landscape (without status bar) or 1024x768 px (landscape with status bar)

Learn more and stay updated on Apple’s app screenshot specifications for the App Store here. Note: In case an app uses the Messages framework or WatchKit, you must add additional screenshots.

Checklist for screenshots ASO

Make sure your iOS app screenshots are:

  • thoughtfully chosen to have a portrait or landscape orientation
  • demonstrating your app in use
  • displaying the key features on the first one to two (three max) screenshots
  • showcasing specials if any
  • presenting the dark mode look
  • making most of the space you've got — using all the ten screenshot slots in total
  • creating a captivating, intriguing storyline across the screenshots
  • visually connecting the first two or three (or more) screenshots to build a panoramic experience
  • consistent with your app design style
  • provided with striking captions with quick, strictly focused, motivating explanations written in a large, easily recognizable font
  • produced without protected or objectionable elements, graphical or textual
  • uploaded for each device according to the specifications
  • complying with the requirements and restrictions
  • localized

#3. App Previews — Produce Stunning Video Presentations

Produce Stunning Video Presentations

Image credit: developer.apple.com

App previews are short videos demonstrating what a mobile app or game does and how it looks inside, in a streamlined manner. Intended as the key multimedia format to present its user interface, features and functionality, (animated) previews have a higher priority than (static) screenshots and play a crucial part in the conversion optimization on the App Store.

In the search results, only the first preview is displayed. It is followed by the first and second screenshots in case of portrait orientation. If the orientation is landscape, only app preview #1 is shown. A product page may list all the videos, and they always precede the screenshots. The first video always autoplays on mute, both in the search results and on product pages.

Apple allows publishers to add up to three app preview videos overall. It also imposes strict requirements on their format, quality, as well as exactly what and how they may (and may not) display. In particular, every iOS app preview video uploaded for listing on Apple’s App Store must be short, straight to the point, and only use footage based on in-app screen captures showing the real use experience. It is allowed to add minor graphical overlays, text, and audio with a narration or in-app sound effects to enhance the visual demonstration.

ASO tips and guidelines: previews

1. Keep in mind that you only have 15 to 30 seconds to excite users by showing what kind of experience they should expect to get while using your mobile app. So each video preview should be simple, yet really fascinating and engaging, sparking interest, unveiling what makes your app unique, and persuading the user to learn more about it and eventually install it on their devices.

2. Focus on the first preview if you plan to make two or three. That is because it will appear first everywhere, both in the search results and on the product page. Moreover, the first video will begin to play automatically in both locations. Use it to overview your app experience, bringing the key features and content to the spotlight with a clear visual explanation. Consider telling a visual story to provide the user with a sense of the journey to be experienced while using the app. There is a good practice to highlight some more specific or additional features in the second and third videos

3. While only in-app user experience is allowed in the app preview footage, Apple generally agrees to accept videos with overlaid minor graphic elements if necessary for the purpose of providing more clarity on how interaction and navigation works inside the app. With that said, consider adding touch hotspots but do not show, for instance, hands simulating gestures.

4. Avoid overproducing the videos. Do not add too many extra graphical assets and effects that could be potentially implying a look or functionality your iOS app does not actually have.

5. Depending on what your app is all about, choose the best orientation — portrait or landscape. Keep in mind that a portrait-oriented first video will appear in the search results followed by the two first screenshots. A landscape-oriented first video is shown alone, with no screenshots, but in this way a promotional text fits the first frame, located right below the video.

6. Do your best to make the first five seconds especially compelling to spark users' interest and convince them to continue watching the video. Don't forget that previews autoplay with no sound, on mute.

7. Capture your iOS app's UI in the native resolution rather than zooming in on the views.

8. Implement straightforward transitions from one scene to another, such as fades and dissolves.

9. Add a text overlay to facilitate understanding and drive interest, because videos autoplay on mute and you can add context in this way. Make sure the text is legible, simple, and does not disappear too soon so users can finish reading it in due time.

10. Include an audio overlay. For example, you can use your app's soundtrack accompanied by the sound effects used in the app — this will provide musical consistency between the video and the UI of your app. You are also allowed to use a voiceover, and if that's what you want, consider hiring a professional to be sure about a high technical quality.

11. Add a compelling still poster frame (thumbnail) for each video, which will be shown whenever a video is not playing (e.g. because the internet connection is too slow or another video is playing). By default, a poster frame is made up automatically from footage displayed after 5 seconds of playback.

12. Make use of sample accounts to avoid any real personal information disclosed in the footage.

13. Translate and localize previews for all your target languages, countries, and cultures to ensure they look and feel appropriate and exciting for different audiences.

14. Ensure your mobile app’s previews to look awesome on every single device by producing a separate set of device-specific video assets according to Apple's specifications of resolution (size), especially if your app looks different on different devices.

However, if the views and actions are pretty much the same across all devices, you may opt for submitting the highest resolution videos and the system will scale them down for smaller screens. For instance, when it comes to iPhones, it is fine to upload app previews for iPhones 5.5'' (iPhone 6s Plus, iPhone 7 Plus, and iPhone 8 Plus) and 6.5'' (iPhone Xs Max). For iPads, you may add videos according to the requirements for iPads 12.9'' of the 2nd and 3rd generations. Note that your choice of the option — either different assets for every device or only the highest resolution assets to be resized automatically — applies for both your app screenshots and previews per localization.

15. Be careful as you may only change previews and submit new videos when adding a new version of your iOS app or when its status is specified as editable. The same applies to app preview poster frames.

Video app preview specifications and requirements

  • None to three previews are allowed.
  • Only footage captured in your app is allowed, with nothing else shown except for what's going on within the app, minor extra graphics (such as touch hotspots), and copy overlays designed to add clarity.
  • A corresponding disclaimer copy is mandatory in videos that demonstrate subscription model-based apps, apps requiring login, or features accessible only after making in-app purchases.
  • App previews must be appropriate for ages 4+ as they can be shown to all audiences. No violence, obscene or blasphemous language, adult content, and offensive statements or visuals are tolerated.
  • No copyrights or otherwise protected content of any kind is allowed unless it is officially licensed to be used in the corresponding app preview.

Preview file specifications:

  • Video file size: Up to 500MB
  • Length limits: 15 to 30 seconds
  • Video format: H.264 or ProRes 422 (HQ only):
  • H.264:
  • Target bit rate: 10-12 Mbps
  • Video characteristics: Progressive, up to High Profile Level 4.0
  • Frame rate: Up to 30 frames per second
  • Audio:
  • Stereo
  • Codec: 256kbps AAC
  • Sample Rate: 48 kHz or 44.1 kHz
  • All tracks should be enabled
  • Stereo configuration:
  • 1 track with 2-channel stereo (1st channel L and 2nd channel R)
  • 2 tracks with 1-channel stereo (1st track L and 2nd track R)
  • File extensions: .MOV, .M4V, .MP4
  • ProRes 422 (HQ only):
  • Target bit rate: VBR ~220 Mbps
  • Video characteristics: Progressive, no external references
  • Frame rate: Up to 30 frames per second
  • Audio:
  • Stereo
  • Codec: PCM or 256kbps AAC
  • Bit Depth (for the PCM codec): 16-bit, 24-bit, or 32-bit
  • Sample Rate: 48 kHz or 44.1 kHz
  • All tracks should be enabled
  • Stereo configuration:
  • 1 track with 2-channel stereo (1st channel L and 2nd channel R)
  • 2 tracks with 1-channel stereo (1st track L and 2nd track R)
  • File extensions: .MOV

Learn more and stay updated on Apple’s app preview specifications for the App Store here.

Checklist for app preview ASO

Make sure your iOS app previews are:

  • made in the portrait or landscape orientation based on your conscious decision
  • according to a scenario and a captivating storyline that best demonstrate your app in use and what makes it unique
  • making most of the space you've got, using all the three preview slots
  • adhering to focus the first video preview on displaying key features and messaging
  • unveiling something new about your app in each subsequent video
  • showing your app's real UI
  • not arising confusion about the real functionality of your iOS app
  • simple in terms of both graphics and language
  • most engaging and meaningful during the first 5-second part
  • telling even with the sound off
  • supplied with striking captions
  • overlaid with relevant audio from the app's UI along with voiceover
  • showcasing the dark mode look if it is available within the app
  • provided with compelling poster frame
  • with all necessary disclaimers
  • not including objectionable texts or graphics, and not featuring any third-party content or personal information disclosure without appropriate permission
  • submitted for each iOS device (according to the corresponding specifications)
  • fully complying with Apple’s regulations
  • localized in all the local and culture-specific details

ASO Examples or Feedback?

Want to (have us) add, correct, or clarify anything? Got a cool insight or example from practice? Get in touch!

Let’s join the forces of the community to build the best App Store Optimization guide together!

Continue Reading

App Store Optimization Part 1: Metadata Optimization

App Store Optimization Part 3: Extra Tips