Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

How To Create Effective App Screenshots For Your App Store Page

Slowly but surely, the official app stores of iTunes, Google Play and Windows Phone Marketplace have transformed into a digital battlefield. App developers have to fight for recognition or otherwise be drowned in an ocean of competing mobile applications.

App store optimization (ASO), a strategy similar to SEO but specifically applied to the app pages in app stores, has become a handy addition to an app developer’s marketing plan, and promises to help increase visibility – and, as a consequence, downloads – of a mobile app.

Further Reading on SmashingMag: Link

ASO consists of many elements, and should be considered a key component of publishing an app in an app store of choice. It encompasses every detail of a mobile app’s page, and can be split into on-page and off-page elements.

On-page app store optimization elements include all components that appear directly on an app page on the relevant app store. On-page elements are:

  • app name and title
  • app description
  • app icon
  • app screenshots and videos
  • app category

Off-page app store optimization elements are external links that lead to the app page. They also encompass reviews by users, as they are not controlled by the publisher of the app. Off-page elements include:

  • app rating, reviews and comments
  • app recommendation pages
  • dedicated app landing page or website
  • press coverage
  • advertising
  • social paid and organic discovery options

While ASO requires some adjustments on all of the above elements, it is vitally important for an app to undergo all checks before being presented to the world. In this article, we’ll take a closer look at app screenshots, one of the two key decision-making helpers for anyone who downloads an app.

Why Care? Link

In today’s digital age, steady information flow and social media madness are making it almost impossible to get someone to stay focused on what you want to tell them – even if it’s just about a simple app page. We’re constantly distracted, and we (think we) don’t have the time to sit still and listen or read for a moment. Research suggests that our attention span has reduced to eight seconds5. The guys over at Slate wrote an interesting article about the same phenomenon, and why you won’t read to the end of an article6 any more.

We are going back to the principle that the first impression counts: you have a bare few seconds to command attention; use them wisely to arouse interest and get the viewer to click, scroll and download.

The importance of app screenshots is communicated in a clear message. Apple’s iTunes has undergone quite a revolution, where app screenshots have pushed app descriptions to the background and taken the front page on the app search, and the app page as well. This is the change from iOS 6 to iOS 77. Now, with iOS 8 in use, Apple continues to focus on imagery rather than text8. Same goes for Android.

Google Play10 has moved screenshots above the page fold. (View large version11)

The design of an app represents the key factor for almost 50% of people to say yay or nay to an app. This factor is surpassed only by app reviews and ratings. While app reviews belong to the off-page factors and cannot easily be influenced, app screenshots are on-page factors and can be entirely tailored to your needs. App design – and the corresponding screenshots of it – should take the #1 spot in an app developer’s marketing prep list.

Visual communication is certainly faster than verbal communication. Hence, putting sharp focus on your app’s design and creating visually appealing screenshots can only bring good to your mission.

Getting Started With The Basics Link

App screenshots should not be selected randomly. The best practice is to pick those screenshots that best explain your app’s purpose.

The major app stores allow you a total of five images to relay your message. Is your app a messenger app for teenagers? A fitness app for pregnant women? A mobile scanner? A jump-n-run adventure game? You need to make sure anyone can get the point by viewing your screenshots.

Another way to approach app screenshots is by asking yourself the following questions:

  • What problem does my app solve?
  • What is unique and special about it?

If you can answer these questions visually with your app screenshots, you’re on to a winner and half of the work is done. Should you struggle to find the answer to these questions at hand, let’s dig further.

About Uniqueness Link

No matter what task you’d like to accomplish, there is probably an app for that. It might even be that there are 10, 50 or 100 apps for that. Coming up with an app that is truly unique and a first-timer is very rare. Instead, the trend is going in two directions: either building huge interconnected app platforms like Salesforce, providing all-in-one solutions; or creating micro-apps – apps that tackle one little problem in the vast landscape of daily struggles. More often than not, you think you might have a first-timer, only to find a set of competitors when you have already advanced into the development phase of things.

