Summarize with AI
The best practice for product screenshots on a SaaS website is to crop to one moment and label it. Show a single panel at full size, with the real words on it, and add one line that says what the visitor is looking at. A full dashboard shrunk to fit the hero proves the product exists and explains nothing.
This matters because a stranger decides what kind of company you are in about four seconds, and the screenshot is often the only part of the page that is not a claim. You know every number on that dashboard. The visitor knows none of them, so a picture of all of them reads as noise.
The 1440 pixel dashboard in a 600 pixel slot
Picture an AI contract review tool for in-house legal teams. The founder opens his own workspace, takes a full-screen capture at 1440 pixels wide, drops it into a browser frame with a soft shadow, and tilts it a few degrees in the hero. On the page it renders about 600 pixels wide.
Here is what is in that capture. A left nav with Contracts, Playbooks, Approvals, Reports and Settings. A row of four tiles: Contracts in review 47, Avg. turnaround 2.4d, Flagged clauses 112, Auto-approved 63. Under them, a table of twelve contracts with six columns each: Counterparty, Type, Status, Risk, Owner, Updated. A small bar chart in the corner. Around forty numbers in all.
At 600 pixels, every 14 pixel label becomes a little under 6 pixels tall. Nobody can read it. What a visitor takes away is a grey grid with a blue sidebar, which is also what every other contract tool's hero looks like. The one thing this product does better than anyone, catching a clause that breaks the company's own rules, is in there somewhere. It is one row in the table, unreadable.
Why show the product is only half the advice
Most advice on hero images stops at show the real product instead of an illustration. That is right as far as it goes, and our own guide to SaaS hero section design makes the same call. But a full screenshot is still a kind of abstraction. It shows that software exists. It does not show what the software does for the person looking at it.
This is the point where reasonable people disagree, so here it is plainly: a cropped, labelled panel beats a full dashboard even when the full dashboard is beautiful. The full view answers a question nobody asked, which is how many screens there are. The cropped view answers the one they did ask, which is what happens when they use it.
Founders pick the full view for a reason that makes sense from the inside. Every tile on that dashboard took weeks of work, and cropping feels like hiding most of it. But the visitor does not reward effort they cannot see. They reward the one moment that makes them think, that is the thing I need.
Crop to the moment a buyer would pay for
Go back to the contract tool. Its moment is not the overview. It is the screen a lawyer sees after uploading a counterparty's paper: one agreement open, three clauses highlighted. Limitation of liability, cap set at 1x fees, playbook says 2x. Governing law, Delaware, playbook says New York. Auto-renewal, sixty days' notice, playbook says thirty. Under each row sits one button, Accept playbook wording.
Show that panel at 1:1, about 560 pixels wide, so the text on screen is the same size as the text on the page. Put one label above it in plain words: Flagged: 3 clauses differ from your playbook. Now a general counsel scanning the page reads a sentence that describes her own Tuesday afternoon. The overview could never say that, because it was busy saying forty other things.
To find your moment, ask what a new user sees right before they would tell a colleague about the product. It is usually a result, not a setting. A drafted reply, a flagged risk, a finished report, a cleaned dataset. If the screen you picked has a Settings link as its loudest element, you picked the wrong screen.
One label, written in the product's own voice
A crop without a label still asks the visitor to work out what they are seeing. One short line fixes that. Write it the way the product would say it to a user, not the way marketing would describe it. Flagged: 3 clauses differ from your playbook is a product sentence. Intelligent risk detection is a brochure sentence, and it could sit above any screenshot in the category.
Keep annotation to one label per image, two at most. Arrows, numbered callouts and pulsing hotspots turn a screenshot into a diagram, and a diagram asks the reader to study it. If the image needs five callouts to make sense, the crop is still too wide. Cut further until one line is enough.
Place the label outside the image, in the page's own type, not baked into the PNG. That keeps it readable on a phone, lets search engines and AI assistants read it, and means a copy change does not need a new export.
Real data, real names, and both themes
Placeholder data gives a screenshot away. Counterparty: Acme Corp. Owner: John Doe. A contract value of 12,345. A visitor who has used real software spots it at once and reads the whole product as a mockup. Fill a demo workspace with believable fake data instead: plausible company names, uneven numbers, dates from this year, a few long names that wrap. It should look like a Tuesday, not a template.
Do not use a real customer's data, even blurred. Blurring looks like something is being hidden, and an unblurred real name is a privacy problem you do not want on your homepage.
If your product has light and dark modes, pick the one that matches the section the screenshot sits in, and export both if your site switches themes. A white product panel dropped onto a near-black page looks like a hole cut in it. When we built the Sawdust website, we designed dark and light themes inside one design system and put a playable track catalog straight on the page, so the product appears as itself rather than as a framed picture of itself. The same thinking holds for a screenshot: it should look like it belongs to the page around it.
Keeping screenshots true when the UI ships weekly
An AI product changes fast. The model gets swapped, a panel moves, a button gets renamed. Within two months the hero shows a screen that no longer exists, and the first thing a new signup notices is that the product does not match the website.
Cropping helps here too. A full dashboard goes out of date when anything on it changes. A single panel goes out of date only when that panel changes, and it is usually the most stable part of the product, because it is the part that works. Name a person who owns the website images, and add a line to the release checklist: did this release touch a screen that appears on the site?
If keeping a static image honest becomes a weekly chore, that is a sign to think about video or a live sandbox. Before you build one, read whether your AI product needs an interactive demo, because a demo is a much bigger thing to keep alive than a PNG.
A screenshot audit for this Friday
Open your homepage on a laptop and on your phone, and go through each product image with this list.
- Read every word in the image at its rendered size. If you have to zoom, crop tighter or show a smaller panel at 1:1.
- Name the one moment the image shows in a single sentence. If you need the word and, it shows two moments. Split it or cut one.
- Check that the label above or below it is written in the product's voice and names a result, not a feature category.
- Look for Acme, John Doe, Lorem ipsum, 123 and round numbers. Replace them with believable demo data.
- Remove browser chrome, device frames and tilts that make the text smaller without saying anything.
- Match the theme of the image to the section behind it.
- Export at twice the display size so it stays sharp on high density screens, and compress it so the page still loads fast.
- Compare each image with the live product. If a label or button has changed, retake it today and add the check to your release list.
Then show the page to someone outside the company for five seconds and ask what the product does. If their answer mentions the thing in your screenshot, it is doing its job. If they describe a dashboard, it is not. For teams that would rather hand this to a studio, our ranking of website design agencies for AI legaltech startups is a good place to compare who does this kind of work.
You know what every tile on your dashboard means, which is exactly why the full view feels obvious to you and opaque to everyone else. Studio Maydit is a web and product design studio for AI founders in the US, UK and Europe, and we work on website design that makes the product legible to a stranger: which screen to show, how to crop it, and what one line should sit above it. Most projects run as a fixed scope in three to four weeks. If your hero shows the whole product and a visitor still cannot say what it does, book a 30 minute call.
