DEV Community

Cover image for After the Hero Image: Designing Product Imagery That Helps People Understand What They’re Buying
WESWOO
WESWOO

Posted on Originally published at weswoo.com

After the Hero Image: Designing Product Imagery That Helps People Understand What They’re Buying

Imagine shopping for a textured cushion. A living-room photograph catches your eye: warm sunlight, a well-chosen sofa, a space that looks comfortable to spend time in.

As you begin choosing, the questions become more specific. Is the fabric finely woven or coarse? How large would the cushion look on a normal two-seater? What happens to its shape when someone leans against it? If the gallery continues with several similar room photographs, the atmosphere remains, but your understanding may not move forward.

That is a useful place to begin designing imagery for a brand’s online store. The opening photograph invites someone closer. The images that follow should keep answering what the object is like and how it might fit into that person’s life.

The original Red Edition presentation brings a brand statement and product scenes into one page. Source: Awwwards, historical 2019 version. It does not establish the current website state. Rights remain with the original owners. Project credit: Numbered / Martin Silvestre / Leo Cheron. Source: https://www.awwwards.com/sites/red-edition

The original Red Edition presentation brings a brand statement and product scenes into one page. Source: Awwwards, historical 2019 version. It does not establish the current website state. Rights remain with the original owners. Project credit: Numbered / Martin Silvestre / Leo Cheron. Awwwards source

A gallery should keep adding understanding

A campaign photograph can convey a way of living and give a product an aesthetic context. The gap often appears when subsequent images keep doing the same job: another wide shot, another model, another setting, without additional product information.

During a review, finish this sentence for each image: “After seeing this, the customer should know…” If the answer repeatedly amounts to “our brand is sophisticated,” the gallery may be staying in the same place.

Emotion and evaluation can reinforce each other. Warm light, restrained props and natural gestures can create a recognizable atmosphere. Visible seams, the relationship between a product and a body, or an object shown holding everyday items can give that atmosphere substance. One image can do both, provided the team is clear about what must remain visible.

For a cushion, a close-up might reveal the weave, a mid-distance sofa photograph might establish scale, and a photograph of someone leaning against it might show its shape under pressure. The photographic language can remain consistent while the images take on different responsibilities.

Red Edition: give brand context and product explanation different jobs

The Red Edition work preserved on Awwwards offers two distinct viewing contexts. An orange page places a large brand statement above furniture scenes, establishing a wider world around the objects. We are discussing the presentation associated with Awwwards’ Site of the Day dated October 9, 2019 and credited to Numbered, rather than describing a newly launched 2026 website. Awwwards project page

In Awwwards’ Cane Chair product-page presentation, attention shifts to several chairs shown together. Differences in their backs, arms and legs are visible, with a short introduction below contributing to the product’s character. The wider brand expression and the individual product explanation have different places. Awwwards product-page presentation

Red Edition’s Cane Chair product-page presentation, from the 2019 version recorded by Awwwards. The project credits Numbered, Martin Silvestre and Leo Cheron. This is the original static preview of the page demonstration, with original branding and text retained. Project credit: Numbered / Martin Silvestre / Leo Cheron. Source: https://www.awwwards.com/inspiration/product-display-page-red-edition

Red Edition’s Cane Chair product-page presentation, from the 2019 version recorded by Awwwards. The project credits Numbered, Martin Silvestre and Leo Cheron. This is the original static preview of the page demonstration, with original branding and text retained. Project credit: Numbered / Martin Silvestre / Leo Cheron. Awwwards source

Our interpretation is that a setting can invite someone to imagine a way of living, while the product view and accompanying words should keep adding understanding. These two preserved views do not supply human-scale references, verified dimensions or evidence of touch. They also establish neither every interaction on the current website nor business performance. Distinguish what a reference explains from what still needs to be supplied.

For your own products, ask what an abstract description such as refined, lightweight or sturdy corresponds to in something a customer can inspect. Some characteristics can be shown in photographs. Others benefit from a short video, while some require specifications, material documentation or stated test conditions. Choose the medium around the question.

Texture, scale and use need different visual evidence