The real world and the digital world today are overstimulated and oversaturated. There are hundreds of options for each thing you need – from tablecloths to entertainment systems – and we’re overloaded with a supply of millions of variations of the same thing.

In this day and age, the key is distinction and not uniqueness. We live in a competitive environment, and even if you were to build something that has glimpse of uniqueness to it, you’d soon be faced with competitors and find yourself again in this competitive situation.

Distinction can be found in a number of aspects that pertain to app design and their screenshots in particular. Here are a few possible examples:

  • Your app allows your user to conclude the action in just three steps, where competitor apps take five and more steps to accomplish the task (think of a photo app that allows you to apply filters on the go and upload it to your account instantly).
  • Your app builds on advanced touchscreen technology, embraces UX and UI principles, and replaces buttons with swipes (think of a dating app that lets you swipe left and right to like or dismiss a potential match).
  • Your app integrates with other services and makes it easier to transfer data from one app to another (think of a scanner app that allows you to upload a document directly to your cloud storage account).

I think you get the point. The objective is to do something better than someone else, and find a way to describe this advantage in a visual demonstration.

About the Technical Ins and Outs Link

App stores are adamant about the framework they provide. Find some general guidelines for your app screenshots here: sizes, dimensions, number of screenshots, DPI, file formats.

Google Play12 iTunes13 Windows Phone Marketplace14
Sizes According to supported device According to supported device According to supported device
Dimensions Minimum 320px
Maximum 3840px
According to supported device According to supported device
Number of screenshots Minimum of 2
Up to 8 total
Minimum of 1
Up to 5 total
Minimum of 1
Up to 8 total
DPI 72dpi
File formats JPG or PNG JPG or PNG JPG

About Order Link

One rule applies: put your most important screenshot first. There is no point in following a logical order – if you think your users need to understand the app’s steps, you’re wrong. You only have a few seconds: it’s in your best interest to put your best foot forward and get them hooked on your app as quickly as possible.

Things You Can Point Out With Your Screenshots Link

Without any further diversions, let’s take a look at some of the best use cases for app screenshots.

The Main Screen and What Your App Does Link

The most commonly used screenshot is the “what your app does” capture. Typically, it illustrates the main screen of the app, with an understandable amount of content so that the user can evaluate whether it is a good fit.

Spring15 provides a nice screenshot of the directory screen, perfect to display the clean design of the app. The Homework16 app lays out its most important screen and gives you an overview of what you get. Threes17 keeps it simple. A real screenshot of what the app really looks like. No added text, no distractions. It so happens to be that their app is really well designed, and won an award for that reason, too!

Spring, Homework and Threes show their main screens and what their apps do. (View large version19)
Important Notes Link
  • Keep it as clear and self-explanatory as possible.
  • Highlight the core purpose of your app.

Feature Overviews and What Your App Includes Link

Other interesting captures are how your app is set up and how it works. Including a screenshot of your menu overview or additional features can help someone decide to choose your app. You must ensure, however, that your screenshot remains easily understandable.

The menu overview of Apple’s Healthbook20 emphasizes options and design at the same time.

Apple’s Healthbook emphasizes options and design at the same time.

PressViewer21 approaches the overview question differently. Instead of packing all its features into one screenshot, it uses all five slots to showcase the app’s functions in an easy step-by-step overview (no longer available on the app store).

PressViewer approaches the overview question differently. (View large version23)
Important Notes Link
  • This is probably not the best app screenshot to place first.
  • You can score with your design skills here. Use them to add value to your app by differentiating from other apps.

Behavior of Your App and How Your App Is Used Link

If your app deviates from the traditional functionalities like tapping and scrolling, don’t be afraid to show it. There are some very interesting ways to showcase your app’s behavior.

Inbox by Google24 is a very agile app. By swiping left or right, you can mark messages as read or snoozed. Currency25 uses dragging functionality to spice up the app. Slide to the left to erase the number you previously inserted.


