Optimize Your Screenshots For The App Store

screenshot-styles

Leaving the best possible first impression with your potential users

The first impression of your app on the App Store counts. Recent data indicates that you have but 7 seconds to convince a user to purchase your app. Since about 75 percent of the app “screen estate” on the App Store is made up by your screenshots, the answer to a potential user’s question “Do I need this?” is mainly answered by what your screenshots tell him. That’s a real challenge! But here also lies a great opportunity for your app to shine among tons of competitors that don’t grab people’s attention because their first impression is rather dull.

To help you with the optimization of your screenshots for the App Store, we created this simple checklist. Follow us step by step through the process of making your screenshots stand out. Spoiler alert: you’ll find a great freebie at the end of the article…

Step 1: Create a story

On the App Store, you have 5 screenshots to tell a compelling story about how your app will rock your audiences’ devices. So, to start off, take for example 5 post-it cards and sketch up your ideas for images that convey your app’s strongest selling points from the user’s point of view. If you’re more into paperless documentation, setting up an empty deck of slides on Keynote or PowerPoint will do the trick as well.

Storyline Screenshot
Simple storyline on Keynote slides

Here’s an example how to structure your screenshot story:

  1. What’s your user’s main problem? How does your app solve it? E.g. “Never lose a great idea again: iDea keeps them across all devices.”
  2. What’s your app’s number 1 USP? E.g. “Save your ideas anywhere, anyway you like.”
  3. What’s your app’s second strongest USP? E.g. “Rate your ideas and share them with your friends.”
  4. What’s your app’s third strongest USP? E.g. “Easily export your ideas to your favorite text editor.”
  5. How does all that improve the users’ lives and what should they do? E.g. “iDea saves all your ideas, helps you structure, share and work on them. Download iDea now!”
Revolut screenshots
Nice visual storyline by Revolut

Keep in mind that with the new App Store design on iOS 11, the App Store will display 3 screenshots (portrait) in the search result list — compared to 2 on iOS 10.

New vs. Old App Store
2 vs. 3 screenshots on the new iOS 11 App Store.

Also, just like anywhere on the web, images are great, but video beats them all. Your first item can also be an engaging video (app preview) that gives users a great overview of what your app does. Again with iOS 11 the videos will autoplay by default with the sound muted. If you have a video that gives the user the answer to his most pressing question, i.e. “Does this app solve my problem?”, you can use the remaining screenshots for your killer features.

Step 2: Create outstanding imagery

There’s no second chance for a first impression. That’s why your screenshots need to be absolutely flawless and state-of-the-art. Don’t hesitate to get the help of an experienced designer to tell your story with great visuals. You can check out places like fiverr.com or crowdspring.com for great offers from seasoned designers.

Just make sure that your imagery reflects your brand identity and makes your audience understand your core message at once. Never stop asking whether your users would really like your designs and what appeals to them.

screenshot-styles
Different screenshot styles: annotated screenshot, custom graphic, with device, mosaic, branded (from left to right)

If you’re going to create screenshots yourself, there are two different ways to get great results.

  1. Taking screenshots with your iOS devices yourself by pressing the Home and Sleep/Wake button on your device simultaneously
  2. Using a tool to make your screenshots more engaging, for example placeit(which lets you paste your screenshots into their library of photos), the screenshot designer on AppToolKit or Canva (a simple-to-use online graphic design suite)

If you’re looking for even more tools to help with screenshot designs, check out thetool.io’s extensive overview.

Step 3: Use the latest iOS devices

It’s always a good idea to show what your app looks like on the latest Apple gear. In case you don’t have the most recent iOS devices at hand and just want to insert your app screenshots into the right frames, Apple’s got you covered on this one.

Take a look at step 2 again. Now think of unusual perspectives that grab the user’s attention. How about stretching your screenshot across two separate images? Why not show an eye-catching angle of the iOS device you’re aiming at?

Shazam and Gmail example
Shazam and Gmail using two screenshots and one devic

Just browse through the App Store to find some inspiring images that might also work with your app.

Step 4: Define your localizations

Make sure that you know what languages you need to support in order to reach your most valuable audiences. If you have yet to find out where these audiences are, check out our article about boosting your apps’ visibility.

If you plan on adding text to your screenshots (which makes perfect sense), keep in mind to translate these texts to the most important languages. Using the help of professional translators who are native speakers helps you avoid embarrassing translations errors, especially with language you might not master (how is your Mandarin?). A good place to find a translator for your text is icanlocalize.com.

localization-examples-google-photos.png
First screenshot of the Google Photos app in German, Chinese, Korean, French, and Russian

Eventually, you’ll need to adjust some of your images, so localizations perfectly fit — due to different lengths.

Step 5: Check sizes and resolution

When creating screenshots, you need to make sure that the sizes of your images are meeting App Store requirements and use the highest possible resolution. If you need to know which sizes are the correct ones, check out our knowledge base.

Size Error
Don’t be that guy who prepares nice screenshots, but in the wrong dimensions 😉

Most importantly, your files should be high-quality JPEG or PNG image files at 72 dpi, RGB, flattened and have no transparency (this last one is very important). The most recent sizes for iPhone and iPad are as follows:

  • iPhone, 5.5-Inch: 1242 x 2208 px (Portrait) or 2208 x 1242 px (Landscape)
  • iPad, 12.9-Inch: 2048 x 2732 px (Portrait) or 2732 x 2048 px (Landscape)

Same goes for your video files: if set up with the correct size and resolution, it will perfectly fit the users’ screens and feel like they’re actually seeing the app in use. You can upload two different types of video files on iTunes Connect: either H.264 (mp4, mov or m4v) or ProRes 422 HQ (mov) with up to 500MB.

Check the complete App Store Connect documentation for more details on how to configure your video files. Your video should not be longer than 15 seconds and therefore needs to be really on point. You can apply the same technique for your video storyboard as in step 1. Like that, you get a good idea for how much content can fit into your video.

Step 6: Keep your screenshots updated

As your apps evolve, so should your screenshots. Also, whenever new iOS devices are made available, make sure that you still meet the required resolution and size. Changes like the pending update of the App Store with iOS 11 always mean that you should re-visit steps 1 through 4 of our checklist.

Home Screen Evolution
Just as iOS progressed over the years, so should your screenshots always be up-to-date. Source: iKuarec

But not only the App Store environment or your app may change! Since you monitor your apps’ success and its usage (don’t you?!), you might also come to the conclusion that you’re reaching a whole new audience that your screenshots don’t address yet. Think of your screenshots as the showcase on App Store boulevard: the people strolling past will definitely change and so might the ones stopping by to take a closer look at what you have to offer.

One more thing…

Since the above-mentioned steps and pieces of advice might be hard to handle in your daily business, we don’t want to let you go without a nice freebie: your own printable App Store screenshot checklist. Feel free to share it with your colleagues and tell us if it is of any help to you! Grab your free checklist here.