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 ``` ### Creative Assets, Product Page Header & Search Results Visuals > Introduced at WWDC26; submittable via App Store Connect's Asset Library, rendering on iOS 27 / iPadOS 27. (Per the session "Enhance your presence on the App Store".) Two new surfaces beyond screenshots, both fed from the **Asset Library** (ASC's central hub for screenshots, previews, event media, and the new marketing images/videos called creative assets): - **Product Page Header** — an image or video *above* your screenshots; the first visual element people see. Header, icon, and screenshots should "work together" — one visual identity, video when you want to control the narrative. - **Custom Search Results visuals** — replace the default screenshot strip in search with an impactful image/video; you can show a **tailored asset per search keyword**, pairing it with the matching Custom Product Page and deep link. Working rules from Apple's session: - ✅ **Pre-approve assets** in the Asset Library — approved assets can then update the header and search visuals **in real time, without another review or an app update**. Two flows: attach to a version submission, or submit assets standalone. - ✅ Use the **same asset** on header and search results for a seamless discovery→install experience. - ✅ A/B every new visual through PPO ("test different visuals and see exactly which ones your audience respond best to"); use the ASC Preview tool across iPhone/iPad, orientations, and languages before submitting. - ✅ Automate uploads/submissions via the App Store Connect API. - ❌ Don't treat these as decoration — assets must "clearly communicate your app's core value" (aspirational imagery for outdoor apps, destinations for travel, gameplay/characters for games). Keep a motion-capable asset library (source-quality captures, layered project files) so every PPO/CPP learning can graduate into header and search assets. ## 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