Screenshots are your best resource for promoting and showcasing your app before somebody has bought or downloaded it. In this post, I will mostly be talking iOS — but a lot can be transferred to Android too. Also a disclaimer: a lot of this post is my personal opinion!
Firstly, you must provide screenshots for:
You can provide more, but it’s not really necessary. And just between us, you can submit the exact same screenshots for the iPad 2nd and 3rd gen. Apple won’t notice — and neither will your users.
The screenshots appear in the search results at roughly ¼ size, in the app listing page at ½ size, then users can tap into them and view them at around 90% size.
You can upload portrait or landscape screenshots — but you can’t really mix and match. If you pick portrait, iPhone users will see the first 3 previews in the search results, and iPad users will see the first 2. If you pick landscape, users will only ever see 1.
Do not use landscape screenshots unless you really know what you’re doing!
(or are making screenshots for macOS — then you don’t get a choice)
A lot of apps will upload direct screenshots of the app. However, most add additional text and other content in the borders. By not doing this, not only does your app not look as polished as your competition, but you’re also missing out on an opportunity to communicate the apps features. Users are unlikely to actually read your app description, so screenshots are your primary way to communicate information about your app. If you don’t have any experience in design programs, there are tonnes of screenshot generators out there. Two I’ve used are,
But I strongly encourage you to use a design program like Figma. I’ve attached some of my layouts at the end of this post!
It’s a good idea to ensure it’s legible from the app search page. As they appear ¼th the full size in this page, you’ll need to make your text larger, more legible, and take up less space (so your screenshots are still visible). My rules of thumb are:
Avoid treating your screenshots as a list of bullet points. Do add a header to each screenshot, but add a couple of lines of body copy too!
On the first few screenshots, keep this body copy short — around 2–3 lines. But from the forth screenshot onwards (third onwards on iPad), users will be in the app listing page or viewing the screenshots at full size. Here, you don’t have to worry about legibility at small sizes, and anyone viewing them is already interested in your app. You can start adding some with more detailed information, maybe going up to 5 lines — but still mix it in with a few screenshots with short and snappy copy.
Mix the text alignment up. Don’t centre all your text — especially body copy that spans more than 3 lines. Consider sometimes aligning text with other elements in the screenshot.
Consider the aesthetics of your text too! Try to make all line lengths within in a header or body paragraph roughly the same. You might need to change some words to achieve this — and you might end up with different copy on iPhone and iPad. You’ll find using design programs will make this easier than the screenshot generators.
Hopefully you already have a colour scheme in your app or from your icon. If you don’t — or your palette is too limited for marketing material — you’ll need to make one. My favourite place to make palettes is from Flat UI Colors. Pick one of the palettes, then (importantly) pick a few select swatches you want to use — don’t use the whole palette!
Be creative with colour! Don’t make use the same background and text colour on each screenshot. Mix and match, and even add additional shapes to get some more colour in.
One thing you’ll see frequently is screenshots being embedded in device frames. This is a matter of taste — and I do or don’t depending on what style I’m going for in my screenshots.
If you aren’t familiar with any design tools, the screenshot generators will do this for you.
If you’re in a design program, head on over to Facebook Design, and download their device frames. To use them, import your screenshot at full size, import the related device frame for your screenshot in the layer above, and then centre the screenshot and device frame — which will give pixel perfect alignment. Group them if you want to resize!
It’s convention on iOS to have the time set to 9:41 on screenshots (it’s the time the iPhone was announced). To do this, you can run this command in your simulator:
xcrun simctl status_bar booted override --time "2007-01-09T09:41:00+00:00"
As promised, I said I would attach the templates for my screenshots! You can open them in Figma if you want to take a closer look at anything.
Importantly, I break some of the guidelines I set out in this post, and that’s okay! You will have other constraints when designing. They’re guidelines, not rules.
For this, I’m aiming mostly at people with a strong background in maths. I want to differentiate it from the many other scientific calculators by the features — so I made sure I had a page of features be visible from the search results page.
My colour palette is quite limited here, so I added a pink. Because the blue is so prominent, it’s hard to add more colour — and as a result, it’s hard to create depth with colour. I added device frames to compensate for this.
The palette for this is also limited, but the green here is much more neutral, so I can add a lot more colours to the colour palette. I use these colours extensively, adding overlays to create depth. I don’t need device frames here, but I did need to add shadows to the screenshots so they don’t blend into the background. A small tip — always add multiple, overlaid shadows to make them look more realistic!
This also includes macOS screenshots!
Published on