Module 4: Visual Assets That Sell: Icons, Screenshots, and Videos

Step 1 – How Visual Assets Drive Conversion on the App Store

Your icon, screenshots, and preview videos are usually the first things users see after your app title. On iOS, especially on iPhone, users often:

1. See icon + title + subtitle + rating in search results
2. Tap into the product page
3. Glance at the first 1–3 screenshots or the autoplaying preview video

Within a few seconds, they decide to install or bounce.

In this module you’ll learn to:

• Work within Apple’s current specifications (as of early 2026)
• Design or brief assets that communicate value instantly
• Prioritize the icon and first three screenshots/frames for maximum impact
• Use videos without accidentally lowering conversion

You should already understand from Modules 2–3:

• How your keywords and title/subtitle attract the right traffic
• How your product page copy supports your value proposition

Now we focus on making sure that once users land, your visuals sell the story.

Step 2 – Current Apple Specs: Icons, Screenshots, and App Previews

Apple updates App Store rules regularly, so always cross-check with the latest [App Store Review Guidelines](https://developer.apple.com/app-store/review/guidelines/) and [App Store Connect Help](https://developer.apple.com/help/app-store-connect/). The summary below reflects common requirements and limits that have remained stable up to early 2026:

App Icon (App Store Icon)

• Format: PNG
• Key size: 1024 × 1024 px (no transparency)
• Shape: Provide a square icon; iOS applies the rounded mask
• No text required, but if used, keep it minimal and legible

Screenshots (App Store Product Page)

• Device-specific sets: You upload separate sets for different size classes (e.g., 6.7", 6.1", 5.5", iPad). Apple can scale them to other devices in the same family.
• Count: Up to 10 screenshots per device
• Orientation: Portrait or landscape per set; mixing is allowed but can look messy
• File type: JPEG or PNG
• Status bar: Apple recommends a clean, consistent status bar (time, battery, etc.)

App Previews (Video)

• Count: Up to 3 app previews per device
• Length: 15–30 seconds each (Apple’s current common range; check App Store Connect for exact limits for your category)
• Orientation: Must match the first screenshot’s orientation for that device
• Content: Must be screen recordings of the app itself (no purely promotional footage); you can overlay minimal text and music
• Autoplay: On many devices, the first preview autoplays muted in search results and on the product page

These constraints shape what you can show and in what order. The rest of the module focuses on how to use these slots strategically.

Step 3 – Designing a High-Performing App Icon

Your icon’s job: be recognizable, legible at small sizes, and emotionally aligned with your category.

Practical Design Principles

1. One focal symbol

• Example: A finance app uses a simple upward arrow + bar chart instead of a full bank building illustration.
• Avoid tiny details; they blur on small screens.

1. Strong silhouette and contrast

• Use a clear shape that stands out against typical backgrounds (light/dark mode, wallpapers).
• Example: A meditation app uses a solid circle with a white minimal lotus instead of a gradient-heavy scene.

1. Color strategy

• Research top apps in your category.
• If most productivity apps are blue, you might choose a warm accent color (e.g., orange) to stand out, while still looking professional.

1. Avoid text unless it’s a brand initial

• One bold letter (e.g., "F" for a well-known brand) can work.
• Full words or long abbreviations are usually unreadable.

1. Consistency with brand and screenshots

• If your UI is mostly dark with neon accents, reflect that in the icon.
• Users should feel continuity between the icon, screenshots, and in-app experience.

Mini Case: Habit Tracker App

• Weak icon: Tiny calendar, gradient background, small word "Habits" at bottom.
• Improved icon: Solid teal background, large white checkmark inside a rounded square. No text.

The improved version:

• Reads instantly at small sizes
• Signals the core concept: completion/checking off tasks
• Matches a UI that uses teal + white as the primary palette

Step 4 – Icon Critique Exercise

Imagine you’re evaluating icons for a language learning app. You have three concepts:

1. Icon A: A globe with tiny flags of 10 countries around it, gradient background, app name text at the bottom.
2. Icon B: A solid blue speech bubble with a bold white "A" inside.
3. Icon C: A detailed cartoon of a teacher at a chalkboard writing different words.

Your task (thought exercise):

• Rank them from best to worst for App Store performance.
• For each, write down:
• One strength
• One weakness

Then compare with this reasoning:

• Likely best: Icon B – Simple, clear symbol (speech + language), readable at small sizes.
• Middle: Icon A – Conceptually relevant, but too detailed; flags and text will blur.
• Worst: Icon C – Overly complex illustration; will collapse into noise on small icons.

Reflect: How would you simplify Icon A or C while keeping the same core idea?

Step 5 – The First 3 Screenshots: Your Visual Elevator Pitch

Most users never swipe through all 10 screenshots. The first 3 do most of the work.

Role of the First Three Screenshots

1. Screenshot 1: Core Value Proposition

• Answer: “What does this app do for me?” in one frame.
• Use a hero screen (e.g., dashboard, main action) + short headline.
• Example (budgeting app): Main overview screen + text overlay: “See all your money in one place.”

1. Screenshot 2: Primary Use Case / Benefit

• Show the most common task a new user cares about.
• Example: Transaction list + text: “Track spending by category automatically.”

1. Screenshot 3: Differentiator / Social Proof

• Show what makes you different or why you’re trustworthy.
• Example: Insights screen + text: “Smart alerts that prevent overspending.” or “Trusted by 2M+ users.”

Design Guidelines

• Device frame: Many apps show UI inside a device mockup (iPhone frame). This is allowed if it’s accurate and not misleading.
• Readable overlay text:
• Use short, benefit-focused lines (3–7 words).
• High contrast: light text on dark overlay or vice versa.
• Align with keywords/benefits from your title and subtitle.
• Hierarchy:
• Big headline (benefit)
• Small subline (feature or detail) if needed

Your goal: a user should understand what they gain from your app by just glancing at the first screenshot, and get a fuller picture by the third.

Step 6 – Storyboarding Your Screenshot Sequence

You’ll create a 5-screenshot storyboard for a fictional app: a focus timer app for students.

Context:

• Core value: Help students stay focused and finish assignments.
• Key features: Pomodoro timer, task list, stats, distraction blocking.

Task: Sketch (mentally or on paper) what each screenshot shows and what the main text overlay says.

Use this template:

1. Screenshot 1 – Core Benefit

• Visual:
• Text overlay (benefit):

1. Screenshot 2 – Primary Use Case

• Visual:
• Text overlay (benefit):

1. Screenshot 3 – Supporting Feature

• Visual:
• Text overlay (benefit):

1. Screenshot 4 – Differentiator

• Visual:
• Text overlay (benefit):

1. Screenshot 5 – Social Proof / Emotion

• Visual:
• Text overlay (benefit or proof):

Example solution (one possible answer):

1. Visual: Timer running on a clean interface.

Text: “Stay focused for 25 minutes at a time.”

1. Visual: Task list with subjects and due dates.

Text: “Organize homework and exams in one place.”

1. Visual: Stats screen with streaks and total focused hours.

Text: “See your progress and daily streaks.”

1. Visual: Distraction blocker screen showing blocked apps during a session.

Text: “Block distractions while you study.”

1. Visual: Friendly dashboard with a weekly summary and a subtle 4.8★ rating badge.

Text: “Join thousands of students studying smarter.”

Check: Does each screenshot add new information while keeping the story focused on student outcomes, not just features?

Step 7 – Using App Preview Videos Without Hurting Conversion

App previews can boost or hurt conversion depending on execution.

Pros of App Previews

• Autoplay in search and on the product page can grab attention.
• Great for apps where motion matters (games, creative tools, AR, video editing).
• Can show multiple features quickly.

Common Pitfalls

• Slow intros (logo animations, long fades) before showing real UI.
• Overly busy, fast cuts that make the app confusing.
• Misleading footage (e.g., cinematic scenes unrelated to actual UI) – can trigger rejection under Apple’s guidelines.
• Poor legibility: tiny text, low contrast, cluttered screens.

Best Practices (Aligned with Apple’s Current Expectations)

1. Show real UI within the first 1–2 seconds.

• Cut straight to the main action.

1. Use short, benefit-driven captions.

• Example (fitness app):
• Frame 1: "Crush your daily workout"
• Frame 2: "Follow expert-guided routines"
• Frame 3: "Track progress automatically"

1. Match orientation and device type.

• If your first screenshot is portrait iPhone, your preview should be too.

1. Mute-safe design.

• Assume many users watch with sound off. Use clear visuals and captions.

1. Test with and without video.

• In some categories, a mediocre video can lower conversion compared to strong screenshots alone.

If you’re resource-limited, prioritize excellent static screenshots before investing heavily in video production.

Step 8 – Quick Check: Screenshots and Videos

Test your understanding of how to prioritize visual elements for conversion.

Step 9 – Before/After: Turning Weak Visuals into Assets That Sell

Let’s compare two simplified versions of a habit tracking app product page.

Before (Weak)

• Icon: Detailed calendar with tiny checkmarks and the word "Habits".
• Screenshot 1: Settings page, no text overlay.
• Screenshot 2: Long list of habits, small text, no explanation.
• Screenshot 3: Profile page with avatar.
• App Preview: 10 seconds of logo animation, then quick UI flashes with no captions.

Problems:

• Icon is cluttered and unreadable at small sizes.
• First screenshot doesn’t show value; it shows configuration.
• No clear benefit text; users must infer what the app does.
• Video wastes the first seconds and doesn’t communicate benefits.

After (Improved)

• Icon: Simple green circle with a bold white checkmark.
• Screenshot 1: Today’s habit view with clear streaks.

Text: “Build daily habits that stick.”

• Screenshot 2: Habit creation screen with color-coded categories.

Text: “Customize habits for your real life.”

• Screenshot 3: Streaks and stats screen.

Text: “Stay motivated with streaks and stats.”

• App Preview: 15-second video, portrait, starts immediately on the Today view, shows:

1. Checking off a habit
2. Creating a new habit
3. Viewing streaks

Each segment has a short caption mirroring the screenshot benefits.

Result:

• Visuals now tell a coherent value story.
• Icon and first screenshot quickly answer: “Why should I care?”
• Video reinforces the same narrative instead of distracting from it.

Step 10 – Key Term Review

Flip these cards (mentally) to review core concepts from this module.