Questions answered in the section:
- What can I do to improve the design of my screenshots?
- What design element can I consider?
- What should I avoid in my screenshot designs?
estimated reading time
Create compelling and visually stunning screenshots.
The quote above has since been removed from Apple's iTunes Connect Developer Guide - yet, it still holds true. The first part of this quote actually said: "One of the most important elements to the success of your app is your screenshots."
App screenshots have become a vital tool in the developer’s fight for downloads. Both Apple and Google have restuctured their app stores to favour good looking screenshots, and punish poor ones. In the section below, there are a number of screenshot design tips (in no particular order) to help your take your screenshots to the next level. Most of the examples used are to illustrate screenshot design principles only, some are mainly just to display examples of specific techniques. As there are many screenshot design objectives to consider, it is not expected that you should include all of them in your screenshots - choose carefully and use the ones most appropriate to your app or your screenshots might suffer "design-overload". Its best to speak to a graphic designer, who will understand how to apply these suggestions to basic design principles while keeping your designs looking great.
The three most common mistakes that app developers make with their screenshots are:
- Not using all of the available screenshot spots provided by the app store
- Using poor quality screenshots
- Using screenshots of the app that don’t speak to functionality or features that add value to the app
There are quite a few examples below (it may seem like a lot to take in), but the example screenshots will quickly convey the essence of the design concept being discussed, so this section shouldn't take too long to read (but may appear that way).
Use Proper Screenshot Tools (like AppShots)!
[Fair warning, unashamed plug to follow... 😉 ]
Producing App Store screenshots can be a pain-staking, expensive and inefficient task. Sadly, when it comes time to launching apps, creating beautiful and localized screenshots is the last thing developers have time for. We believe this is the most important app marketing and App Store Optimization (ASO) activity a developer can invest in!
With AppShots.... create polished App Store images (that sell) within minutes, using stunning pre-made templates, graphics and photos. Significantly reduce time to produce and manage screenshots required for app stores, while boosting downloads and app-generated revenue. Get the latest designs, devices and save tons of time!
Here are some things AppShots can help you with:
- Save Time & Money: AppShots crushes the design time, without breaking a sweat. Easily manage app updates in seconds. No designer costs, and no waiting.
- Increase Downloads: Make app screenshots that sell. We handle the design work, you just select one of our beautiful templates and AppShots will make your life easy!
- Export & Upload Easily: Export hundreds of screenshots at once and instantly, all in high-resolution PNG files ready for upload to app stores.
- Flexible Pricing: Only have a few apps and don't need AppShots that often? No problem! Pay only for the screenshots you need, or choose a plan that gives you unlimited screenshot exports.
Want to know more? Take a closer look at what AppShots can do... or try it out now.
The Apple App Store allows both JPG and PNG image formats to be submitted. Generally speaking, JPG files can be rendered at lower quality settings, which is meant to reduce the overall file size, whilst PNG files are suppose to be lossless (i.e. matches the original quality). Where possible, use PNG files (this is the format Apple uses when it takes screenshots).
Capture Unique Screenshots Per Device
To save time, many developers use the largest screenshots for all devices. This can be a mistake, as font typefaces are slightly different for each device, and scaling is not always applied correctly. Most visitors to your App Store page will not notice, but hard to read screenshots could put them off from downloading the app. If developers use smaller screenshots and then try scale them up, they will become blurry. The best solution is to take individual screenshots for each device your app runs on and then submit these to app stores respectively.
Localize, Localize, Localize
Top of the screenshot design to-do list, is localisation. If you haven't done it yet, you are seriously missing out on extra app downloads.
Take a look at Uber's screenshots below which shows localisation for 3 different territories. These even go as far as to localize the map location in the first screenshot. These also show localized currencies, both on the app screen (screenshot 4) as well as in the discount amount in the marketing text above the screenshot (see screenshot 5).
[Uber US localized screenshot]
[Uber UK localized screenshot]
[Uber China localized screenshot]
Best / Summary Screenshot First
Make your 1st screenshot as appealing as possible (your first 2, if you aren't using a preview video). Your first screenshot needs to encapsulate the essence of your app - its your "elevator pitch" to the store visitor, explaining your app's value proposition. This message needs to come across quickly and clearly. Don't try to cram too much into this screenshot - avoid complicated backgrounds as well as adding too much text as that could reduce conversion rates. If you aren't able to capture the core message of your app in a single screenshot, choose the best one and use that.
The Over app's first screenshot below shows a collection of examples of artwork you can create with the app - this quickly explains the apps benefits to the store visitor.
[Over uses it's first screenshot to spotlight examples of artwork it can create]
Top 5 Features Over 5 Screenshots
The Apple App Store allows developers to upload 5 screenshots (8 for Google Play Store). Unless you are Snapchat (who only had 3 screenshots for many years until recently), it is strongly recommended that you use all available screenshots. Each screenshot is an opportunity to sell your customer on the three questions they ask when looking at a new app. You only have a few seconds to grab their attention and convince them to download the app - each screenshot propels your app exponentially closer to being downloaded in the very short amount of time you actually have the customers attention.
If you aren't using the first summary screenshot (mentioned above), then make sure that the 5 top features are emphasised clearly in each of your 5 screenshots - ideally this is only one key feature per screenshot. These should be the features that add the most value to your customers. First decide on a feature, and then work out the best way to show this on a single screenshot.
Spotify uses few words to describe a key feature on each of its screenshots below.
[Spotify highlights a single feature on each screenshot]
Keep it Clean & tidy
Keeping text and backgrounds clean and free from over-clutter will ensure your message to your potential customer comes through loud and clear. Use high contrast, open spaces, as well as clear and readable fonts which will naturally help to focus the visitor's attention on the screenshots themselves.
Dropbox sticks to white backgrounds and white devices, which also matches their product's styling. This puts the screenshots themselves font-and-centre for the store visitor to look at.
[Dropbox uses minimal screenshots]
Mix Up Screenshots To Increase Scroll Rate
Mentioned earlier on, split-tests have shown that the more visitors scroll across screenshots, the more they are likely to download your app. Having very different screenshots (especially making the second screenshot strikingly different from the first) keeps the visitor guessing and naturally curious about "what comes next" - this enticement urges them to scroll across to see more.
Facet uses screenshots that alternate device images at the top and bottom, and also vary the background color significantly.
[Facet uses very different screenshots to keep the visitor guessing]
Link Screenshots To Increase Scroll Rate
Very similar to the above, its possible to use linked graphics to encourage visitors to "see more". By linking screenshots, you can create the impression of a single large image. By doing this, visitors will be compelled to try see the rest of the image - this increases scroll rate and more scrolling means increased downloads. Using an optical cue to get users to scroll more to see the rest of the image is a clever way to induce screenshot scrolling.
Last Minute Travel Deals below uses two different linked backgrounds, which has a double impact on the scroll rate - they also link the device in the last two screenshots to make sure the user gets through all 5 screenshots they have. Bustle, further below, links all screenshots by splitting images of hands holding devices.
[Bustle screenshots joins hands on devices]
Group Screenshots Together
Screenshots can also be grouped together if you are trying to emphasise a number of key steps or a process. Be careful, as this consumes a number of screenshots which could potentially only be a single feature, so only do this if you are convinced it is worth giving up a number of screenshots for, i.e. the feature is the most important aspect of the app.
YPlan (below) uses the middle 3 screenshots (green backgrounds) to explain the booking process of their app, the core functionality of the app.
[YPlan uses 3 green screenshot in the middle to show how to book and pay]
Keep Screenshots Interesting
Boring screenshots do not encourage downloads. Screenshots that are too visually similar hurt conversion rates. Login screens, loading screens or even on-boarding screens don't give store visitors something to get excited about! Get them curious about what will happen next in your app by using situations that convey something good is about to happen to them. Ensure dialog boxes aren't blocking actual features either.
Below, easyJet connects with the visitor through exciting backgrounds by reminding them why they need to book a flight.
[easyJet shows various exciting destinations as backgrounds]
Screenshots That Aren't Actually Screenshots
Use a screenshot to create a fully-customized marketing image and use this to expand and deepen a message to the store visitor. There is always a chance Apple might not approve this, but there are many examples of this in the App Store already (see below). If your app has a launch image - you can use that and adapt it with additional overlay text (this might be more acceptable to Apple as technically the launch image is a real app screenshot).
The examples below show how app developers have used images, icons, custom graphics and photos to convey marketing messages to store visitors that standard app screenshots are not capable of doing by themselves.
Social proof is a powerful psychological force - show visitors your app is already popular, and that they are missing out by not joining in by using your app. Social proof leverages the assumption that if an app is popular, it must be good. This strong emotive phenomenon can help your app quickly build trust with a store visitor (as long as your statements are factual).
The screenshots below emphasize how popular the apps are by referring to the numbers of users currently enjoying the app. The WeChat app actually uses the word "billion" which is as good as social proof gets. Bugs and Buttons app uses an accolade to show how well-liked it is ("most positively rated Educational App for iOS") and Loopy HD reminds store visitors that A-list celebrities Jimmy Fallon and Will Smith like the app too.
Testimonials & Reviews
Very similar to Social Proof above (but a lot more focused and specific), testimonials (or even extracts of actual reviews) can often convey more to a visitor than a standard boring screenshot. Careful not to overdo this one as it soon looses it's authority. A subtle way to introduce this is to simply add a testimonial or review comment as a text overlay to an existing app screenshot.
The screenshots below all quote great things said about the apps - they mention authoritative sources which further adds substance to the review weight.
Uniqueness and relevance are powerful attractive forces. As mentioned above, if the customer sees that your app has something to offer that they cannot get elsewhere, you have a distinct advantage over your competitors. Use text in your screenshots to make sure the customer knows exactly what they will be missing out on unless they use your app.
Actually use the word "exclusive" in the text in your screenshot, but take it further to explain what app users will actually get from the app that cannot be obtained elsewhere. This is a great way to stimulate action and tip store visitors over the edge into downloading the app. The more specific you can be, the greater the perceived value and exclusivity of your app, e.g. "more than 6000 app exclusive hotel deals".
Promo Codes and Discounts
Take every opportunity to encourage the user to take action after viewing your app screenshots. Provide a promotional / coupon code the user can make use of inside the app - this gives them a reason to download the app immediately. If your app is currently priced lower than normal, you could also use this screenshot as a way to convey a time-limited offer, prompting an instant download from the visitor as well.
Uber uses a coupon code in it's screenshots, and SelfieLab Camera announces the reduced app price by taking up an entire screenshot - see screenshots below.
Convey Value & Benefits, Not Features
Understanding how a customer thinks is vital. Users are not inherently after features - they are after value. Make it clear to the user what benefits they will receive after using your app.
3 Minute Mindfulness app uses screenshot overlay text to constantly remind the user about why they are looking for this kind of app, touting a relaxed, anxiety-free, happier state of mind as the key benefits from using the app. Here, almost all the screenshots are working together to convey this very clear message to the store visitor.
Use Relevant Or Enticing Dummy Data
Use "real" (or what looks like real) app user data, taking screenshots using the app in a real-life situation where possible. Showing high-scores, rewards, or even large numbers of followers / likes give your screenshots more validity and subtly shows the customer how the app works and what they might be able to achieve with it.
In the screenshots below, Bizzby shows how cheap (actually shows the price of a booking, "£12 per hour"), quick ("arriving in 60 minutes") and satisfying ("5 star review") their app is to use - all of this simply by displaying relevant user data on the screenshots.
[Bizzby uses prices and reviews to entice downloads]
Clearly Show How The app Works
Show off the uniqueness of your app by explaining its key gestures, interactions and how it works. Use overlays to explain required motion or swipes (especially the ones which add value). Using special illustrations help to reveal how the user engages with the app. This should not be confused with information that would normally appear in a user guide or help manual - the focus here is to explain how the app delivers benefit. These types of screenshots are essential to apps that are more interactive or are used in unfamiliar ways.
As you can see below, Bounden is a unique dance app that allows two people to dance together which requires some explanation in order to convince the store visitor that this app has value - a simple illustration quickly conveys how the apps works with two people. Fyuse is a 3D photo app that shows the reader how to take 3D photos. Paper app shows how someone could use the app with a touch pen. Tailor explains how it stitches app screenshots together into a single long image. Sleep Better explains how and where to place the device while sleeping.
Connect with the visitor through emotion within the screenshots - trigger feelings they are likely to experience if they actually used your app. The use of emotive images or text engages the store visitor on a sub-conscious level and this triggers internal urges to download the app.
In the screenshots below, Blume is a dating app that uses photos of happy people to connect emotionally with store visitors - this inspires them to try be like the people they see (as they also want to be happy). Having attractive people is another emotional draw as store visitors are also hoping to find attractive people to date, which will make them very happy too. Further down, Mosaic Photo Books uses emotive text to stimulate emotions by getting store visitors to think about the emotions they (or they people they buy a book for) will feel after using the app.
[Blume uses photos with emotion]
Leverage "Poster Frame" From Preview Video
The poster frame (video thumbnail) of your preview video is another opportunity you can utilize to market your app. Apples says this about the preview thumbnail: "This is one of the first elements a user will see on your product page, so ensure the preview poster frame is visually compelling". If you do have a preview video, then you can actually use this as your first screenshot but you will need to ensure your select an appropriate frame on your video (you can choose a new frame in Apple's App Store Connect by hovering over the preview image and clicking the "Edit Poster Frame" button).
Some developers (see Betfair Sports below) link the poster frame to the first real screenshot to create the perception of a larger, single image, but this is a lot more work. Here, Betfair have added social proof to the poster frame as well ("4.5 star App Store rating"), and included an incentive to download the app immediately ("Get 3x £10/ €10 free bets when you join") on the 1st real screenshot - as it appears to be one large image, users will be likely to notice it at the same time.
[Betfair uses the preview video poster to link to the first screenshot]
Use An Image Of An Apple Device
As already mentioned above, Apple is not so that happy with developers using images of Apple devices in their screenshots, but as we all know, this has now become a very commonly accepted practice. Use of a device image creates two advantages for the developer:
- gives the visitor a real perception of what it would like to use the app from their perspective (a device gives spacial awareness and contexualization)
- it gives the developer an opportunity add in additional background images and text to further enhance the screenshot
Generally its best to use the latest Apple devices for this, but it can also be a good idea to customize your screenshot devices to match the actual device the screenshot is being seen by the store visitor (e.g. use an image of an iPhone 4s if the store visitor is looking at 3.5-inch screenshots). However, that can also give the impression that your app has not been updated in a while so ensure this messaging is clear to the visitor.
There have been many Apple-approved app screenshots featuring devices, even devices that do not actually look exactly like iPhones (a while ago, an iOS app called Яндекс.Переезд famously got into the Apple App Store with a screenshot of an Android device).
Here are a few different examples of devices below, some have very unique design styling so unless your designer tells you otherwise, its best to stick with realistic or flat (but accurate) Apple devices (current Apple generation).
[Swipes uses angled devices, and links them between screenshots to induce scroll]
Don't Use An Image Of An Apple Device
Contradicting the previous tip somewhat (again, use what's applicable to you), you can still convert your screenshots into marketing billboards without using an actual image of a device. This has the added benefit of providing more space for marketing copy or other images, and (debatably) increases focussed attention of the visitor on the actual app screenshots themselves.
In the screenshots below, HIPSTAMATIC Camera uses a screenshot and a hand, which looks clean and still gives you spacial contextualization. Evernote squeezes as much of the real screenshot into the image as possible, keeping the overlay text on top to a minimum. Shadow Player doesn't even use overlay text, settling to just leverage the pull potential of the raw app screenshot itself, but hoping to still utilize a nice background too.
As Apple only allows 5 screenshots per app, a way to squeeze in a few more is to use multiple app screenshots within each App Store image. This works well with screenshots that are generally similar, but allows you to highlight the differences easily, and in a compact way. This could induce information-overload in the store visitor, so use it sparingly (e.g. only do this on 1 or 2 App Store images).
In the examples below, Emoji ;) makes good use of 4 half-screenshots to show the different themes and categories the app user receives - this is still clean and not cluttered, and also saves 3 screenshot places! Next Keyboard does something similar but sacrifices overlap on the multi-screenshots to give them a bit more space at the bottom of the App Store image for some overlay text. Citymapper pushes the boundary slightly by squeezing in 4x 3/4 screenshots, as well as adding in text for each. Clear Day angles the screenshots to further create the illusion of space.
Show Other Devices / Platforms Available
Having the ability to sync your app across devices is a major selling point, but beware, most users have come to expect this as standard nowadays, so you need to decide if this is really worth using a entire screenshot for.
All of the screenshots below illustrate app access across multiple devices / platforms. Using too many device images can create a cluttered screenshot, so find a good compromise to get the message across clearly.
Relevant & Attractive Backgrounds
Using an eye-catching background that highlights the context for the use of the app adds to the visitors understanding of what the app does and who it is meant for. Find your audience and use background images they will like to show them you know who they really are.
Tayasui Memopad and Relaxia use attractive and relevant background images to connect with App Store visitors.
[Tayasui Memopad uses art tools on a table to attract artists]
[Relaxia has a calming and peaceful (and linked) background]
Text, Image & Graphic Overlays
Any words you add to your screenshots must be easily readable, short and understandable. Spacing and line heights are important, align these appropriately. Make sure there are no spelling errors. Large clear fonts that are visible at small sizes are best (many visitors don’t bother to open a full-screen gallery and instead just glance the thumbnails of the App Store images). Use action words to encourage the visitor to do something - words like “start” and “go” work well, especially in the preview video. Remember to localise all text for international markets where appropriate. Test our your screenshots before you finalise them - anticipate what they will look like in the App Store and understand which parts are hidden until scrolled.
When using any supplemental images and graphics, try not to over-clutter the screenshot (less is more) - only use what is sufficient and necessary to convey your message as anymore than this is likely to create confusion and dilute what you are trying to say. Be careful not to use images that are copyrighted as Apple will not hesitate to pull your app from the store if someone complains to them.
In the screenshot examples below, Ultimate Guitar Tabs uses clear bold text and overlays a badge for additional info. News360 and Pocket use overlay boxes to point out features discretely. LateRooms and Zipcar UK keep the screenshot clear (yet partially off-screen) but instead incorporate icons and text alongside the screenshot to clarify their message. Further below, Relax Melodies Seasons incorporates two text styles and a text background. Invoice2go keeps it simple with just some text, and an arrow / circle annotation. Scanner & QR Code Reader uses a small portion of the screenshot to overlay integration icons. Running for Weight Loss uses a number of overlays highlighting various benefits and features.
Hand images gives store visitors a snapshot of the app "in action". This also helps to convince them that the app works because "someone" is already using it - this helps to build social proof and trust with the store visitor. A finger can also be used to subtly point to a key area of interest, or show how the user interacts with specific functions of the app. Always use professional hand stock images (as these will be well-groomed), or alternately find digital illustrations that are high quality. Use a hand image sparingly in your App Store images for these two reasons:
- Apple has been known to reject screenshots that are covered too much by hands images - if over-done, this also gives the impression the app has "something to hide"
- be careful not to use hand images unnecessarily when it is already clear how the app works - store visitors are intuitive enough to understand how apps generally work, so only do this if you absolutely think it's needed to explain how your app functions.
In the examples below, not all the hands images are essential but they still increase the overall aesthetic value of the screenshots. Duckie Deck Card Wars is a great example of how using hands illustrates game-play in action. Star Chart gives the store visitor a vivid idea of what it's like to use the app by holding it up to the sky, and tripwolf shows us how the organising functionality works in their app by using the finger to drag images.
Bring attention and focus to specific features by magnifying areas of the screenshot. This gives the impression that the store visitor is looking at the screenshot through a magnifying glass. This effect spotlights very specific features and ensures these are not missed or skipped over. Adding a large magnified area does unfortunately block out other portions of the app screenshot, so ensure you position this appropriately.
All of the screenshots below use magnified areas to focus attention. Both Pacemaker and SwiftKey use very large magnified areas, leaving the visitor in no doubt about which features to look at. Using smaller magnified areas (even 2 of these simultaneously like Top10 - The Best Hotels) is more subtle and blocks less of the surrounding app screenshot.
Colorful & Vibrant
Unless your app is purposefully grayscale or dark-styled, fill your screenshots with as much color as possible. Use vibrant photos and backgrounds. Take care to match your screenshots to your app's styling so that color schemes are maintained, so don't go too extreme on this.
Replay Video Editor screenshots uses bright backgrounds and photos to convey fun and excitement about their app. This is one of the core benefits that users of this type of app are looking for.
[Replay Video Editor colourful backgrounds matching the app styling]
Highlight New Apple Features
From time-to-time Apple brings out new device hardware and iOS features - show store visitors that your app is compatible with these and this will give you a competitive advantage (at least initially). Not only does this help to convince that this is an app which is kept updated (a selling point nowadays as so many apps are neglected), it also increases the chances your app will be featured by Apple. Once these features are the "norm" or status quo, remember to remove this screenshot and replace it with something more important.
All the screenshots below emphasize new Apple features - the release of a new iOS version (Coin), Touch ID hardware compatibility (1Password), live app icon notifications (Celsius), 3D touch ready (Morning Rituals) and Apple Watch extension support (Full Moon).
Awards & Ranking Mentions (humblebrag)
If you've got it - flaunt it. Have any awards? Let App Store visitors know. You can even emphasize app ranking in certain categories or territories... top 10 Utilities app in Estonia? Why not? Here is a handy laurel leaves award image generator to help you make this look authentic (as long as it really is!).
Below are some examples of how developers have used a humblebrag to boost their app downloads.
Add WatchKit Screenshots
Apple is currently pushing Apple Watch compatible apps, which makes this a good strategy to leverage to increase your app downloads. These apps are often showcased by Apple App Store Editors, boosting downloads significantly. You can upload up to five screenshots of your WatchKit app in addition to five iPhone app screenshots, which gives your app store listing more visual coverage - further helping to convince the store visitor to download your app.
For the Watch app screenshots, you must use the full space for the screenshot - do not frame the screenshot in an Apple Watch or add other images or overlays. Apple strictly requests that you avoid placing your WatchKit app screenshot within your iPhone App Store image but that doesn't appear to be strictly enforced - in fact, it seems a good tactic to ensure the App Store visitor knows your app also works on Apple Watch.
The Runbit app below shows how Apple highlights apps with WatchKit extensions (just below the app title, "Offers Apple Watch App for iPhone") and how these look in iOS search results.
[Runbit Apple Watch screenshots]
[Runbit iOS App Store search results and app listing]
Use Vertical (Portrait) Screenshots If Possible
Vertical screenshots give app developers a larger surface area within App Store search results. And as we've mentioned above, 47% of iOS users find apps through App Store searching, so more coverage equals more downloads. Landscape orientation screenshots are more difficult for store visitors to scan quickly, but they are still preferred by the gaming industry due to one key reason - gamers are use to looking at games that way. For everyone else not developing a game, stick to vertical screenshots if possible.
Some developers try to get around this problem by submitting horizontal screenshots as vertical ones - this is just confusing and is not likely worth the benefit they are trying to obtain.
To illustrate this point, the following three sets of iPhone App Store screenshots (other devices will be different, so test them out) shows you how screenshot orientation affects the size of your app search result page listing (see red area in each of the images below), as well as how it affects the app listing itself.
Size of app search result images:
- vertical screenshots: a clear winner in overall screenshot visibility in search results, and great coverage in the app listing as well.
- horizontal screenshots: games seem to prefer this option as it makes good use of the preview video, and most games are generally horizontal themselves - the obvious down-side is that the app search result is very small compared to vertical App Store images.
- mixed: apps the contain both vertical and horizontal screenshots clearly waste a lot of space on both the search results page as well as the app listing itself (see large white space going unused) - I should point of that this is what Clash Of Clans does, which also happens to be the top grossing app game of all time (it could be said that the awkwardness of this approach gains more attention, but I leave that to you to decide)
[Everpix vertical screenshots App Store search results]
[GT Racing 2 horizonal screenshots App Store search results]
[Flick Shoot 2 mixed horizontal / vertical screenshots App Store search results]
Raw & Unedited
Sometimes, its just best to listen to Apple and let your screenshots speak for themselves - raw and unedited, straight from the screenshot capture process.
Alto's Adventure, a beautiful endless runner platform game (below) shows that it's stunning backdrops and gorgeous artwork are best left unspoilt in the App Store listing.
Explain How It Works
Use screenshots to show exactly each step the user will likely need to make in the app. It can't be clearer than that. If they like your screenshots, they'll like your app.
[Typeshift showing steps of gameplay]