> ## Documentation Index
> Fetch the complete documentation index at: https://docs.nativeline.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Screenshots & Preview

> Create compelling App Store visuals

# Screenshots & Preview

Screenshots are often the deciding factor in whether someone downloads your app. Make them count.

## What You Need

### Required Screenshots

You need screenshots for each device size you support:

| Device         | Size (pixels) | Required                    |
| -------------- | ------------- | --------------------------- |
| iPhone 6.7"    | 1290 x 2796   | Yes (if supporting Pro Max) |
| iPhone 6.5"    | 1284 x 2778   | Yes                         |
| iPhone 5.5"    | 1242 x 2208   | Yes                         |
| iPad Pro 12.9" | 2048 x 2732   | Yes (if iPad app)           |
| iPad Pro 11"   | 1668 x 2388   | Optional                    |

### Screenshot Limits

* Minimum: 3 screenshots per device size
* Maximum: 10 screenshots per device size
* App previews count toward the 10 limit

<Note>
  App Store Connect can automatically scale from larger to smaller sizes. Upload for 6.7" and it can generate 6.5" and 5.5".
</Note>

***

## Screenshot Best Practices

### Show the App, Not Just Screens

**Good:** App in use with context
**Bad:** Raw screenshots with no explanation

### Highlight Key Features

Focus on what makes your app valuable:

1. Main feature first (most visible in search)
2. Supporting features after
3. End with credibility (awards, reviews, etc.)

### Use Text Overlays

Add brief explanatory text:

* Large, readable fonts
* 5 words or fewer per screen
* Consistent style throughout

### Examples

**First Screenshot:** Hero shot of main feature

```
"Edit photos in seconds"
[Phone showing photo editor]
```

**Second Screenshot:** Key feature

```
"50+ professional filters"
[Filter selection screen]
```

**Third Screenshot:** Benefit

```
"Share anywhere instantly"
[Share screen]
```

***

## Creating Screenshots

### From Simulator

1. Run app in Simulator
2. Navigate to desired screen
3. Press **Cmd + S** to save screenshot
4. Find in designated folder

### Set Simulator Size

Match App Store requirements:

* **6.7":** iPhone 15 Pro Max
* **6.5":** iPhone 14 Plus or iPhone 15 Plus
* **5.5":** iPhone 8 Plus

### Adding Context

Use design tools to enhance:

* Add device frames (optional)
* Add text overlays
* Add backgrounds
* Maintain consistent style

***

## App Preview Videos

Optional 15-30 second videos showing your app in action.

### Specifications

| Aspect     | Requirement                |
| ---------- | -------------------------- |
| Length     | 15-30 seconds              |
| Format     | H.264, .mov or .mp4        |
| Frame rate | 30 fps                     |
| Resolution | Match screenshot size      |
| Audio      | Optional, max 12 weeks old |

### What to Show

<Steps>
  <Step title="Start with value">
    Open with your best feature
  </Step>

  <Step title="Show real usage">
    Demonstrate actual interactions
  </Step>

  <Step title="Keep it simple">
    Focus on 2-3 key features
  </Step>

  <Step title="End with download hook">
    Leave viewers wanting to try it
  </Step>
</Steps>

### Recording Tips

* Use QuickTime Player → File → New Screen Recording
* Record the Simulator in action
* Keep movements smooth and intentional
* Don't show loading screens or errors

***

## Screenshot Strategies

### Strategy 1: Feature Showcase

Each screenshot highlights a different feature:

1. Main feature
2. Secondary feature
3. Third feature
4. ...

### Strategy 2: User Journey

Walk through using the app:

1. Getting started
2. Main action
3. Result
4. Sharing/completion

### Strategy 3: Problem → Solution

Show the value proposition:

1. "Tired of X?"
2. "Here's how we solve it"
3. Result
4. How easy it was

***

## Design Guidelines

### Do

* ✅ Use high contrast text
* ✅ Match your app's color scheme
* ✅ Be consistent across all screenshots
* ✅ Show real content (not Lorem ipsum)
* ✅ Test readability on small screens

### Don't

* ❌ Use tiny text
* ❌ Overwhelm with too much information
* ❌ Show empty states or errors
* ❌ Include device status bars
* ❌ Use copyrighted content without permission

***

## Localization

If your app supports multiple languages:

* Provide screenshots for each language
* Translate text overlays
* Use region-appropriate content
* Consider cultural differences in design

***

## Uploading Screenshots

<Steps>
  <Step title="Go to App Store Connect">
    Navigate to your app → App Store tab
  </Step>

  <Step title="Scroll to Screenshots">
    Find the Media section
  </Step>

  <Step title="Select device size">
    Click on each size tab
  </Step>

  <Step title="Drag and drop">
    Upload screenshots in desired order
  </Step>

  <Step title="Reorder if needed">
    Drag to rearrange
  </Step>
</Steps>

***

## Screenshot Order

Order matters — especially the first three:

| Position | Visibility        | Content                          |
| -------- | ----------------- | -------------------------------- |
| 1st      | Search results    | Your best, most compelling image |
| 2nd      | Search results    | Second most important feature    |
| 3rd      | Search results    | Third key feature                |
| 4th+     | Product page only | Supporting features              |

***

## Testing Your Screenshots

### Preview in App Store Connect

Use the preview feature to see how screenshots appear in:

* Search results
* Product page
* Different device sizes

### Check Competitors

Look at top apps in your category:

* What style do they use?
* How much text?
* What order?

### A/B Testing (after launch)

App Store Connect offers product page optimization:

* Test different screenshots
* See which perform better
* Apply winners

***

## Common Mistakes

<AccordionGroup>
  <Accordion title="Raw screenshots with no context" icon="image">
    Adding text overlays and context significantly increases conversion. A plain screenshot doesn't sell your app.
  </Accordion>

  <Accordion title="Too much text" icon="text">
    Keep text minimal. If users have to read a paragraph, they'll scroll past.
  </Accordion>

  <Accordion title="Wrong order" icon="sort">
    Your best screenshot should be first. Don't bury the best feature.
  </Accordion>

  <Accordion title="Inconsistent style" icon="palette">
    Use the same fonts, colors, and layout style throughout for professional appearance.
  </Accordion>
</AccordionGroup>

***

## Tools for Screenshots

### Free Options

* **Figma** — Design screenshots with overlays
* **Canva** — Templates for app screenshots
* **Screenshot from Simulator** — Base images

### Paid Options

* **Sketch** — Professional design tool
* **Adobe Photoshop** — Advanced editing
* **AppLaunchpad** — Specialized app screenshot tool

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Review Guidelines" icon="book" href="/publishing/app-store/review-guidelines">
    What Apple looks for
  </Card>

  <Card title="Submit for Review" icon="paper-plane" href="/publishing/app-store/submission">
    Ready to submit
  </Card>
</CardGroup>