Who this is for: Product teams preparing still interface assets for a software demonstration.
What to prepare
- A task sequence with required interface states
- Capture settings and product version
- A consistent illustrative dataset
- Full-frame screenshots plus optional detail crops
- An action-to-filename capture note
Write the capture conditions before taking images
Create a short capture note containing the product version, account role, interface theme, browser zoom, viewport dimensions and active workspace. These are production controls, not universal settings: choose the actual dimensions needed by your planned composition and keep them fixed.
Record sidebar state, selected filters and any date range too. A collapsed sidebar in one image and an expanded one in the next can make a static cut look like an unexplained product action. Decide whether the pointer belongs in the capture or will be added during production; accidental double pointers are distracting.
Example: capture one review request consistently
This illustrative asset plan follows fictional request R-014, 'Approve sample packaging,' in a configured review workspace. The sample requester is Example author and the account role is Reviewer. A small 'Illustrative workspace' label appears consistently. The product's real controls and observed states should supply the actual imagery.
- 01-queue.png: Awaiting review filter active; R-014 visible as the second row; no detail panel open.
- 02-detail.png: same filter and row order; R-014 selected; detail panel showing the identical subject and requester.
- 03-decision.png: the actual decision control open for R-014; unchanged underlying content; no fabricated confirmation.
- 04-confirmed.png: the observed saved state after the documented action; capture any list reordering if that is real behavior.
- capture-notes.txt: map each filename to the action that produced it, the interface version and whether the screen is shipping UI or a prototype.
Compare neighboring images, not just individual quality
Open the full set side by side. Compare the record identifier, status text, row count, avatar, navigation selection and scroll position between each pair. A changed number might be correct after a decision, but it needs an explanation. Unrelated changes should trigger a recapture.
Keep a full-frame source alongside any detail crop. The full image preserves orientation and gives the designer room to choose a legible framing. Avoid upscaling a tiny text crop and assuming it will become readable. Inspect it at the intended display size before approving the asset.
Resolve gaps before animation begins
If a required intermediate screen is missing, request another capture or revise the storyboard to use an explicit explanatory cut. Two still images do not prove how the interface transitions between them. Annotate uncertain behavior rather than asking the designer to invent it.
Use replacement sample data in the product before capture when possible. If an image must be edited, record what changed and check every occurrence of the replaced value. Finally inspect notifications, open tabs, account menus and tooltips for information that was outside the main task but entered the screenshot.
Review checklist
- Viewport, theme and browser zoom stay consistent across the set.
- The same record keeps its identity across every screenshot.
- Each changed value follows a documented product action.
- Every cropped asset has an intact source image.
- Private overlays and unrelated notifications have been inspected.