# Product demo videos: show the thing in under a minute [Canonical HTML page](https://gradiently.design/guide/product-demo-video) The best demos don't tour every feature. They show one person getting one job done, fast. Here is a sixty second structure, a script you can adapt and the details that make it look finished. ## The short version - A product demo video works best when it shows one real task from problem to result, rather than a tour of every feature. - Under a minute is enough for a demo on a landing page or social feed; longer walkthroughs belong in help articles. - Show the result in the first few seconds, so viewers know what they will get before you show how. - Captions are essential because product demos are often watched muted, on landing pages and in feeds. - Make a separate vertical cut for social video rather than cropping the widescreen version. A good **product demo video** shows one person doing one real job with your product, from the problem to the finished result, in under a minute. Open on the result, show the three or four steps that get there, and close with a single next action. Use a clean screen, readable text, captions for people watching muted, and a short branded title and end card. Resist the feature tour: viewers remember an outcome, not a menu. ## Pick one task, not every feature Before you open any recording tool, write one sentence: "A [person] uses [product] to [get result] in [short time]." For example: a café owner uses a booking app to fill a cancelled table in two minutes. That sentence is the whole video. Anything that doesn't serve it goes in a different video. ### Feature tour - Starts on the login screen - Visits every tab in order - Explains settings nobody asked about - Ends with "and much more" - Three minutes and climbing ### Task demo - Starts on the finished result - Follows one real job, start to end - Shows only the clicks that matter - Ends with one clear next step - Forty to sixty seconds ## A product demo video structure for 60 seconds This structure suits a landing page, a launch post or a sales email. The timings are a guide; the order is what matters. | Seconds | Beat | What's on screen | | --- | --- | --- | | 0 to 5 | The result | The finished thing: the filled calendar, the sent invoice, the published page | | 5 to 12 | The problem | The messy before, in one shot, with one line of voice or caption | | 12 to 45 | Three or four steps | Only the clicks that move the task forward, pauses trimmed | | 45 to 55 | Back to the result | The outcome again, now that viewers know how it was made | | 55 to 60 | One next step | An end card with a single action and your address | Result, problem, steps, result, action. Showing the outcome first gives viewers a reason to watch the steps. ## Write a demo video script that fits the screen Write the script in two columns: what is said and what is shown. Every line of voice should describe something visible at that moment. If you hear yourself explaining something that isn't on screen, cut the line or change the shot. ```text SAY SHOW Friday, 7pm. A table of six cancels. Calendar with a red gap at 7:30 This used to mean an empty table. Same gap, quiet dining room photo Open the waitlist. Click Waitlist Pick the gap. Tap Offer. Select 7:30, click Offer to waitlist The first guest to accept gets it. Phone notification, Accept tapped Table full again. Two minutes. Calendar, gap filled, timer 1:52 Try it on your own bookings. End card: tablefull.app ``` A two column script for a 45 second demo. Each line is short enough to say while the action happens. Read it aloud with a timer before recording. If it runs long, cut whole steps rather than speeding up your speech. ## Recording a clean demo 1. **Stage realistic demo data** Fill the product with believable names, numbers and images. Empty states and "Test test 123" make a product look unused. 2. **Tidy and enlarge the screen** Hide bookmarks and notifications, close other tabs, and zoom the interface to 125% or more so text survives a phone screen. 3. **Record one step per take** Short takes are easy to redo and trim. Move the pointer slowly and pause briefly after each click. 4. **Record the voice separately if you can** Reading the script over finished footage gives smoother timing than talking while clicking. 5. **Zoom in where it matters** Crop or scale in on the button or field being used, so viewers don't hunt across a full desktop. [Screen recording](https://gradiently.design/guide/screen-recording-tips) covers permissions, audio and what to share in detail. ## Captions, title card and end card Demos on landing pages usually autoplay muted, and feeds start muted too, so the captions carry the story. Keep each caption to a short line that matches the voice, placed where it won't cover the part of the interface you are showing. [Video captions](https://gradiently.design/guide/video-captions-design) covers style and placement. Bookend the demo with two designed frames in your brand: a title card that names the outcome, and an end card with one action. They are what makes a screen capture look like a product video rather than a recording, and they're what people see as the poster frame before they press play. A 16:9 product demo title card reading Fill a cancelled table in 2 minutes, on a branded gradient The title card names the outcome, not the feature. It doubles as the video's poster image on the landing page. A 16:9 end card reading Try it on your own bookings, with the product address underneath, in the same gradient The end card asks for one thing. Two buttons and a social handle split attention three ways. ## One demo, every placement A demo usually has to live in several places: the landing page, a launch post, a sales email and short social video. Make the widescreen cut first, then build a vertical cut for social with the screen recording centred on your background, a headline above and captions below. Cropping a widescreen demo to vertical cuts off half the interface. - Landing page 1920×1080: 1920 × 1080 - Feed 1080×1350: 1080 × 1350 - Reels and Shorts 1080×1920: 1080 × 1920 - LinkedIn 1200×1200: 1200 × 1200 Four homes for the same demo. The widescreen recording sits inside each frame on your background instead of being cropped. On a website, compress the file, give the video a poster image and let visitors start it themselves if it has sound. [Video background website](https://gradiently.design/guide/video-background-website) explains file sizes and formats, and [landing page design](https://gradiently.design/guide/landing-page-design) covers where a demo belongs on the page. For the posts that announce it, see [product launch graphics](https://gradiently.design/guide/launch-day-graphics). ## Making the demo in Gradiently With Pro, you can record the screen and your voice in the browser, review the clips, then trim them on Gradiently's timeline, add captions and music, and design the title and end cards on the same Mark so every frame matches. Make the vertical and square versions from the same design in one step, and the Designer can draft the caption lines and post copy in your brand kit's voice. ## FAQ ### How long should a product demo video be? Under a minute for landing pages and social video. Longer walkthroughs of two to five minutes suit help centres and sales calls, where viewers already intend to learn the product. ### What should a product demo video include? The result up front, the problem in one shot, three or four steps of one real task, the result again and a single next action, with captions throughout. ### Should a demo video have a voiceover? It helps, but write captions as well, because demos on landing pages and in feeds usually play muted. The video should make sense with the sound off. ### What size should a product demo video be? 1920×1080 for websites and YouTube, plus a vertical 1080×1920 version and a 1080×1350 feed version with the recording set on a branded background.