SynthMock
An open device offers room for context, but extra panels can weaken the message. Plan one place for the eye to begin, one useful supporting area, and a clear relationship between them.
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.
Give the wide view a starting point
Take a proposed reading-list interface. A large selected article preview can anchor the view while a smaller list explains how that article was chosen. If the list, recommendations, statistics and settings all have equal visual weight, the campaign starts describing the application's inventory instead of its value.
The mockup cannot repair that hierarchy after the source is uploaded. A more frontal camera may improve access to detail, but the first design decision belongs in the artwork. Use the same selection state on both screens so opening the device feels like gaining useful context rather than navigating to a different destination.
A proposed two-zone composition
For a concept rough, divide the inner artwork into a primary task and a quieter contextual zone. The allocation below is a starting sketch, not a hardware rule or a requirement for real applications.
| Zone | Suggested role | Visual treatment |
|---|---|---|
| Primary workspace | Selected article, image or task | Largest content element and clearest heading |
| Supporting context | Related items or available tools | Fewer entries, lower visual emphasis |
| Persistent navigation | Orientation within the product | Credible controls without competing decoration |
Edit the content before enlarging the device
When a rough looks crowded, first remove duplicate information. A title repeated in a sidebar, toolbar and card may not need three appearances in a demonstration state. Preserve the real product's behavior; if you simplify a conceptual layout, label the image as a concept rather than suggesting a released feature.
Then inspect the exported composition at its delivery size. Is the selected task identifiable before the caption is read? Does the supporting panel explain something useful? If neither is true, a higher-resolution export only produces a sharper version of the same confusion. A sensible deliverable is a wide hero showing the overall relationship plus a separate detail image for small controls. That keeps the overview calm without pretending every control will remain legible in a thumbnail.
Final pass
Before you call it finished
- Identify one primary task in the open view.
- Keep supporting context quieter than the task.
- Separate an overview from any detail that needs a close crop.
Make the next version yours.
Explore Duo templates ↗