Product Imagery: UI principle for coding agents

On a commerce surface the image is the argument. It is the first thing scanned, it carries most of the quality judgement, and it decides whether a visitor imagines owning the thing. images.md covers whether a photo is technically good: resolution, contrast, intended size. This doc covers which photo to show, in what order, from what angle.

Every rule below has a condition. Applied without it, most of them reverse.

Order: Isolated First, In Use Second

Buying happens in two passes, and each wants a different photo.

While choosing between products, show the item alone on a plain ground. Nothing competes with it and it is easy to compare against its neighbors, so this is the catalog thumbnail and the first frame on the detail page.
Once the visitor is on one product, show it in use. A realistic setting is what lets them picture owning it, so this is where the decision closes.
Shipping only one of the two costs conversions at whichever stage is missing.

People: Imply Rather Than Include

A person in the frame competes with the product for attention, and the item can start to read as theirs rather than the visitor's.

Show a person when the body is the product's fit: apparel, jewelry, eyewear, anything worn or applied. Otherwise imply presence instead of including it.

Leave a trace: a used surface, sliced fruit beside the blender, a slightly crumpled cushion.
Catch a motion: a chair mid-swing, liquid still moving, a lid just lifted.
Crop the person: hands only, a shoulder, a reflection.
Show a hand touching the product. A visitor reads a visible hand as their own and it raises the sense of ownership.

Two exceptions that run the other way. A service provider can be shown in full, because they are not a stand-in for the buyer. An indulgent product can be shown in use by others, because seeing other people enjoy it supplies permission.

For a resold or secondhand item, remove the previous owner entirely. Traces of them lower the value rather than raising it.

Contextual Shots Carry More Weight for Some Buyers

Buyers who process detail closely respond to a richer scene; buyers scanning for the gist do not, and can find the extra content noisy.

Default to including a contextual shot in the set. It rarely hurts and it materially helps the detail-oriented half of the audience.
Where the audience is known to skim, lead with the plain-ground shot and place the scene second.
More context has an additive effect, so a fuller scene beats a token background where it applies.

Angle Sets Who Holds the Power

Shooting from below makes a subject loom; shooting from above makes it manageable. Match that to whichever the buyer wants.

Shoot from slightly below when the product should read as:

Effective or powerful
High status or luxury
Authoritative, including a person positioned as an expert

Shoot from slightly above when the product should read as:

Easy to operate or assemble
Light, small, or portable
Gentle, soft, or natural

Keep the angle inside a plausible viewpoint. Most objects are seen from slightly above in life, so an extreme low angle reads as a trick.

Saturation Sets Intensity

More saturated reads as stronger, more potent, more effective. Desaturated reads as gentler and more natural.

Raise saturation for products sold on strength: cleaners, tools, performance claims, and for any deadline or scarcity element that should feel imminent.
Lower saturation for products sold on gentleness or environmental care, and for anything a buyer would rather not be seen holding, since a loud color implies being looked at.
Saturation applies to the background too, not only the product. A muted item on a saturated ground still reads as more potent.

Saturation and Zoom Also Encode Time

People picture near events vividly and distant ones faintly. Images that match the timing feel right, and the visitor credits the product.

For anything imminent, buy it today, expiring soon, in stock, in the next hour: full color, zoomed in, concrete detail.
For anything distant, a preorder, a launch next month, an event next season: reduced color, pulled back, the outcome rather than the mechanics.
Luxury benefits from the distant treatment. Restraint and space read as unattainable in a way that flatters the item.

Show the Inside for Functional Products

An exploded or layered view raises the expected performance of anything sold on how it works.

Separate the layers visibly. The visitor mentally assembles them, and that act is where the confidence comes from, so components stacked flush do not produce it.
Use it only where performance is the pitch. It adds nothing to a product bought on looks.

Substitute for Touch

A visitor cannot handle the product, so the image has to stand in.

Zoom close enough to read texture, weave, grain, or finish.
Point any handle or grip toward the right, matching the majority hand.
Suggest three dimensions: rotate, tilt, or let the product cast real depth. This matters most for digital goods, whose value is hardest to feel.
Place a familiar small object beside a flat item to give it a graspable neighbor.
Reproduce the check a buyer would make in person. Fluff the cushion, flex the sole, snap the produce, flip the pack over. Pick the one assessment that decides the purchase and show that.

Shape and Finish Carry Personality

Round forms read as warm and friendly; tall, narrow, angular forms read as precise and competent.

Pair a rounded product, package, or image corner with an emotional benefit.
Pair a slim or angular one with a functional, rational benefit.
A mismatch is not fatal, but the aligned pairing consistently reads as more coherent.

Real Over Stylized for Sensory Products

Anything bought for how it tastes, smells, or feels should be photographed literally. An abstract or illustrated treatment lowers the appetite it needs to create.

Show the food, not a graphic of the food, and let packaging reveal the contents where the product survives being seen.
For a product bought to reach an outcome rather than to enjoy the process, show the outcome instead. Sell the finished result, not the effort.
Include the source of a scent or flavor in the frame, and prefer the form that carries it most strongly: cut fruit over whole, ground spice over stick.

Order Bundles by Strength

In a set shown together, the item nearest the start of the reading direction is evaluated first and colors the rest.

Lead with the strongest item. A weak opener produces a flat first impression that the remaining items inherit. This matters most in pairs and in variety sets, where nothing directs the eye to a particular member.

Product Imagery