screenshot-planner

# Screenshot Planner

Plan compelling App Store screenshot sequences that showcase your app's value.

## When This Skill Activates

- User is preparing App Store assets
- User wants to improve screenshot conversion
- User asks about screenshot strategy or captions
- User is launching a new app or major update

## Information Gathering

Before planning, ask about:

1. **App Type**
   - What category? (Productivity, Games, Lifestyle, etc.)
   - Primary use case?
   - Visual style of the app?

2. **Key Selling Points**
   - What makes users choose this app?
   - Most impressive features visually?
   - Any unique UI elements?

3. **Target Audience**
   - Who downloads this app?
   - What problem are they trying to solve?
   - What matters most to them?

4. **Competitors**
   - What do competitor screenshots show?
   - How can you differentiate?

## Screenshot Strategy

### The 5-Screenshot Framework

Most users only see the first 2-3 screenshots. Order matters!

| Position | Purpose | Content |
|----------|---------|---------|
| **1** | Hero Shot | Value proposition + best visual |
| **2** | Core Feature | Primary use case in action |
| **3** | Key Differentiator | What makes you unique |
| **4** | Secondary Feature | Another compelling feature |
| **5** | Social Proof/CTA | Reviews, awards, or final push |

### Extended (10 Screenshots)

| Position | Purpose |
|----------|---------|
| 6 | Additional feature |
| 7 | Customization/settings |
| 8 | Integration/ecosystem |
| 9 | Before/after or workflow |
| 10 | Final CTA with app icon |

## Caption Writing

### Caption Formula

```
[Action Verb] + [Benefit] + [Optional Detail]
```

### Examples by Category

**Productivity:**
- "Capture ideas instantly"
- "Never miss a deadline"
- "Your tasks, beautifully organized"

**Health & Fitness:**
- "Track every workout"
- "See your progress over time"
- "Personalized plans that work"

**Photo & Video:**
- "Edit like a pro in seconds"
- "Filters that actually look good"
- "Share anywhere with one tap"

**Finance:**
- "Know where your money goes"
- "Budget without the stress"
- "Insights that save you money"

### Caption Rules

✅ **Do:**
- Keep under 8 words
- Start with action verbs
- Focus on user benefits
- Match the visual exactly
- Use sentence case

❌ **Don't:**
- Use technical jargon
- Include version numbers
- Mention prices
- Use "Our app does..."
- Write full sentences

## Visual Best Practices

### Device Frames

| Approach | When to Use |
|----------|-------------|
| **With frames** | When device context matters, lifestyle apps |
| **Without frames** | Maximizing screen real estate, content apps |
| **3D angles** | Standing out, premium feel |
| **Flat/straight** | Clean, professional, enterprise |

### Backgrounds

- **Solid colors:** Clean, professional, fast loading
- **Gradients:** Modern, dynamic, attention-grabbing
- **Lifestyle photos:** Context, emotion, aspiration
- **Abstract patterns:** Creative, unique, memorable

### Typography

- Use 2 fonts max (headline + body)
- Minimum 60pt for headlines (iPhone)
- Ensure readability on small thumbnails
- Match your app's brand fonts if possible

## Screenshot Storyboard Template

```
SCREENSHOT 1: HERO
━━━━━━━━━━━━━━━━━━
Caption: [Value proposition - max 6 words]
Visual: [Key screen showing main feature]
Background: [Color/gradient that pops]
Notes: [This is first impression - make it count]

SCREENSHOT 2: CORE FEATURE
━━━━━━━━━━━━━━━━━━━━━━━━━━
Caption: [What can user do?]
Visual: [App in action, primary workflow]
Background: [Consistent with #1]
Notes: [Show the "aha" moment]

SCREENSHOT 3: DIFFERENTIATOR
━━━━━━━━━━━━━━━━━━━━━━━━━━━
Caption: [What makes you unique?]
Visual: [Feature competitors don't have]
Background: [Can vary slightly]
Notes: [Answer "why this app?"]

SCREENSHOT 4: SECONDARY FEATURE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Caption: [Another key benefit]
Visual: [Compelling secondary feature]
Background: [Consistent theme]
Notes: [Add depth to value proposition]

SCREENSHOT 5: TRUST/CTA
━━━━━━━━━━━━━━━━━━━━━━
Caption: [Social proof or call to action]
Visual: [Reviews, stats, or final screen]
Background: [Strong finish]
Notes: [Close the deal]
```

## Size Requirements

### iPhone (Required)
| Size | Device | Dimensions |
|------|--------|------------|
| 6.7" | iPhone 15 Pro Max | 1290 × 2796 |
| 6.5" | iPhone 11 Pro Max | 1284 × 2778 |
| 5.5" | iPhone 8 Plus | 1242 × 2208 |

### iPad (If Universal)
| Size | Device | Dimensions |
|------|--------|------------|
| 12.9" | iPad Pro | 2048 × 2732 |

### macOS
| Display | Dimensions |
|---------|------------|
| Standard | 1280 × 800 (min) |
| Retina | 2880 × 1800 |

## App Preview Video

### When to Include
- Complex apps that need demonstration
- Games (almost always)
- Apps with unique interactions
- When screenshots can't show the experience

### Video Specs
- 15-30 seconds optimal
- First 3 seconds = hook
- No audio required (most watch muted)
- Show actual app (no external footage first 3s)
- 1080p or higher

### Video Storyboard
```
0:00-0:03  Hook - Most impressive moment
0:03-0:10  Core workflow demonstration
0:10-0:20  Key features montage
0:20-0:30  Final CTA with value prop
```

## Localization

### Considerations
- Captions must be localized
- Screenshots may need localization if they show text
- Consider using minimal in-app text in screenshots
- Some markets prefer different visual styles

### Priority Markets
1. English (US)
2. Chinese (Simplified)
3. Japanese
4. German
5. French
6. Spanish

## Tools

### Design Tools
- **Figma** - Free, collaborative
- **Sketch** - Mac-native, templates available
- **Photoshop** - Full control

### Screenshot Generators
- **Screenshots.pro** - Templates with device frames
- **Previewed** - 3D mockups
- **AppLaunchpad** - Quick and easy
- **Studio** - Mac app with templates

### Capture Tools
- **Xcode Simulator** - File → Screenshot
- **QuickTime** - Screen recording for video
- **ScreenFloat** - Organize captures

## Competitive Analysis

Before finalizing, check competitors:

1. Search your main keyword
2. Screenshot top 5 apps
3. Note patterns:
   - Frame style used
   - Caption placement
   - Color schemes
   - Number of screenshots
4. Differentiate while meeting expectations