Screenshot Guidelines for iOS, Android, and Technical Documents

Summary: The quality of your screenshots affects how customers perceive your products, use your software, and deal with error messages.

The following guidelines can be applied to different types of technical and business documents. The final section provides screenshot guidelines for Android and iOS applications, for example, if you want to submit apps to Google Play or iTunes.

Screenshot Best Practices

1. For technical and business documents, add a 1-pixel border around the screenshot so they stand out from the white background. If you use a 1-pixel border, make sure it’s applied to all screen grabs, otherwise it looks inconsistent. You don’t need this for screenshots for tablets and mobile devices.

2. Add explanatory text to explain what’s happening in the screenshot.

3. Avoid too much activity in the screenshot, as this makes it difficult for the user to determine where they should focus.

4. Check for typos in the dialog box name, fields, or data in fields. As dummy data is often created in a hurry, watch out for typos, errors, abusive, swear words, or other negative terms.

5. Check if the product name changed during development, for example, from Lotus to Excel.

6. Highlight popular and regularity used features

7. Highlight the most popular features in screenshots.

8. If you use explanatory text in one screenshot, use it in others as users will expect it.

9. Keep text short. Remove filler words. Avoid jargon and clichés.

10. Place text over a solid background to improve readability.

11. Screenshots are helpful if you want to highlight interactivity.

12. Screenshots should show users what your app can do.

13. Show screenshots of what it looks like to use an app in the middle or towards the end of a task.

14. Update captions, especially if the text is generated automatically by content controls.

15. Use a logical naming convention for screenshots, for example, Application-Window-Task, MSWord-Print-Settings.png.

16. Use a tool such as SnagIt to batch process the file conversion process. Snagit lets you convert files from different file formats, say gif, jpg, and bmp to another format and, if you wish, with the same dimensions.

17. Use clear colors. Avoid gradients, blurred lines, or special effects.

18. Use screenshots to illustrate how your app works.

19. Use the same file format, for example, PNG, for all screenshots.

20. Use the same font style and size throughout all your screenshots.

Screenshot Mistakes to Avoid

1. Redundant screenshots as it increases data contamination.

2. Screenshots that don’t show anything important about your app.

3. Don’t waste space with screenshots that don’t show anything important about your app.

4. Currency symbols, for example, R for South African Rand, as you may have to change these for different audiences. Remove the currency symbol to avoid this.

5. Dummy test data that looks unprofessional

6. Including any type of customer data.

7. Offensive names or words in the dummy data

8. Remove customer references on screen names, eg [Name of the Client’s] Settings window. Change this to the Settings window.

9. Using employee names or celebrity names on screenshots of dialog boxes.

10. Using employee, celebrity or joke names when setting up account data. Instead, use generic names, such as John Customer, Mary Customer.

Android Screenshot Checklist

To publish your Store Listing, you must provide at least two screenshots.

1. JPEG or 24-bit PNG (no alpha)

2. Minimum dimension: 320px

3. Maximum dimension: 3840px

The maximum dimension of your screenshot cannot be more than twice as long as the minimum dimension.

If a video is available, your screenshot is the thumbnail shown on Google Play, followed left-to-right by the screenshots best suited for the device the user is browsing on.

On Google Play (play.google.com), tablet screenshots are prioritized and appear before phone screenshots.

Tips

1. Don’t put text or important visual information near the borders – specifically the bottom third of the frame.

2. Center align logo and copy information in the vertical and horizontal center of the frame.

Use large font sizes for text.

Apple Developer Screenshot Guidelines

When creating product images in the App Store:

Screenshots should display only the actual screen content from your app that a user will see when the app is running.

Do not include Apple product images into your screenshots on the App Store.

Web browser guidelines

When taking screenshot of web browsers:

1. Screenshot the full browser window, not just the area where the error exists unless you want to highlight a specific area on the screen.

2. URL address – decide if you want to include the address bar, which includes the URL of the webpage, for example, if you want to highlight where an error is occurring.

iPhone Screenshot sizes

– Screenshots should display only the actual screen content from your app that a user will see when the app is running.

– Do not incorporate Apple product images into your screenshots on the App Store — App Store Marketing Guidelines

– A straight-on product shot is preferred.

– Do not use extreme angles.

– iPhone 3 (3.5 Inch): 640 x 920

– iPhone 4+5 (4 Inch): 640 x 1136

– iPhone 6 (4.7 Inch): 750 x 1334

– iPhone 6 Plus (5.5 Inch): 1242 x 2208

iPad: 1536 x 2048

Large App Icon

– 72 DPI, at least

– RGB color space

– 1024×1024 pixels

File type of .jpeg, .jpg, .tif, .tiff, or .png.

3.5-Inch Retina Display Screenshots

– 960×640, 960×600, 640×960 or 640×920 pixels,

– 72 DPI, at least

– RGB color space

– JPG or PNG format.

4-Inch Retina Display Screenshots

– 1136×640, 1136×600, 640×1136 or 640×1096 pixels

– 72 DPI, at least

– RGB color space

– JPG or PNG format.

iPad Screenshots

– .jpeg, .jpg, .tif, .tiff, or .png file

– 1024×768, 1024×748, 768×1024, 768×1004, 2048×1536, 2048×1496, 1536×2048, or 1536×2008 pixels

– 72 DPI, at least

– RGB color space