# Show the Product

> Picture the product doing its job.

- Section: Marketing
- URL: https://critly.vercel.app/show-the-product
- Published: 2026-10-14
- Source: https://github.com/kausthubh-coder/critly/blob/main/content/marketing/show-the-product.mdx

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.**

> **Interactive demo: Show The Product.** Open https://critly.vercel.app/show-the-product to try it.

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](https://www.nngroup.com/articles/photos-as-web-content/) 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](https://www.julian.com/guide/growth/landing-pages)
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](https://critly.vercel.app/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](https://critly.vercel.app/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](https://critly.vercel.app/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.

## Resources

- [Photos as web content](https://www.nngroup.com/articles/photos-as-web-content/): Jakob Nielsen's eye-tracking findings. People study images that carry information and ignore the ones that only decorate.
- [Decorative images](https://www.nngroup.com/videos/decorative-images/): A short Nielsen Norman Group video on when a decorative image helps the tone and when it gets in the way.
- [Landing page copywriting](https://www.julian.com/guide/growth/landing-pages): Julian Shapiro on showing the product in action in the hero, and why it lowers the risk of signing up.