product-screenshot-design

name	product-screenshot-design
description	Use when creating product screenshots for marketing pages and app stores. Covers the staging (real data vs sample), the device frame, callouts, and how to keep screenshots fresh across product changes.

Product Screenshot Design

Real product screenshots build trust. Stylized illustrations of the product look fake.

Real over rendered

Actual product screenshots > 3D mockups. Show the real UI. Buyers can tell the difference.

Sample data

Use realistic sample data. NOT 'Lorem ipsum' or 'Customer 1'. Real-sounding names, dates, numbers.

Device frames

Optional. Modern preference: borderless. If using a frame, use a current device (current MacBook, not 2017).

Callouts

Arrow + caption pointing at specific UI elements. Use sparingly (1-2 per screenshot). Don't clutter.

Maintenance

Screenshots become stale when product changes. Plan to refresh quarterly. Mark screenshot date in alt text for tracking.

Common mistakes

Lorem-ipsum data. Old screenshots showing deprecated UI. 8 callouts on one image. Vector mockups that don't match real product.

Where this fits in X3 Compass

Applied across the X3 Compass design system.