Compose a Duo mockup for a wide website hero

Start with the page layout

Decide whether the page puts text to the left, right or above the image. Leave a quieter area where the headline will sit. The mockup should support the product promise without forcing text over the screen or a bright reflection.

Choose a wide viewport such as 16:9 or 21:9 when that matches the planned page. A wide source does not guarantee a good mobile crop, so make a separate narrow composition if the site will need one.

Place the phone around the copy space

An open inner screen is useful when the interface itself is the proof. A closed cover or partial fold can introduce the device more quietly when the page already explains the product in words.

1. Choose the Fold pose that makes the relevant screen clear.
2. Set the viewport ratio for the hero area.
3. Use Pan X to create copy space, then refine Pan Y and Zoom so the device does not feel pushed against an edge.
4. Keep the background quieter behind the text area and maintain a visible boundary around the phone.
5. Check the final image in a draft of the real page layout before exporting all delivery sizes.

Plan a narrow layout explicitly

A desktop image with generous side space may make the device tiny when squeezed into a narrow column. Avoid solving that solely with an aggressive image crop that cuts off the hinge. Reframe a second still if the page’s mobile layout needs it.

Inspect the downloaded file for the intended headline area, clear app content and clean outer edges. For web delivery, WebP can be useful when its appearance is acceptable; PNG is appropriate when you need transparent compositing. Keep the high-quality original available, and publish an image size appropriate to the page rather than forcing every visitor to download the largest source.