How to Make Product UI Readable in a Vertical Demo Video

A desktop interface does not become a useful vertical demo simply because it fits inside a tall frame. The whole application may be visible, but its labels become tiny and the important action disappears into a miniature workspace. The video is technically vertical while the explanation still assumes a desktop-sized audience.

A better vertical product demo establishes the workspace, brings the relevant control into a readable region, then shows the result. For a desktop product, use a neutral frame around the crop rather than a phone mockup that implies a native mobile interface.

Start with the action, not the aspect ratio

Identify the smallest complete task the viewer should follow. For a review tool, that might be locating a phrase, adding a comment, and seeing the correction. For a scheduling tool, it might be selecting participants and confirming a time. The task determines which region of the interface needs space.

Look at the actual recording and mark the controls that carry the explanation. A sidebar may be useful for orientation but irrelevant during the decisive action. A confirmation message may need more space than the navigation that led to it. Giving every region equal prominence is rarely helpful in a narrow frame.

Write down what the viewer must recognize at the start and what they must inspect at the end. These may be different areas of the screen. That is a reason to plan a sequence of crops, not to squeeze the entire desktop into one unchanging box.

Keep the central promise narrow. A vertical film that tries to show the dashboard, settings, collaboration, reporting, and billing will spend most of its time moving between places. One connected workflow gives the audience a better chance of understanding what the product does.

Calculate vertical video dimensions before choosing a crop

Suppose a 1440-logical-pixel-wide desktop view is displayed at 360 pixels wide. The scale is one quarter. A 16-pixel interface label becomes roughly four pixels high in nominal display terms. A higher-resolution capture preserves more source detail, but it does not make that label occupy more of the viewer’s screen.

This is why increasing export resolution is not a complete answer. A very sharp miniature interface can still be unreadable. The composition must allocate more space to the relevant region, usually by cropping, zooming, or simplifying the editorial material around it.

Use logical sizes when calculating from a high-density screenshot. A two-times capture may contain 2880 physical pixels for a 1440-pixel interface. Treating all those pixels as additional layout width would produce the wrong conclusion about how much content can be shown legibly.

Test the actual result at the expected phone width. The arithmetic identifies risk; the viewing test reveals how the font, compression, contrast, and surrounding information behave together. Do not review a vertical film only in a large desktop player.

Check which relationship the vertical crop breaks

The source comment gives the crop two jobs: preserve the selected phrase and preserve the correction beside it. Showing only the comment produces large readable words, but removes the object those words refer to. Showing the full desktop page preserves location while making both pieces too small. The useful middle is a task region containing the target, the selection, and the instruction.

Try that region in the vertical composition before animating it. Put the essential target and instruction inside the same settled view where possible. When their combined width exceeds the available space, use a short sequence: locate the target, move or cut to the instruction while retaining a recognizable edge, then return to the changed result. Do not squeeze the interface horizontally to make the two fit; its distorted type will distract from the task.

The paired crop below makes the tradeoff visible in the actual capture. The comment-only crop has fewer pixels to read but no selected word. The connected crop restores that anchor. Choose between them by asking what the preceding shot has already established. If the target was clearly identified a moment ago, a comment close-up can work; as an opening shot, it leaves the viewer to guess.

Establish context before moving closer

A brief orientation view can show the project, document, or workspace. It tells the audience where the action lives. That view does not need to make every sidebar label readable if those labels are not part of the explanation.

Then move to the region that matters. In a comment workflow, keep the target phrase and the comment together if possible. If the crop shows only a floating text box with no target, the viewer may understand the words but not their relationship to the design.

Retain a recognizable anchor across the transition. A document title, selected item, or distinctive layout element can help the closer view feel like the same place. Without an anchor, a crop change can look like a new screen rather than a closer view of the current one.

Avoid a long exploratory pan through the application. The viewer should not have to accompany the editor while searching for the control. Plan the destination, move there deliberately, and give the audience time to inspect it.

Choose crops by meaning rather than center position

The center of a desktop screenshot is not necessarily the center of the task. A menu may open near the edge. A result may appear in a side panel. Automatically centering every shot can exclude the exact information the film is supposed to demonstrate.

For each scene, define a required region containing the action and enough context to explain it. Then fit that region into the vertical composition. If it is too wide, consider a sequence of two views rather than shrinking everything until it becomes unreadable.

A crop should not hide a condition that changes the meaning of the result. If a selected filter, plan restriction, or warning is essential to understanding the behavior, preserve it or explain it clearly. Editorial simplification should reduce clutter, not remove material qualifications.

Keep pointer movement inside the story

A pointer can help show where an action occurs, but it can also become a distraction. If the crop changes while the pointer is travelling, the viewer may lose both the cursor and the target. Coordinate the camera move with the action instead of treating them as independent effects.

Let the view settle before a decisive click when possible. Keep enough space around the target to show its label and resulting state. A pointer enlarged until it covers the control defeats its own purpose.

Use the actual recorded interaction when the click is evidence. A decorative cursor added over still screenshots should not imply an unverified product behavior. If the sequence compares states rather than demonstrates a continuous operation, use a clear editorial transition instead of fabricating a click path.

Check hover states and menus in the cropped recording. A tooltip can cover the label just as the viewer tries to read it. A menu can extend outside the planned frame. These details are easy to miss when the original recording is reviewed at full desktop width.

Plan for platform overlays with current guidance

