Composition & layout
Make one product idea easy to see through hierarchy, spacing, backgrounds and framing.
The editor separates output size from mockup type and layout. After changing a ratio, review every device, crop and text block. These are design decisions rather than automatic guarantees: a layout that works for a wide hero often needs a simpler arrangement on a portrait canvas.
Give each mockup one clear message
Choose one feature or result for the viewer to notice first.
Read the guide ↗Use negative space around a product mockup
Empty space separates the product from its surroundings and gives copy room to breathe.
Read the guide ↗Choose a background that separates the product
Use contrast between the screenshot, frame and background to make edges readable.
Read the guide ↗How much shadow should a mockup use?
Use enough shadow to separate overlapping layers without making the product look detached from the canvas.
Read the guide ↗Balance mockup rotation with readability
Rotation adds movement, but interface text becomes harder to read as the angle grows.
Read the guide ↗Arrange multiple devices without hiding the feature
Multiple devices work best when each has a clear role in the story.
Read the guide ↗Choose fit or fill for screenshot placement
Fit preserves the whole image within a region; fill emphasizes coverage and may crop edges.
Read the guide ↗Prevent frames and shadows from clipping at the canvas edge
Leave enough room for the entire visible object, including its shadow and rotation.
Read the guide ↗Balance a headline with the screenshot
The headline explains the point while the screenshot supplies evidence.
Read the guide ↗Keep a mockup series visually consistent
Repeat a small set of choices across a series: background family, frame treatment, spacing and headline style.
Read the guide ↗Adapt a landscape mockup to a portrait canvas
A portrait version usually needs a new hierarchy rather than a scaled-down landscape layout.
Read the guide ↗Use a thumbnail test before publishing a mockup
A small preview reveals whether the visual hierarchy survives real viewing conditions.
Read the guide ↗Review a mockup with a simple visual checklist
Review content accuracy, hierarchy and output boundaries separately.
Read the guide ↗