Show the Product

Ask a model for a landing page without screenshots and it tends to reach for what it can draw without knowing the product: a blurred gradient, some glassy rounded shapes, maybe an illustration of two people at a laptop. In our evals, most pages had almost no picture of the product at all. The visitor had to take the headline's word for it.

Fill the hero and feature images with the product doing its job, its real screen, its output, its code or the thing itself, because people study pictures that carry information and skip the ones that only decorate.

RotaShrinkwrapHoldfast

RotaShrinkwrapHoldfast

Rota

Shift schedules for restaurants, with the gaps flagged before service.

Rota builds the week from who's free, and staff swap shifts without texting you.

ShapesIllustrationThe product

ShapesIllustrationThe product

What the picture tells you

Nothing about the product. Swap the colors and it fits any app in the category.

Could it sit on a competitor's page?

Yes, unchanged.

Pick a product, then switch the picture. Shapes and the illustration fit all three products, and every one of their competitors. Only the product picture tells you anything you didn't already read in the headline.

What people look at

Nielsen Norman Group's eye-tracking found two kinds of picture. People look closely at images that carry information about the task in front of them, and ignore "big feel-good images that are purely decorative". On one team page, a user spent 10% more time on the staff portraits than on the bios next to them, though the bios took up 316% more space.

The same research has a warning. On a shop's TV listings, each product photo showed a different scene on the screen: a canoe, a football player. People barely looked at them, because the pictures didn't help them choose. An image carries information only when it shows what makes this product different from the next one. A gradient, a glass blob or a stock team scene could sit on any page in the category, so it says nothing about this one.

These findings come from usability studies, not from conversion tests, and they're about attention. They fit what practitioners report: Julian Shapiro's landing page guide tells software companies to "avoid useless abstract imagery" and show the product in action, since seeing what you're signing up for lowers the risk of trying it.

Drawn counts

You don't need a screenshot to show a product. When there isn't one yet, as when an agent builds a page from a brief, draw it in HTML, CSS or SVG:

• An app: its main screen in the middle of a task, with data that looks like a real customer's (real content), not placeholder bars.
• A developer tool: the command and what it prints, or the few lines of code it takes.
• A physical thing: its outline at true proportions, with the part that makes it different called out.

A drawn product stays sharp at every size, follows the page's theme in light and dark, and weighs a few kilobytes instead of a large hero image (image loading). Draw the product, not shapes about it.

Pick the moment and the size

A screenshot of an empty dashboard is still a picture of nothing. Show the moment the product earns its place: the gap flagged before Saturday's service, the 86% saving printed after the command, the lock folded down to 18 cm. That moment should prove the headline's claim (message first).

Make it big enough to read at desktop size. On a phone, crop to the part that matters rather than shrinking the whole screen until the text is a texture. Decoration still has a job: a field of the brand color, a texture from the subject's world, the signature move from the direction. It sets the tone around the product. It doesn't stand in for it.