Shopping through a screen removes much of the physical experience of an object. A customer cannot touch it, pick it up, or immediately see its relationship to their body and room. Imagery can restore part of that context, with different kinds of reference for different questions.

  • Material: show how the surface is formed. Weave, leather grain, brushed metal and glass edges can be presented through directional light and clear detail. Preserve the product’s distinguishing features. Excessive smoothing, sharpening or uniform color treatment can obscure the differences the image needs to explain. A photograph suggests texture; it cannot independently establish softness, abrasion resistance or composition.
  • Scale: give dimensions a familiar reference. A hand, a person wearing the item, a tabletop or a furnished setting can help establish size. References should be realistic. Comparative images also need controlled camera distance and angle. Keep accurate measurements available, and include relevant model or fit information when using photographs of people.
  • Use: show a meaningful state. What does the product look like after unpacking? How does a pocket sit when it contains everyday objects? Where does a lamp cast its light? How does a cushion change under pressure? Choose an action connected to a buying decision, giving the customer something to understand beyond the pose.

Baymard’s product-page research, published in 2017, records participants using people and surroundings to interpret product scale. It supports the design rationale for providing a reference; its historical sample percentages should not be presented as current behavior across every store. Research on in-scale imagery

Returning to the cushion: if size is the principal uncertainty, a photograph on a real sofa may address it more directly than another fabric close-up. If two versions differ mainly in their weave, details shot at comparable scale and in similar light become more useful. Priorities depend on the choice the customer is making.

Turn “make it feel premium” into a usable brief

“Make it look more premium” is difficult to use as a photography requirement. A photographer may interpret it as dramatic shadows, a designer as generous negative space, and a merchandising team as visible construction. Each can satisfy their interpretation while the resulting assets still fail to work together on a page.

A more useful brief begins with a specific uncertainty. For example: “The defining feature of this cushion is its textured weave. The yarn structure needs to be visible while the color remains accurate.” That instruction affects the light, camera distance, retouching and final display size. It also provides a way to judge the result.

If the images need to compare two sizes, decide in advance on the same sofa, camera position and arrangement of both products. Two individually attractive photographs may otherwise be difficult to compare on a selection page.

Bring the sample, verified specifications, image task, expected page placement and necessary explanatory text together before the shoot. The process can expose missing inputs early. A genuine usage photograph requires a sample. A performance claim needs supporting evidence; photography should not be asked to provide that evidence by implication.

Sequence images around the decision, without a fixed formula

Someone arriving at a particular product from an advertisement may know different things from someone browsing a collection. The first visitor might already have seen the campaign image and need to confirm the color, size and details. The second may still need a clear view of the whole object.

Start by identifying the most important unanswered question, then arrange the remaining images around it. An unfamiliar product might benefit from an overall view followed by scale, detail and use. A product defined by an unusual construction may need to reveal that construction earlier.

Related products also need to be considered together. A shared viewpoint and comparable product size within the frame can help people identify differences. Completely different creative compositions for each item can make comparison harder. Consistency can serve evaluation, while selected variations serve expression; every image does not need the same freedom.

At this stage, place actual sample images into the page before deciding what else to shoot. Reviewing a wall of photographs encourages the selection of beautiful individual frames. Seeing them alongside the real product name, options and explanation makes unanswered questions more apparent.

The work continues in the live page

A fabric close-up that works in a desktop composition may become an indistinct texture on a phone. A landscape image cropped vertically may lose the relationship between a hand and the product. Uploading an image does not establish that its intended meaning survives.

In Shopify, the theme determines how product images appear, and product pages and listings may use different-sized versions. Video and 3D media require corresponding theme support. Check the capabilities of the actual theme rather than assuming that an accepted file type will display correctly everywhere. Shopify’s product-media documentation

Open the actual page on a phone. Check whether essential details remain in frame, whether a close-up can be examined, whether changing an option shows the corresponding product, and whether explanatory text remains in a useful place. Assets for different colors, dimensions and sets need to match the verified product information; similar composition alone is no reason to interchange them.

Finally, ask someone unfamiliar with the product to describe its approximate size, main material and difference from another version after browsing the page. Their misunderstandings can guide the next revision more effectively than a general compliment about the design. This exercise identifies comprehension problems. Judging purchasing or post-purchase outcomes requires separate observation of real data and feedback.

A hero photograph creates interest. The images that follow can give that interest a firmer basis: a customer can feel the life the brand wants to express while understanding more clearly the object they are considering bringing home.

Top comments (0)