Inbox by Google and Currency demonstrate their behavior. (View large version27)

Swype28 tells the user how to compose words by swiping across the keyboard instead of tapping.

Swype also demonstrates its functionality. (View large version30)
Important Notes Link
  • Creativity is key. Find a way to intrigue the user so they want to try it out!
  • Add the intended movements as an overlay to the app screenshot as a means of demonstration.

Additional Text to Describe the App Screenshot Link

Over time, a clear trend has developed in the app screenshot niche: instead of using the available space to illustrate just the app screen, now developers shrink their screenshots to make space for some additional descriptive text.

Asana31 briefly describes what the app screenshot demonstrates. TeamStuff32 uses the extra text strategy, and gets creative with the placement of the text. Instead of the traditional overhead two-liner, the info is placed in the bottom right corner.

Asana and TeamStuff use additional text to describe their apps. (View large version34)
Important Notes Link
  • This is one of the very best practices, not to be left out!
  • Be careful not to overdo it. Two lines should absolutely suffice to state your case.
  • Ensure that your text remains readable.

Including Media Mentions and Awards Link

If you have received recognition for your awesome mobile app, don’t be shy to brag about it! Adding award icons to your screenshot can add that extra bit of credibility to the decision-making process.

Good.co35 emphasizes its app’s four main features, along with some important media mentions to create credibility and interest. SkyView Free36 includes its awards in the app screenshot.

08-skyview-goodco-opt-small37 and SkyView Free show media mentions and awards. (View large version38)
Important Notes Link
  • Be careful not to clutter up your screenshot space.
  • Only use true comments. You wouldn’t want to create a false image.

Understand How Design Works Link

The design of your app screenshots will greatly depend on the design of your app. While you should follow the same fonts, colors and style you used to create your mobile app, you do have some room to improve the looks of your app in your app screenshots.

Font, Color and Style Link

Should you decide to add a line or two of descriptive text in your app screenshots (as suggested above), pick a font that corresponds with those you used in your app. It creates a uniform impression. For your app screenshot outline, choose a color scheme that fits your app’s design. You are not restricted to the same colors across all your available screenshots, so feel free to pick custom colors for every screenshot. Stick to your theme and style. If your app is playful, make your app screenshots playful. If your app is minimalistic, apply the same approach to your app screenshots.

Pocket39 uses the same font throughout the app and the additional description. Aconex40 uses extra text (in a creative setting!) to share further details on what the app does and offers. It gives the developer extra room to communicate the app’s purpose. The font is not the same as in the app, but it looks like handwriting and fits the app theme.


Pocket and Aconex use fonts creatively to enhance their app screenshots. (View large version42)

Trim & Tone43 stands out because the developers opted to tilt the phone instead of making it stand straight. The color scheme and style of the app is seamlessly integrated into the screenshots as well. SnipSnap44 sticks to the green color scheme in the screenshots.


Trim & Tone and SnipSnap show effective use of color.

DiscoFingers45 is available in different countries, and therefore shows the user the app as it is available in that specific country store. All app stores allow you to create app pages for specific languages and countries – a very effective method to personalize a user’s experience.


Two different screenshots for DiscoFingers’ international markets. (View large version47)
Important Notes Link
  • Whether you use a solid color or blurred lines, ensure that they don’t interfere with your app screenshot and the message the screenshot sends.
  • Consult color palettes to discover interesting color matches you wouldn’t have otherwise considered.
  • Less is more. Remember, you are trying to show the viewer what your app really looks like in use.
  • Don’t forget to consider customization: create screenshots that appeal to your user’s nationality, culture, language, and so on.

Show Motion Link

Another up and coming approach is to present an app in use. Applying this practice makes the appearance even more real.

Paper48 surprised the world with some great new motion features: when tilting the app, the image seems to move along, offering the viewer a wider angle; the app also works with the cards concept, where you can drag and drop topics in and out of your newsfeed. Peek Calendar49 emphasizes the motion options within the app, showing how conveniently each day can be expanded to display all appointments of the day, or collapsed to get an overview of the workload distributed across the week. Cycloramic50 shows how it enables the iPhone to rotate around its y-axis to capture a panoramic picture.

