SynthMock
A complete screen can establish credibility while failing to communicate a single feature. Decide what the viewer must recognize, then choose a source state that makes that recognition possible.
Try it in SynthMock
Start with a Duo scene.
Use a reusable template as your starting point, then apply the choices in this article.
A paid plan is required to use templates and export.
Specify the recognition task
Instead of writing show the app in a creative brief, write a concrete sentence: the viewer should recognize a weekly plan, a selected photo, or a comparison between two products. This gives the artwork a purpose without requiring every label to be readable.
For a dense dashboard, the most useful source may be a legitimate focused state rather than the default view with every widget expanded. For a photo product, the main image may communicate the task even when its controls are small. Keep the representation truthful: a mockup should not remove an essential limitation or imply a feature the product does not offer.
One screen, three different reading distances
Inspect a rough in the place it will be used, not only full-screen on a design monitor. These are editorial expectations, not fixed pixel thresholds.
| Placement | What should survive | What can move elsewhere |
|---|---|---|
| Small social card | One feature cue and product identity | Detailed labels in accompanying copy |
| Website hero | Main task and broad interface structure | Secondary tools in a follow-up image |
| Presentation detail | The specific control under discussion | Decorative hardware angles |
Use an overview and a detail when needed
There is no need to force one frame to carry both the overall product and a tiny interaction. A paired deliverable can use an open Duo for context and a carefully framed second image for detail. Keep the source state consistent so the detail feels like an explanation of the overview, not a different screen.
More export pixels do not create information missing from the source. Prepare sharp artwork, then distinguish source clarity from composition scale. If the interface occupies a small part of a very large canvas, a high-resolution file can still look uninformative where it is published. Before finalizing, view the proposed image at normal browser scale and name the feature without zooming. If that requires effort, choose a simpler source state or give the device more room.
Final pass
Before you call it finished
- Write the single recognition task in the brief.
- Review a small preview and the intended final placement.
- Use a separate detail image instead of overloading the hero.
Make the next version yours.
Explore Duo templates ↗