How Do You Design a Website With No Product Screenshots?

How do you design a website when you have no product screenshots?

You replace the screenshot's job rather than its shape. A screenshot exists to prove the thing is real and to show what using it feels like. Both of those can be carried by other means: a diagram of the actual workflow, a real artifact the product produces, a short recording of one task, or specific words that only someone who built it could write.

This comes up constantly, and not only with pre-launch companies. Plenty of real products have interfaces that are ugly, confidential, or boring, and a screenshot of a settings table proves nothing to anyone. The absence of a good screenshot is a design problem, not a blocker.

Here is how we would approach the page.

Why does this situation happen so often?

Three reasons, and they call for different answers. The product does not exist yet. The product exists but the interface is not presentable. Or the product exists and looks fine, but the interesting part is invisible, which is true of most infrastructure, data and automation products.

Early-stage companies hit the first case constantly. Supabase's State of Startups 2026, a survey of around 2,000 startup builders, found founder-led sales is still the norm and personal networks were the leading acquisition channel at 56 percent. A company selling through warm introductions has not needed a site that sells on its own, right up until the introductions run out.

The third case is the most underrated. An automation that quietly saves a team six hours a week has nothing worth photographing, and a screenshot of a workflow builder is a picture of a tool, not of an outcome.

What does the research say about which images people look at?

That users are ruthless about this, and have been for as long as anyone has measured it. Jakob Nielsen's eyetracking work at Nielsen Norman Group, first published in 2010 and last reviewed on August 13, 2026, found that some types of pictures are completely ignored while other types are treated as important content and scrutinised.

The dividing line is whether the image carries information the user needs. Nielsen's conclusion is that users pay attention to information-carrying images that serve their tasks and ignore purely decorative images that do not add real content.

One number from that work is worth holding onto. On a category page studied in the research, product photos received only 18 percent of viewing time while text descriptions received 82 percent. On a different page, where the photos carried the detail that mattered, the images were studied intensely. Same medium, opposite behaviour, decided entirely by whether the picture was doing work.

That is liberating if you have no screenshot. A bad screenshot was never going to get looked at anyway.

What can actually stand in for a screenshot?

Four things, roughly in order of how well they work for B2B.

The output. If the product produces a report, an alert, a schedule, an invoice, a dashboard export, show that. The output is what the buyer is actually purchasing, and it is usually more legible than the interface that made it.

The workflow. A clean diagram of the real steps, with the real system names, is enormously convincing to a technical buyer, because a vague diagram is instantly recognisable as a vague diagram. Specificity is the whole effect.

A recording of one task. Thirty seconds, no music, no narration about your mission, just somebody doing the thing. This beats a polished product video in almost every B2B case we have seen.

The artifact of the work. A code snippet, a sample API response, a filled-in template, a real email the system sends. These are small, honest and impossible to fake convincingly, which is exactly why they read as true.

Should you show an idealised or mocked-up interface?

Only if you label it, and usually the answer is no. A mockup of a product that does not exist is a claim about a thing that does not exist, and the gap gets discovered in the demo, which is the worst possible place.

There is a narrower version that is fine. Showing a real screen with sample data, clearly labelled as sample data, is honest and often necessary, because a real customer's records cannot be published. Nobody objects to that.

The line is whether the interface in the image can be reached by a real user today. If it can, dress it up as much as you like. If it cannot, either label it as a concept or leave it out. The reputational cost of being caught is far higher than the conversion cost of an unillustrated page.

How do you design a hero section with no product shot?

Let the words carry it and give the space to something structural rather than decorative. The default move is to reach for an abstract gradient or an illustration of floating shapes, which fills the space and communicates nothing. Nielsen's finding applies exactly here: that is a decorative image and it will be skipped.

What works better is putting the most specific sentence you have where the picture would go. A hero that says what the product does, for whom, and what changes as a result, at a size people cannot miss, outperforms a vague headline next to a stock illustration.

If you want visual interest, take it from typography, from a strong structural layout, or from the output artifact mentioned earlier. We went through the constraints of that space in what actually belongs above the fold.

What does the rest of the page carry instead?

Proof, in the specific sense. Without a screenshot, every other credibility signal has to work harder, so this is where you spend the effort.

Name the integrations by name. Name the stack. Say what the product does not do. Put a real price or a real range. Quote a customer with a full name, company and role, or do not quote them at all. Each of these is checkable, and checkable beats impressive when the visual proof is missing.

Photographs of real people also earn their place here. Nielsen's research found users spent more time on portrait photos than on the biographies beside them, despite the text occupying far more space. If you have no product to show, showing the humans is not a consolation prize. We covered sourcing those well in using real photography on a website.

What if the product is deliberately invisible?

Then design the page around the before and after, not the middle. Infrastructure, security and automation products all share this problem: the best possible experience of them is that nothing happens.

The pattern that works is to make the absence measurable. Show what the week looked like before and what it looks like now. Show the alert that would have fired. Show the manual process as a diagram and then show the same diagram with three steps removed. The removal is the product.

Avoid the abstract network illustration with glowing nodes. Every company in this category uses it, which means it distinguishes nothing and, by Nielsen's dividing line, gets ignored.

When should you stop avoiding it and just ship a screenshot?

As soon as one exists that a real user could reach, even if the design team is unhappy with it. An honest, unglamorous screenshot of a working product outperforms a beautiful page that shows nothing, because it answers the question every buyer is silently asking, which is whether this is real.

The instinct to wait for a redesign is almost always wrong. The interface will never be finished, and a site with no evidence is costing you deals now while the redesign is costing you nothing yet.

If the interface is genuinely embarrassing, crop it. One clean panel of a working screen is enough. You are not shipping a gallery.

What would we do first?

Open your site and count the images that carry information a buyer needs. On most B2B sites with no product shots, the count is zero, and that is the finding. Every image on the page is decoration, which means the page is asking its text to do everything while giving the text a third of the space.

Then pick one of the four substitutes, the output, the workflow, the thirty-second recording, or the artifact, and build one real asset this week. One is enough to change how the page reads. Four is a project you will not finish.

The underlying idea is simple. A screenshot was never the point. Evidence was. Once you see it that way, having no screenshot stops being a constraint on the design and starts being a question about what you can actually prove, which is a better question to be answering anyway. We wrote about the same instinct from the other direction in what to test before a site goes live.

If you are building a site for something that is hard to show, we are happy to walk through it. You can find us at phoenix.studio.