TikTok’s in-feed specifications recommend a vertical format and provide safe-zone guidance that varies with factors such as dimensions, caption length, and additional formats. The practical implication is to check the destination you are actually using. One fixed set of top and bottom margins is not a universal solution for every placement.

Keep essential product labels and editorial text away from areas likely to be covered by controls or captions. Use the platform’s current preview and guidance when preparing a delivery. A clean editing canvas does not show everything that will surround the video after publication.

Use the placement-specific safe-zone files provided with the specifications. Choose the correct layout direction and any relevant anchor variant. Preview the final composition with the actual caption length and platform controls visible.

If the same film will appear in several destinations, keep separate layout versions where necessary. A single export may be convenient, but convenience should not force the important control underneath a platform overlay. Preserve the source project so these adaptations remain practical.

Check the crop with a real comment

The client screenshot in this guide contains a selected word and a comment requesting a specific replacement. The wide crop makes their relationship visible, but its comment text receives less room. A closer view can prioritize the instruction after the target has been established.

That suggests a two-step edit: first show where the comment belongs, then hold the instruction at a larger scale. Do not require one narrow frame to establish the whole document and make every word of the comment readable simultaneously. If the crop removes the selected word, preserve the connection through the preceding shot rather than inventing a new mobile layout.

Use the vertical space for explanation, not filler

A tall canvas can support a concise task label above a cropped interface and a short result below it. It does not need to be filled from edge to edge. Empty space can help separate the product evidence from the explanation, provided the important elements remain large enough.

Avoid adding decorative cards merely because the canvas feels empty. Each extra object competes with the screen. If the product crop is already dense, a restrained background and one clear line of text may be enough.

Do not stack several long captions around a tiny interface. That layout turns the video into a reading exercise while leaving the actual product hard to inspect. If the explanation requires a paragraph, consider a longer tutorial or an accompanying article rather than forcing the paragraph into the frame.

Use consistent alignment between scenes. The interface can move when the task requires it, but stable title and caption positions help the audience know where to look for explanation. Changing every element’s position in every shot creates unnecessary search work.

Distinguish reframing from a mobile-product claim

Keep the desktop interface’s own proportions when reframing. Narrowing a text column can alter line breaks; scaling individual controls independently can make the capture look like a different layout. Crop the original as one image, then arrange editorial text around it.

If you are showing an actual mobile version, capture that version directly. Do not approximate it by hiding the desktop sidebar and rearranging a screenshot. A mockup may be useful during design, but it should be identified as a concept rather than shown as a live product demonstration.

The same caution applies to touch gestures. A tap animation can imply touch support, and a swipe can imply navigation behavior. Use them when the product and captured experience support them. Otherwise, a straightforward crop and pointer can be more accurate.

Use the surrounding canvas for a task label, border, and result statement. Let those elements carry the adaptation while the captured interface retains its original relationships.

Build a short sequence around one verified example

For a review workflow, begin with the document and the phrase needing attention. Move closer to the phrase and its attached comment. Hold the comment long enough to read the requested correction, then show the verified updated state. End on the result rather than immediately cutting away to a logo.

The orientation shot can be brief because it establishes location rather than detailed instructions. The comment shot may need longer because it contains language. The result shot needs enough time for the viewer to connect the correction with the earlier request.

Use exact approved copy for the editorial labels. “Find the issue,” “Leave a specific comment,” and “Check the revision” describe different stages. Do not imply that a comment automatically performs a revision unless that is what the real demonstrated workflow does.

If the footage does not include the completed state, stop the story at the comment or capture the missing result. A polished ending cannot compensate for absent evidence. The sequence should be complete relative to its promise, even if that promise is small.

Adapt the source project instead of stretching the export

Changing the dimensions of a finished landscape MP4 usually leaves you with a choice between tiny content and a blind crop. An editable source gives you more control: you can reposition the recording, revise the text region, and adjust timing around the new framing.

Keep product evidence and editorial text as separate elements when possible. This lets you make the explanation readable without altering the interface pixels. It also helps when a different destination needs shorter copy or a different safe region.

In an OpenDesign Motion workflow, specify the intended vertical output and identify the important regions of the supplied assets. Describe the task sequence and request an actual rendered file as well as the editable project. Then inspect the vertical export; do not assume a successful landscape version proves the adaptation works.

Review each crop at the beginning and end of its movement. An interface can be correctly positioned in the middle of a shot but clipped during the transition. Check menus, shadows, captions, and the pointer, not just the main panel.

Before rendering the vertical version, check these three boundaries:

• The crop includes the control and the result it is meant to explain.
• Essential labels remain outside the destination’s actual overlay areas.
• The presentation still reads as a desktop demonstration when that is what was captured.

Test comprehension at the destination size

Show the exported film at a realistic phone width and ask someone what action occurred. If they can describe the benefit but cannot identify the control or result, decide whether the film is functioning as a promo rather than a demo. Either format can be useful, but the promise should match the evidence.

Ask what they had to pause to read. An occasional pause for secondary detail may be acceptable; needing to pause for the central action suggests the framing or timing needs work. Do not tell the viewer where to look before the test, because that supplies help the published film will not have.

YouTube’s Shorts guidance recommends a vertical composition for mobile viewing. Use the final player size when deciding whether the key label is readable; the aspect ratio alone tells you little about that.

Before delivery, inspect the first frame, every crop change, the decisive action, and the final result. Confirm that labels remain legible, overlays do not cover them, and the output has the intended dimensions. A strong vertical product demo makes a narrow canvas feel purposeful because it shows less at once and explains each part clearly.