Open my wallet

How to make app screenshots before you have any users

The screenshot takes ten minutes. Deciding what should be on the screen is the actual work — and it starts with writing a fixture, not opening a design tool.

Published:

Write one small fictional dataset first — the same names, amounts and dates on every screen — then produce the pixels by seeding a demo account, rebuilding the screen in a design tool, or rendering a mockup at native resolution; the only route that never works is shipping the empty state.

The hard part is the data, not the capture

Every team hits this in the same week. The build runs, the store listing is half-written, and the only account in the database is yours, with three rows named asdf. Taking the screenshot is ten minutes of work. Deciding what should be on the screen takes longer, and it is what separates a listing that reads as a product from one that reads as a staging environment.

So start there, before you open any tool: write the fixture.

Write the fixture first

A fixture is the small set of invented values every screen will draw from. Keep it to one page of notes and treat it as canonical — if a name, a number or a date appears on two screens, it comes from this page both times.

FieldRuleWhy
NamesPlausible, not famous, not a real customerA real person's name in a store listing is a problem you do not need
AmountsUneven, mid-rangeA balance of exactly 10,000.00 reads as placeholder text
DatesRelative to one fixed "today"Absolute dates rot; the listing outlives the shoot
CountsSmall enough for a young product"14,203 members" on a launch listing invites the obvious question
AvatarsGenerated or licensedScraped faces are both a licence and a privacy problem
LocaleOne per screenshot setMixed currency symbols across a set look like a bug

Three rules for invented numbers

Continuity across the set

A store listing shows its images in a row and people scan them as one sequence. Inconsistency between frames is noticed even when nobody can say what is wrong. Run this pass over the whole set, not screen by screen:

CheckWhat breaks it
Same clockOne frame at 9:41, the next at 14:32
Same identityThe account name changes between screens
Same status barBattery at 100% here, 43% and red there
Same totalsA header total that contradicts the previous frame
Same themeOne dark screen in a light set, unintentionally
Same languageAn untranslated string in a localised set

On the clock: Apple's own marketing imagery has shown 9:41 for years, which is why it reads as neutral rather than as a choice. Any fixed time works. A time that changes between frames does not.

Three ways to produce the pixels

Once the fixture exists, the production route is a scheduling decision more than a creative one:

The trade-offs of each are worked through in shipping screenshots before you have users.

Get the chrome right

If you are drawing the screen rather than capturing it, the frame around your content is where mockups usually give themselves away. The measured figures for a 393 × 852 pt iPhone screen at 3× — that is 1179 × 2556 pixels — are a 59 pt status bar at the top and a 34 pt home indicator area at the bottom. Glyph-level geometry is in the status bar guide.

Produce at the largest device class you intend to ship, currently 1290 × 2796 for the 6.7-inch and 6.9-inch families, and let the store scale down rather than building every size by hand.

The line to decide before you export, not after

Invented numbers in a store listing, a landing page or a demo are ordinary. Everybody understands that a demo account is a demo account, and the context carries the meaning. Apple's own product pages do exactly this.

The same image stops being ordinary the moment it is presented as a record of something real: a balance shown to obtain money, credit, an investment or someone's trust. That is not a design question and it does not have a grey zone. Decide which side of it you are on while you are still choosing the numbers.

A cheap habit that helps: keep a visible marker on any render that leaves the context you made it for. It costs nothing where the context is explicit — you remove it for the store listing — and it saves an awkward conversation when an image turns up somewhere you did not send it.

A short pass before you upload

  1. Every frame drawn from the same fixture, with the arithmetic holding.
  2. Clock, battery and signal identical across the set.
  3. No placeholder strings left — Lorem ipsum, TODO, Test User, a truncated ... where a real string would fit.
  4. Exact pixel dimensions for the device class, RGB, no alpha channel.
  5. Nothing on screen that the build does not actually do.

That last one is the one that costs a review cycle. Everything else you can fix in the exporter.

Compose the screen instead of describing it

My Larp Wallet lays out a wallet screen in the browser and exports it at 1179 × 2556 px, the native resolution of an iPhone 14 Pro. What comes out is a mockup, and it says so. One plan, $19/month.

Open my wallet

Keep reading