SynthMock
A hero image usually shares the page with a headline and an action. Compose the device around those neighbors early; a beautiful centered render may leave nowhere useful for the page to speak.
Try it in SynthMock
Start with a Duo scene.
Use a reusable template as your starting point, then apply the choices in this article.
Open and edit templates for free. A paid plan is required to export photos or videos.
Design the empty area with a purpose
A proposed desktop layout can place an open Duo on the right and reserve the left for a short product statement. The empty region is not spare space to fill with extra decoration. It protects the hierarchy between the product image, headline and action.
Choose the actual headline length before approving the render. A two-word label and a three-line explanation require different breathing room. Put page copy in the webpage or slide when possible so it remains editable and accessible; the mockup can provide the visual setting without baking every message into the image itself.
Prepare placements, not one universal crop
Use a simple layout sheet to describe how the same scene should adapt. The examples below are proposed compositions rather than automatic behavior supplied by SynthMock.
| Placement | Device arrangement | Copy arrangement |
|---|---|---|
| Wide desktop hero | Device to one side, full silhouette visible | Text in the opposite quiet region |
| Narrow mobile section | Device centered below the headline | Text outside the image |
| Presentation title slide | Smaller supporting device with a readable screen cue | Larger title above or alongside |
Do not buy space with an unreadable app
Moving the device away from the headline can reduce its apparent screen size. If the app becomes an indistinct purple rectangle, the image no longer supports the promise beside it. Simplify the source state or use a less oblique view before making the phone smaller again.
Check both the device's frame and its reflections near the copy area. A bright highlight close to a headline can compete with the text even when the hardware does not overlap it. Review the finished page at desktop and mobile widths, including the actual background behind the image. Keep the scene's finish and lighting stable across alternate crops, but allow separate framing where the aspect ratios demand it. A coherent family is more useful than a single image forced into every space.
Final pass
Before you call it finished
- Place the actual headline beside the rough render.
- Make a distinct mobile composition when the desktop crop fails.
- Preserve a recognizable interface cue while reserving copy space.
Make the next version yours.
Explore Duo templates ↗