Important Notes Link
  • Keep it simple and easily understandable.
  • Make it fun! Use your creativity and good design skills to show the user what is so great about your app.

A successful app page depends on many factors – and always on the app itself. Technology is a highly dynamic field, and requires constant updates in order to keep up with the ever evolving environment. Redesigning your app is a necessary step along the way. Most developers choose to time their redesign ideas based on software update requirements given by Google and Apple.

When creating your app screenshots you should pick one or two of the guidelines mentioned in this article and stick with them throughout all your screenshots; you wouldn’t want to overcrowd your designs.

A List Of Tools To Create Screenshots Link

Now that you’ve been through all the possible tips, tricks and inspiration boards possible, it’s time to get going! Whether you’re a professional or beginner, one of the following tools can come in handy in designing your screenshots:

  • Adobe Photoshop51 and Illustrator52 are great tools for those who know how to use them! Photoshop Online is available for $19.99 a month as part of Adobe’s Creative Cloud package offering. A 30-day free trial is also available.
  • Visme53 is the best option for those with limited software skills and high ambitions. Visme allows you dive in and create your screenshots with all your desired additions and details. Visme is free for up to three projects, then plans start at $6 a month.
  • Screenshot App54 is probably the fastest option to create screenshots that look good. Pick your format, add the screenshot and put some extra text in it. Done! Screenshot App is free to use.
  • Placeit55 is especially useful if you are looking to use screenshots that represent real-life use. Placeit provides a catalogue of situational scenarios you can choose from to represent your app’s use. Low-res images can be downloaded free. Placeit also offers subscription packages and one-time downloads for as little as $8.

Test-Drive Your Designs Link

In order to check that your app screenshots really hit the spot, it is necessary to test and monitor their performance. Frequently visit your developer dashboard on iTunes, Google Play or Windows Phone Marketplace and closely monitor user feedback. If you have followers and fans who you can draw feedback from, do so by creating surveys to collect answers. You can create beautiful surveys and questionnaires using Typeform56 and find out what users think of your app design (don’t forget to reward them for their input!).

Conclusion Link

As mentioned above, two main elements account for most app downloads; app screenshots and app ratings. This article covered the importance of app screenshots in full.

You have learned why they matter; you have come to understand how to determine what screenshots matter the most. You’ve also gotten examples of apps that do it right, and have immense success because of their visual appeal – which they communicated very well in their app screenshots!

To summarize, the most important takeaway lessons of this article are:

  • Use all your available screenshot slots and put your most important screenshot first.
  • Follow clear design guidelines and help your user understand your app from the first second.

The success of your app definitely does not depend solely on its looks: it has to be functional and solve someone’s problem (for example, a mobile scanner app), or enhance a current experience (for example, a nice camera app). But, given the human attraction to looks and visual cues, giving app screenshots a good amount of focus cannot be wrong.

In the next article, we’ll examine app ratings, and how you can influence what your users will say about your app.

Do you want to discuss any points that were mentioned here? Please feel free to share your thoughts in the comments below.

(ml, og)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17!/id779157948?mt=8
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56

↑ Back to top Tweet itShare on Facebook

