The same screenshot has to work as a website hero, a social card and an ad. Each placement has its own rules — the mockup is what holds them together.

The landing-page hero

One device, your real UI, next to one benefit-led headline. The mockup does a specific job here: it proves the product exists and looks finished. Two devices maximum — a phone plus a subtle second angle — before the section starts feeling like a stock-photo collage.

Export bigger than the slot (2× for retina) and keep the device silhouette clear of the headline text block on mobile breakpoints.

Social cards and og-images

Link previews render around 1200 × 630 — landscape, small, and often cropped at the edges. Center the device, keep a generous margin, and put nothing you care about in the outer ten percent. A framed device on a brand-colored background outperforms a raw UI screenshot at these sizes, where interface text is unreadable anyway.

Ads: one crop per platform

Feed ads (4:5): the device fills the vertical frame with the caption on top — you are renting attention in a fast scroll. Stories and Reels (9:16): a full-height phone works almost one to one — leave the top and bottom UI-safe zones empty. Landscape (16:9): device on one side, message on the other — never letterbox a portrait shot. Same screen, same scene, different crops: that is the trick that keeps a campaign coherent.

Consistency is the multiplier

Pick one device model, one lighting setup and one background system, and reuse them everywhere. Visitors rarely notice consistency, but they notice its absence. With AppMockr you keep the scene and swap the screens — so your site, store listing and ads all look like they shipped from the same team, because they did.