Overview
A mockup can only be as clear as the media you put inside it. Before opening the editor, spend a few minutes preparing the screenshot or video. This usually saves more time than trying to fix a blurry, cropped, or overly busy source asset later.
Use the right shape
Match the source media to the device where possible. Phone screens work best with vertical app screenshots or recordings. Laptop scenes work best with 16:9 or wide browser captures. If the aspect ratio is far away from the scene, the product may need cropping or empty space.
Capture at a useful resolution
Export screenshots at the highest practical size from your design tool, browser, simulator, or device. Small source files can look soft once they are placed into a 3D scene and recorded again. For videos, avoid sending already-compressed files through multiple editing passes before the mockup step.
Protect important content
Leave safe margins around key text and buttons. Status bars, browser chrome, cookie banners, and debug panels can make a product look unfinished. Remove private customer data, test emails, API keys, internal notes, and anything you would not want in a public launch asset.
Keep text readable
If the UI contains tiny dashboard labels or table columns, use a laptop or screen-only mockup instead of a phone. For mobile apps, pick one screen that communicates the idea quickly rather than showing every setting. Strong visual hierarchy in the source media matters more than elaborate animation.
Trim videos before upload
Short recordings are easier to preview and export. Keep the action focused: one feature, one result, one journey. If the video starts with a blank loading state or ends with a cursor wandering around, trim it before using the mockup.
Practical tips
Record at a steady frame rate when possible. Use real-looking but non-sensitive sample data. Check the source media at 100 percent zoom before uploading.
Common mistakes
Uploading screenshots with browser extensions or debug UI visible. Using heavy compression before the mockup is created. Trying to show a long product tour in one tiny device screen.
Conclusion
Prepare Screenshots and Videos for Device Mockups is easier when the product remains readable and each choice has a purpose. Open the editor, test a small export, and use the result to decide what needs refinement before publishing.