Melanie Haselmayr is the CEO and founder of Mevvy, an app marketplace API for Google Play, iTunes and Windows Phone Marketplace.

  1. 1

    Thank you Melanie for this article. It’s a shame that really great apps are not discovered by fussy users, because a of poor, unthought screenshots.
    What really frustrates is when developers focus on how to sell an app rather than on the actual product. They know well, that when the user installs their shiny, advertised app and it’s not what they expected, they will simply uninstall it. As far as I know, App Market Optimization also considers the time that the app is installed. So when developers use false advertisement (screenshots that is) they get quiet opposite result! Apple will simply lower their App’s visibility in App Store, and I guess no one wants that.

    • 2

      Melanie Haselmayr

      March 6, 2015 3:49 pm

      Thanks for your comment, Pawel. I wasn’t aware that Apple punished “fakers”. I do believe that is a good thing. I wish there was a way to reinforce genuine app discovery.

  2. 3

    Pierre Venter

    March 6, 2015 5:46 pm

    Melanie this is a fantastic article! You have really encapsulated everything that is important about App Store screenshots into a single post. App discovery happens with the eyes so you are 100% correct, attention matters and developers need to start to focus on standing out. I’ll definitely be using your tips to design some screenshot templates for our new webapp tool called, which helps developers and designers quickly create and manage App Store images. Maybe you can add us to the list once we have launched. ;)

    Insightful reading, will refer our customers to this post!

  3. 4

    How about videos? What formats are those? I think Google Play Store is uploading youtube url, but Apple is a mystery. There are instructions here, but what if you have a video already and its a promo video.

  4. 5

    Oana Filip (@oanafilip)

    March 19, 2015 10:09 am

    Hi! Thanks for sharing this article, it’s full of valuable insights. On the other hand, I highly recommend you to try It’s an easy-to-use tool for creating great product screenshots. Best regards!

  5. 6

    Matt /

    March 23, 2015 7:59 pm

    Thanks for the great article. Screenshots optimization is getting more attention as the more converting your App Store page is the more install you get and the better ROI you see.

    We @splitmetrics are trying to analyse user behaviour and figure our what combinations work better. It appeared that every category has its unique points that might not work for others. So in fact the only way to find the best variation is to run (a few) tests.

  6. 7

    Hayley Steiner

    March 24, 2015 7:24 am

    It is interesting to me how many factors go into designing an app. Besides from the engineering of the app, all the visual aspects of it are very important. To the consumer, how they view it can be a first sign to looking forward into it or not. I have always been a person who has looked at how an app was set up and automatically decided whether or not I wanted to continue looking into. I’m glad that it wasn’t just me who did this. How the app is laid out, the graphics, text, etc are all ways an app can be more powerful and maybe it is beneficial to have it viewed by people before releasing it.

  7. 8

    Hi! Thanks for this great article! What you could also check is They are easy to use and have lots of free mockups! Best regards!

  8. 9

    Nice sharing! It’s great that you have introduced important notes on creating apps screenshots. Aside from Adobe Photoshop, Online Image Editor ( is another option that available for creating screenshots and making some edits. It’s my first choice and I love using it.

  9. 10

    Great article! Unfortunately this process is vey long and painful so you will spent a lot of time, especially if you are an indie developer like me. Thanks God there are a lot of tools over the internet to do this task easily like, placeit or even listings on fiverr.

  10. 11

    Hey Melanie,

    Great article. Building design that are both beautiful and efficient is super hard. And one way get to that point as fastly as possible is to make your product evolve with you users’ needs, so by asking them.
    Typeform is a great option, but for those who are looking for a really simple, design and connected way to ask feedback to your users, you should give a shot to


  11. 12

    Brenden Mulligan

    June 17, 2015 10:21 pm

    We’ve spent a bunch of time trying to make this easier internally. We’ve released a couple helpful tools. Best one is Screenshot Builder (, which is a web interface to create really nice screenshots for all device sizes. We also released a Sketch template called Sketch To App Store (

    Hope those are helpful!

  12. 13

    Loved this article!!! The examples of apps’ screenshots are awesome! Also, “given the human attraction to looks and visual cues, giving app screenshots a good amount of focus cannot be wrong” – Right on the money. May I also add us ( to the list of great providers, we offer app marketing graphical templates such as app store screenshots, social covers for apps and install ads.

  13. 14

    Apple gadgets always bring new features with it which take convenience in our lives. Amazing features are always source of attention for its users. This blog excites people with crazy screenshot app. Multitasking is necessary these days so this feature will be affective in several ways.


↑ Back to top