Visual - UI Flow Walkthrough.

Best for: Explaining the core path in a product demo, the first-task onboarding route, a screen preview ahead of a sales demo, usage instructions in a feature launch note

Use: When finishing one job takes several screen changes and those transitions are themselves the point. Use it for the core path in a product demo, the first-task onboarding route, a preview ahead of a sales demo, and usage instructions in a launch note. It works when there are three or four screens (past five the frames get too narrow for the UI sketch to read), each screen has an action that fits in a few words, and the last screen is a clear destination.

Avoid: If there is one screen and the point is to label its parts, use visual-annotated-screenshot. For the look of the product alone use visual-mockup-showcase; to prove change over time at the same spot use visual-progress-photo-strip; to contrast two states half and half use visual-image-compare-split. For process steps with no screens use flow-stages-4 or process-timeline-steps; for paths that branch on a condition use diagram-decision-tree; for the full span of customer touchpoints use diagram-customer-journey-map. If everything in your product happens on a single screen, the arrows would be a lie and this layout does not apply.