DesignBoost

How to Design App Store Screenshots that Sell

Learn to Design Screenshots that Sell your App

Do something. Real quick. It will just take a sec.

Open the App Store on your iPhone or iPad.

You there? Ok. Search the term “to-do” and hit “search”. A bunch of stuff pops up right?

Ok let’s pretend we want to buy a “to-do” type app. Now follow your typical app buying process:

  1. Step 1 – your eye totally ignores the apps with 3 or less stars
  2. Step 2 – you visually weed out the crap icons thinking the app must also be crap
  3. Step 3 – you tap into comparably priced and reviewed apps to see which one looks the best

Did you catch that?

I’ll repeat it

“You tap into comparably priced and comparably reviewed apps to see which one looks the best.”

Which one “looks the best”.

They are not reading your app description.

They are not reading reviews.

They are looking at your SCREENSHOTS.

Watch how people shop

See the below image? This is how people sort through apps in shopping mode.

This is how your customer filters through apps when they're in shopping mode.

3 out of 12 apps make it past this review cycle, then the screenshot comparison begins.

Describe your app's functionality.

Tell your potential customers what they’re looking at.

 

iOS6 Loves Screenshots

On the newly released iOS 6, comparing screenshots has become a LOT easier. Are you rethinking your screenshots yet? ;)

Screenshots help your app compete.

Your screenshots can make you more or less competitive in the App Store.

Don’t Miss a Selling Opportunity

An app with a fantastic interface design will definitely increase sales. However, if all you publish are plain screenshots sans description of features and benefits – you’re missing a HUGE selling opportunity.

Apple’s new Screenshot Specifications

If you haven’t already, make a note of the screenshot sizes Apple now requires for developers to provide:

  • 640 pixels by 1136 pixels (portrait)
  • 640 pixels by 1096 pixels (portrait)
  • 1136 pixels by 640 pixels (landscape)
  • 1136 pixels by 600 pixels (landscape)

Now let’s take a look at some practical examples of screenshots that are doing a great job of promoting their app.

Examples of Excellent Screenshot Design

SpaceEffect - What I love about these screenshots is it gives you a very clear picture of the exact functionality of the app. Go from “this” to “this”.

QuickMark – This isn’t a great example, because I can’t decipher exactly the value of “deciding images from photos” however something to keep in mind is the blurred finger which is another way to visually explain how your app works.

Chameleon Clock - This screenshot says exactly what the app does, and then shows you an image of the app doing exactly that. Aim for this kind of clarity. Confused people don’t buy.

Contact Paranormal - A few cool things going on here. Creepy background image evokes emotion. It makes you want to look at the image. So does the image on the screen, the spiderweb and the word “murder” scrawled in the app interface. Coupled with the “This is crazy!” testimonial it all just works.

Color Keyboard - Below is a technique that is popping up where the screenshots are sliced out from one panorama image. When the images are uploaded in the proper order, it gives the illusion that it is one large image.

Bump - Same technique as above. This is a great technique to use when you can’t fit all of the text and copy you need to properly communicate an idea on one screenshot.

Safe Slide - This screenshot is just clean. Something to remember with your screenshot designs is sometimes less says more. Below is a great example of that.

iHeartRadio - Don’t be afraid to cut off part of the interface if it doesn’t keep the potential customer from understanding the value provided.

Any.Do – An example of using a blurred background image to give the image depth and also imply that the app is being used in a real environment.

Clear - Nice image of hands manipulating the interface.

Babycenter – These screenshots are clear and have very succinct copy that describes the benefits of using the app.

Examples of Things to Avoid in Screenshot Design

The below examples aren’t meant to pick on anyone’s design skills, but to sincerely help you spot areas of concern when designing your screenshots.

Gossip Junkie - There are too many screens shown on this one screenshot. When you’re previewing it on the iPhone, iPad or browser it is difficult to see what they are trying to illustrate.

Calendar Importer - Avoid using stock photography that looks like fake stock photography. For this example it would be more impactful to show a screen of the app that shows HOW the app helps you remember important events.

Calendar iBirthday - This screenshot is trying to illustrate that you can send your greetings to a loved one via Facebook. Rather than having the “hi sweetheart” text at the bottom, it would be more clear if it simply described the actual functionality. The way it looks in the example below you have to guess the functionality based on the imagery. Also, if you ever find that your text needs a white outline around it, you’re trying to put text in a bad place on the image. In this example they could put text above the phones and not need the white outline.

