Quick answer: A raw screenshot is a receipt. It shows the product exists, and nothing else. People scrolling past can't tell what's important, what's new, or what they're supposed to look at.

The screenshots that actually get clicks have been framed. Here's the practical process, no design degree required.

Rule one: one point per image

The screenshot answers one question. What is this screen for? If the answer is "the dashboard, the editor, and the billing," it's three screenshots.

The failure mode is the full-window capture where everything is visible and nothing is highlighted. Pick the point the image exists to make, and remove or dim everything that doesn't serve it.

Rule two: give the eye a place to land

Three tools do 90% of the work:

  • A zoom or crop. Crop the screen to the area that matters, and crop tighter than feels comfortable. Product shots need to be legible at phone width, so the region that carries the point should fill most of the frame.
  • An annotation. A single arrow, a bracket, or a highlight ring on the element that matters. One annotation, not six. The reader's eye goes to the arrow within a second; use that.
  • A header line. One sentence above or below the screen saying what they're looking at, e.g. "The export is a real PowerPoint file, not a picture." The annotation shows it; the header says it.

Together those turn a UI into an argument.

Rule three: put it in a frame or a real context

A bare browser window floating on white is the default everyone uses, and it looks like a default. Two upgrades:

  • A device frame for mobile screenshots, or a browser frame for web apps.
  • A context image for the problem: the old spreadsheet, the email thread, the manual export, next to the new screen.

A before-and-after panel is a complete social card by itself. A tool with a screen and a sentence is a product. The same screen next to the painful old way is a story.

Rule four: protect the resolution

Export at 2x the display size where possible. Platforms compress, and a screenshot that was fine at 1200 px wide looks mushy after upload. The export targets per platform are in the social media image sizes table: 1200 × 675 for X, 1080 × 1350 for Instagram, 1200 × 627 for LinkedIn, 1270 × 760 for the Product Hunt gallery.

Browsers export high-resolution PNGs at 2x device scale; use that rather than an external screenshot of a zoomed screen.

Rule five: clean the state before the capture

Fake data that looks fake is a tell. But a real account named "john.doe@example.com" with empty tables is worse. Before the capture:

  • Fill the screen with realistic, plausible content: believable names, real-length sentences, credible numbers.
  • Hide other people's data and any personal account information.
  • Use the product's actual color palette; a themed set of six screenshots should look like one product.
  • Switch the demo to light or dark mode deliberately, not by accident.
  • Turn off the cursor, notifications, and any browser clutter.

The five-image set

For a launch, most products need exactly five shots:

  1. The hero screen in a frame, with the product name and one-line outcome.
  2. The core workflow zoomed in, with one annotation.
  3. The output of the product: the generated deck, the exported file, the finished result.
  4. A comparison or detail that shows the differentiator.
  5. The mobile or edge case if the product has one, to show the surface exists.

Those five cover the gallery and feed every social post in the launch week. The sequence is deliberate: hero first, proof second, result third, which matches the Product Hunt checklist gallery ordering.

What to avoid

Mockup templates with the screen at 10% of the frame. A laptop on a desk in a cafe hides the product. The screen should fill the image.

Giant logos. The logo is already in the header and on the platform. Use the space for the product.

Red arrows on five elements. With five arrows, there's no arrow. Choose one.

Browser extensions and bookmark bars. A toolbar full of unrelated extensions is a small but real credibility cost.

Dark screenshots on dark backgrounds. The UI merges into the card. Frame it or invert it.

Frequently asked questions

Can I use a screenshot tool or does it need design software? Either. A screenshot tool with crop and annotation handles 80% of this. The frame and header line can be added in a simple editor.

Should I use real customer data? Only with permission. Demo data is fine as long as it's believable and clearly ordinary.

Do screenshots or GIFs perform better on Product Hunt? The gallery is the reliable asset; around half of Product of the Day winners use an animated thumbnail, but the static set comes first. Build the five images, then consider a GIF.

How many annotations can I add? One primary arrow or highlight. If a second region needs explaining, that's a second screenshot.

What if the product is a CLI or an API? Screenshot the output, the config, or the generated artifact in a terminal or editor with a monospaced typeface. Developer audiences read terminals the same way consumers read dashboards; the framing rule still applies.

Open your product, take the first screenshot, and crop it until one thing is the obvious subject. The rest of the set follows from that.