App Store screenshots best practices by example
If you're like me, making App Store screenshots is often the last you I think of when you're getting ready to launch a new app. You fire up App Store Connect, eager to hit Submit for Review, and you realize you're not even close to done. It looks like you're not launching today after all. You need to spend hours researching how to do this right, or you risk your hard work going out to no one.
Well, luckily, someone else has been there before you! More than a million app developers and designers, to be more precise. And the best screenshots are just delicious.
We collected more than 600 screenshots from the top of the App Store and put them all in one place, so we could easily pick a design pattern that fits our style and taste. And we keep adding more.
And now, we're making the collection available for everyone. So say hello to the App Store Assets Best Practice Library. We made this because we want to make it ridiculously easy for you to get a quick jolt of inspiration from the apps that deliver millions of downloads every month.
The 230 billion downloads are in the details
The top 100 app developers have done their homework. Here's some of the work they went through to make what you can see in the database today:
- A/B testing of all thinkable combinations
- Hours and hours of design reviews,
- Professional copywriters optimize the promotional copy and the text on the screenshots (you'll find that almost all top apps use text on the screenshots)
- Amending the designs with inputs from senior designers with a decade of experience in precisely this discipline. So why shouldn't you take advantage of that?
Why do they put so much work into it? Because it works!
- Drive more app downloads
- Increase people's trust in their brand
- Drives more engagement like reviews and ratings
In other words, they're paying attention to detail matters, especially if you happen to get a lot of traffic to your App Store product page. And if you nail it, you might get a cut of the more than 230 billion downloads in 2022 (Statista).
The Apps page
One of my favorite views of the screenshot database is the Apps page. We designed it always to show all of an app's images, so you can resize your browser to see them bigger and smaller. And remember, your product page visitors will most likely see them smaller than you think.
Here are some of the questions this view answers just by scrolling down the page:
How many screenshots should I use?
As many as possible, it can't hurt. But pay extra attention to the first 2 to 3 screenshots, as very few people will side-scroll to see more.
Should I add connected graphic elements between the screenshots?
It's a fun idea, and some think it motivates people to scroll and see more, but we haven't been able to find data that backs that up, so maybe don't go too overboard in this if you're in a hurry.
Should I add text to my screenshots? How much?
Yes, and not a lot! People will see the screenshots on a small screen, so make sure your words and sentences are short and the font is big. Some designers see the screenshot text as an opportunity to add their most important message in big type, almost like ten mini ads.
The Images page
You can look at the "Images" page to test which kind of screenshots stand out from the noise. In this view, you can set the size to small and fill up your entire screen with screenshots.
You can also filter the view by screenshots that use realistic device mockups, generic mockups, and plain screenshots. We've found that approximately 50% use realistic mockups, and very few use just the raw screenshot.
Bonus: App Store icons
One piece of launching an app that is worth spending a lot of time on is the good old app icon. Browsing through this page, it stands out how simple they are—and how simple they have to be. You probably also immediately notice how bright the colors are in 70% of the icons.
The App Page
When you find a set of App Store images you like, you can dive deeper. Click on the image or icon to go to the App Page, and you'll see a couple of interesting views. But, first, let's take a closer look at Klarna's App Store assets.
App Store product page preview
If you're a designer, you've been there: looking at designs that look great on the big screen, but once you see the design in its final habitat, it's...different. So on the App Page, we're simulating real life with a mockup.
- Across the room
- Across a table
- On desk
- In hand
Full-size screenshots
Design is in the details, so we're also providing the app screenshot images in their full 1:1 pixel size, right below the preview. With this view, you can check out the most delicate details and get a sense of the font sizes and colors in use.
Icon sizes preview
Then there's the icon. So how does an icon like Klarna's work in various sizes? We placed them next to each other in radically different sizes so you can fully grasp the dynamics between big and small and build into your app what you learn.
App Store promotional text
Finally, we show you the full description as provided by the developer. You'll be surprised by how long most of these are. Pay attention to how the text is structured visually. Most developers use bullets—or, like Klarna, super-short paragraphs with all-caps headlines for scannability.
Next steps
So that's the Best Practices for the App Store Assets Database (long name!) Now go and make some great assets so you can launch that app and get the downloads your app deserves. And if you need a mockup to spice up your app store image, you know where to find them.