How to present product screenshots

A screenshot is the most honest picture of your product. It is also, very often, the most boring one. A full-window grab with a grey toolbar, three open tabs and a tiny cursor does not sell anything. It just proves the thing exists.

Presenting screenshots well is a small craft. Pick the right screen. Clean it up. Crop with intent. Give it a frame and some room to breathe. Then put it where people will actually look.

This guide covers each of those steps. It works whether you are building a landing page, a pitch deck, an app store listing or a launch post.

Start with the moment, not the screen

Before you open a capture tool, decide what the image needs to say. One sentence is enough:

• “You can see all your invoices in one place.”
• “Booking a slot takes one tap.”
• “The dashboard shows today’s orders at a glance.”

Now find the screen that shows that moment. Not the settings page. Not the empty state. The screen where the promise is visibly true.

A good test: if you covered the caption, would someone still guess what the screenshot is about? If not, you have the wrong screen or the wrong crop.

Stage the data

Real products are messy. Test accounts are worse. “asdf asdf”, “Test User 3” and a balance of ₹0.00 make a product look unfinished, even when it isn’t.

Spend ten minutes staging the screen before you capture it:

• Use believable names and numbers. For example, an invoicing app might show five clients with different names, a mix of paid and pending invoices, and amounts that aren’t all round.
• Fill the screen, but don’t stuff it. Three to seven items in a list usually reads as “lively”. Forty reads as noise.
• Remove anything private. Real email addresses, phone numbers and customer names should never appear. Invent them.
• Hide the debris. Close notification badges, dev banners, cookie bars and half-finished features.
• Pick a sensible time and date. A clock showing 3:07 a.m. tells a story you didn’t mean to tell.

Staged does not mean fake. The screen should show what the product really does, just on a good day.

Capture at high resolution

Blurry screenshots ruin good layouts. Capture larger than you think you need, then scale down. Scaling down keeps edges crisp. Scaling up never does.

A few habits help:

• On desktop, capture on a high-density display if you can, or zoom the browser in before capturing.
• On mobile, use the device’s own screenshot function rather than a screen recording frame.
• Save as PNG for interfaces. JPEG compression smudges text and thin lines.
• Keep the originals. You will want to re-crop later.

Crop with intent

Most screenshots improve the moment you crop them. The full window shows everything. A crop shows the point.

Three useful crops

Crop	What it shows	Good for
Full screen	The whole product, in context	Hero images, app store listings
Focus crop	One panel or section	Feature sections, deck slides
Detail crop	A single button, card or chart	Social posts, tooltips, changelogs

A landing page often uses all three. The hero shows the full screen. Each feature block below uses a focus crop. A launch post might use a single detail crop that’s big enough to read on a phone.

Cropping rules of thumb

• Crop to a clean edge. Cutting halfway through a button looks accidental.
• Leave a little interface around the subject so people know where they are.
• Keep text readable at the final display size. If you have to squint, crop tighter.
• Match the aspect ratio to where it’s going. A wide crop in a tall phone layout wastes space.

Choose a frame

A frame is the container around the screenshot. It tells the viewer what kind of product this is, at a glance.

No frame. A clean screenshot with a subtle shadow and rounded corners. Calm and modern. Works well for web apps on light pages.

Browser frame. A simplified window with a few dots and an address bar. Says “this is a website or web app”. Keep it minimal. A realistic browser with bookmarks and extensions drags attention away.

Device frame. A phone, tablet or laptop around the screen. Says “this runs here”. Essential for mobile apps, useful for showing that a web product also works on a phone. For a deck, ready-made laptop slide templates give a web product its device frame without building one by hand.

Scene. The device placed in a setting, like a desk, a hand or a café table. Adds mood and context. Best for hero images and social posts, where atmosphere matters more than detail.

Pick one frame style per surface and stick to it. A landing page with a flat screenshot, then a 3D phone, then a browser window, then a photo scene feels like four different products.

Give it room

Screenshots need space around them, just like headlines do. Crowded screenshots look cheap.

• Background. Use a soft solid colour or a gentle gradient taken from your brand palette. Avoid busy patterns behind busy interfaces.
• Padding. Leave clear margin on every side. If the frame touches the edge of the canvas, it feels cramped.
• Shadow. A soft, low-contrast shadow lifts the screenshot off the page. A hard black shadow looks dated.
• Angle. A slight tilt or perspective can add energy to a hero. Keep it subtle, and keep feature screenshots flat so people can read them.

Add just enough annotation

Sometimes the screenshot needs a nudge. Annotations point the eye.

Good annotations are few and quiet:

• one highlight ring or soft spotlight on the feature that matters
• a short label, three to five words, beside the thing it describes
• a gentle arrow only if the highlight isn’t clear on its own

Skip the red circles, giant arrows and stacked callouts. If a screenshot needs four labels to make sense, it probably needs a tighter crop or a different screen.

Match the surface

The same screenshot behaves differently in each place it appears.

Landing pages

Lead with one strong hero image. Below it, pair each feature headline with a focus crop. Keep frames and backgrounds consistent all the way down the page. Make sure images still read on a phone, where they shrink to the width of a thumb.

Slide decks

Slides are viewed from a distance. Use bigger crops, fewer details and one screenshot per slide. Put the point of the screenshot in the slide title. If you’re presenting an app to investors, there’s more on this in how to present app screenshots in a pitch deck.

Social posts

Feeds are small and fast. Choose a single detail crop or a bold device scene. Make the subject large in the frame. Think in aspect ratios like square, portrait and tall vertical, and see mockup sizes for social posts for how to plan for each.

App store listings

Each image usually gets a short headline above or below the screen. Order them like a story: the main promise first, then the features that support it.

Docs and help pages

Here, clarity wins over style. Use flat, unframed screenshots at a readable size, with one annotation per image. Update them when the interface changes.

Keep a screenshot kit

Once you’ve done this once, save the setup so you don’t have to do it again.

A simple kit includes:

1. A staged demo account with good sample data, kept separate from real users.
2. A list of hero screens, each with the one-line message it supports.
3. Your crops, saved at a few standard aspect ratios.
4. Two or three backgrounds from your brand colours.
5. One frame style for web and one for mobile.
6. A naming pattern, such as feature-crop-ratio-date.png, so you can find things later.

When the product changes, you update the demo account and recapture. Everything else stays the same.

A quick checklist before you publish

• Does the screenshot show one clear moment?
• Is all the data believable and none of it private?
• Is the text sharp and readable at the final size?
• Is the crop clean, with no half-cut elements?
• Does the frame match the rest of the page or deck?
• Is there enough space around it?
• Is there at most one annotation doing real work?

Seven yeses and you’re ready.

Let the product be the hero

The best screenshot presentations are almost invisible. Nobody notices the padding or the shadow. They just notice the product, and they understand it.

That’s the idea behind Mockups too: drop in a clean screenshot, choose a device or scene, and let the frame do the quiet work around it. When the mockups are ready, presentations.ai is one way to build the deck around them.