Simple Photo Note - This app uses all cartoons to describe the app’s functionality. Be sure to include images of your app interface.

NoteDown - This example has so many description bubbles, it covers the app interface.

Task - This is a fantastic photograph, minus the long fingernails. Make sure any photos of hands or fingers are incredibly well groomed. Like head to the nail salon and spring for a $20 manicure. It’s worth it. :)

Craigslist – If you’re using a hand or finger make sure that the image is carefully “cut out” or silhouetted in photoshop. Below you can see this hand has two problems: 1. It’s very low resolution and grainy 2. it was not properly silhouetted and has a chunk of white is showing on the left side of the pointer finger.

 

So what now?

Well if you haven’t already, click here to download a set of screenshot templates I put together for y’all :) And after you use them to spruce up your screenshots, please leave a comment below to share your work with others!


Get these blog posts sent to your email.

DON’T WORRY, WE DON’T EAT OR EMAIL SPAM


Discussion

30 Comments / Leave a comment
  1. Kick ass article! Hands on practical advice for developers. We’ll make sure to favorite this on our site! Chris, CodeNgo

  2. Hi Jen,
    Great article. I haven’t found a lot written on the subject of screenshot design and I agree that it is very important.

    However, I’ve got to point out that, while you call out both Errands To Do List and Easy Note To Do as having ugly icons that would prevent people from even giving them a second glance, that doesn’t appear to be true based on ratings and reviews.

    For example, Easy Note has great ratings (5 stars) and nearly 100 reviews. That’s an app worth a second look in my book. And Errands To Do List has a staggering 7503 ratings and still 5 stars? Wow! That app is clearly VERY POPULAR. Those stats even kill Evernote, which everyone in the world has heard of.

    I do agree that neither of those app icons are very creative, memorable, or innovative, (Evernote is the clear winner there), but I don’t think they’re necessarily UGLY. Uninspired and sort of stock icon looking, but they are still polished and crisp. I’ve seen plenty of truly hideous icons in the App Store that prove your point. I would never give an app with such an ugly icon a chance.

    Cheers,

    Patrick @ Threevio Apps

    • Hey Patrick thanks for the feedback. I agree that a more descriptive critique is called for – “ugly” was just a short word that would fit on the red labels of the image :)

      A better word to describe those icons is “invisible”. The point of calling out the icons wasn’t to critique icons, but to show the process of how potential customers get to the screenshots. And then how screenshots are used to make buying decisions. People of course can look at icons that are not as well designed and then evaluate the screenshots for those apps as well.

      But check out the screenshots for Errands To Do. As the icon indicates, the interface design and screenshots do not say “I’m better than the other To Do apps you’re looking at and this is why..”

      Love chatting about this – more comments and critique are welcome! :) jen

      • (found the article to be informational – thank you).
        I also was left wondering about the specifics of “Errands to do” having a bad icon. I stopped reading before I saw which you decided had “bad” icons and noted what Patrick did – gobs of 5 stars. I also thought bold colors, very simple. There are so many “to do” apps that I appreciated the simplicity. Regarding this (the icon) and NOT the subsequent screen shots, could you please give a visual example of what icon would be an improvement? Again – thank you for your insightful post.

        Kind regards,
        Margaret.

    • Great question! You could use or not use the device in the image and still have screenshots that express benefits, as some of the examples above show. My personal opinion is ask for forgiveness rather than permission. :) You can always easily take the device off the screenshots.

  3. I’m a user, not a developer. I definitely want to see quality icons, and I appreciate your attention to design in this post.

    But I wanted to point out that there’s another side to your advice regarding screenshots. It drives me crazy when I’m browsing the App Store and see an app page with composed images instead of actual screenshots. I can read the description to learn about the app’s functions; the screenshots are where I go to find out if I’ll get along with its interface. I feel that I don’t get this information effectively when the image doesn’t show a full screen; when an app clutters up its “screenshots” with a bunch of text, or shows me an image of a device in hand for no reason, I start to wonder if there’s something about the interface the app wants to hide.

    There are times when I’m okay with it; the images you include for Clear and Bump genuinely show me something about using the app that I couldn’t learn from “pure” screenshots. But for me, most of the other images you offer feel as if they’re distracting me from the information I need to get. (Chameleon Clock is the worst offender, as it actually blocks part of the screen with something unrelated to using the app.)

    I know I’m not a representative example; many users obviously like the kinds of images you post. But I wanted to remind you and your readers that people like me do exist, in hopes that I’ll have to see one less screenshot junked up with text or imagery that’s not part of the app when I’m browsing the App Store.

    • Hi paul everyone can express their personal opinion here – it’s welcome :)

      I hope that readers can use the examples shown in the article to get an idea of how to design screenshots communicate *more* than a static screenshot would.

      For the reasons noted in the article, (i.e. how shoppers in a time crunch bypass written descriptions to scan visuals) it is logical to conclude that the majority of mobile shoppers make buying decisions based on these visuals.

  4. Hi Jen,
    thanks for the interesting article. I downloaded the templates but most of them seem to be empty. The only one I can see is 640x1096p.

    • hey kai – yes those are templates you can drag and drop your final artwork into. watch the video on that page it explains why it’s done that way.

  5. These are delicious tips and ravishing templates. They are more geared toward utility apps though, could you perchance release some for games?

    Brad

    • hey brad -thanks for the positive feedback! when you say “release some for games” what do you mean? In what way would you like for them to be different?

      • Games tend to need flashier graphics, with cool characters and more fun fonts. These templates are great for sprucing up utility apps, but they won’t make a game stand out as much as screenshots for a game like “Penguin Rush!” or “Action Cops Vs Speed Attack Robbers”

  6. Hi Jen,

    great templates, worked great for iPhone5 but what about iPhone 4/4S? Would love to reuse them for those devices too!

    Thanks again

  7. Hey Jen!

    Thanks a lot for this great article and those amazing templates.

    Best Regards

  8. Hey Jen,

    First off nice article, thanks for all the work you put into it! I agree with you on most of the design elements you used as demonstrations. That being said I really feel that Icon and screen shot design, comes down to individual view. Aside from the obvious, terrible designs, clashing colors etc. in most cases it will come down to the preference of the individual user. For example the very first design comparison you used with the Icons I felt like the first two were not bad. The Evernote Icon might be better looking, but that’s just the first thing that is noticed, then the user immediately looks for those golden stars, and they want to see 4.5 – 5 right? Then they look at the price, usually in that order. Point I might be trying to make is, that everything is taken into account in a matter of seconds, sometimes simple clean design is better or just as good as the $5K – $10K icon. Just a thought :) Thanks again for the post.

  9. Thanks Jen! Wasn’t expecting any templates! But it was an awesome article and a surprise gift right at the end.

  10. Awesome article ! Thank You so much ! I even loved the templates you have provided !

  11. Great article.
    can you put some light on screenshots for Games because they dont have much menus stuff.
    So it should be in game screenshots or what ?

    • Illustrate the gameplay and perhaps one of your ideal customers using the app. If your game appeals to kids, have one screenshot be an image of a kid playing the game etc.

Leave a Comment

*

Check out these related posts:

read more ►

Using “The Validation Board” for Mobile App Developers

Think your app idea has what it takes to be the next Instagram? Think again. As of January 2013 there were 775,000 apps in the iOS app store, yet nearly 60% of developers report they never broke even on their development costs. Even worse, almost 70% report their most successful app never made more than $5,000. […]

read more >
read more ►

[Discussion] What Will Facebook Home Mean for The Future of iOS Design?

“What would it feel like if our phones were designed around people, not apps?” – Mark Zuckerburg on Facebook Home   You may have heard the news already, the “Facebook Home” is being released today. Technically, Facebook Home isn’t really an OS. It’s also not a “fork” of Google’s Android software. It’s an App layer […]

read more >
read more ►

“I have a good idea for an app…”

You can’t stop thinking about  how awesome your new app idea is, can you? If you could just get this thing out of your head and into people’s hands, you could change the world. But what’s the process to take a good idea for an app to a five star feature at the top of […]

read more >
Close
Get a Free Design Course
Learn to design a custom iPhone app interface in only 30 minutes.

Yes, it's free.