skip to primary navigation skip to content
 

Standard pack layouts

All products may use the following standard layouts, which are shown on the right and described in more detail below.

Whole pack

For some products, product recognisability is best achieved by showing the whole pack, without any zooming or aspect ratio distortion. This is especially valuable when the product is a distinctive shape. It is also useful when the pack shape and aspect ratio help shoppers to compare the relative size of different products in the same range.

Nevertheless, "if done carefully, a small change in the shape of the pack can sometimes be helpful", as noted in the GS1 guideline. In particular, it may sometimes be beneficial to stretch the shorter side of the product image slightly to create more space on the digital pack to communicate the 4Ws . If this is done, then care must be taken to retain product recognisability, and the stretch should not be more than 150%.

When showing the whole pack:

  • The contents of the pack should not be shown outside of, or next to the pack.
  • The image may include a size lozenge in the bottom right-hand corner. Further details on communicating size are provided at the bottom of this page.
  • Manipulating the front of pack is strongly encouraged, in order to amplify the 4Ws and omit unnecessary details.

Showing depth

  • Suppliers are encouraged to give some impression of depth within whole-pack hero images, so that they look more like a real product.
  • For cuboid-shaped products, this can be achieved through a slight camera elevation.
  • For more cylindrical products, this can be achieved through lighting effects.
  • ¾ angle should not be used for standard packs, because it reduces the visual clarity of the front pack graphics. (Note ¾ is encouraged for some multipacks, because it can help to communicate the number of items in the pack.)

Stretch to square

In this layout, the shorter side of the product image is stretched up to 150%, so that the Hero Image fills the maximum available space within the square canvas. This layout should only be used when:

  • The product shape does not play a significant role in brand recognition or differentiation of the product type or size. If it does, then use the Whole pack layout instead.
  • The aspect ratio of the product is close to square (less than 3:2). Otherwise use the Zoom pack layout instead.

When using this layout, manipulating the front of pack is strongly encouraged, in order to amplify the 4Ws and omit unnecessary details. If size information does not exist on the actual front of pack then it should be added into the digital pack, as shown in the Knorr example opposite.

Zoom pack

In this layout, the product image may be zoomed by up to 150% and then cropped to only show a portion of the product. For portrait products, the top portion of the image is shown, while for landscape products the left portion is shown. This layout should only be used when:

  • The overall product shape does not play a significant role in brand recognition or differentiation of product type or size. If it does, then use the Whole pack layout instead.
  • The aspect ratio of the product is more than 3:2 (i.e. the product is tall and thin or flat and wide). Otherwise, use the Stretch to square layout instead.

The image should not be zoomed by more than 150%, because the greater the zooming, the less the Hero Image resembles the real product. If an image is zoomed too much, then shoppers may become concerned that information is being hidden from them.

When using the Zoom pack layout:

  • The contents of the pack should not be shown outside of, or next to the pack,
  • Manipulating the front of pack is strongly encouraged, in order to amplify the 4Ws and omit unnecessary details.
  • The image should include a size lozenge in the bottom right-hand corner. Further details on communicating size are provided in the next panel.

Communicating size - Introduction

In physical stores, the relative size of products is nearly always obvious. However, when shopping online, it is often ambiguous, because all the images are presented at the same size.

Therefore, in order to minimise the negative consequences of accidentally buying a product of the wrong size, the size information should always be communicated within a Mobile Ready Hero Image, in a manner that passes the visual clarity test.

The guidance for how best to do this depends on the aspect ratio of the product, as described in the subsequent panels.

Communicating size - Tall and thin products

For tall and thin products, or flat and wide products, where the aspect ratio is greater than 2:1, there is minimal space available within the confines of the pack edges. Therefore, an off-pack size lozenge is strongly encouraged, because this gives the maximum possible room to communicate the other 'Ws' within the digital pack.

However, at the time of writing in June 2021, several retailers do not accept hero images with off-pack size lozenges. Although squeezing the size into the confines of tall and thin packs may satisfy these retailers, this approach is not recommended, because it makes the image look artificial, and there isn't enough space to pass the visual clarity test, as shown opposite.

The last panel on this page provides further information on satisfying conflicting guidelines for size lozenges.

Communicating size - Other shapes of products

If the stretch to square layout is being used, then size information should be communicated within the square pack. If size information does not exist on the actual front of pack then it should be added into the digital pack.

If the whole pack layout is being used, and the product doesn't have an extreme aspect ratio, then there two options available for presenting size information, as follows:

  • If size information exists on the actual front of pack, then amplifying this information within the digital pack is strongly encouraged, because this communicates all of the 4Ws in a visually integrated manner.
  • If the size information does not exist on the actual front of pack, then an off-pack size lozenge is encouraged. However, as an alternative approach, assets that describe size on the back of pack may be added into the digital pack. This alternative approach may be viable in some circumstances, but it only works if the actual front of pack already has a suitably large and plain area where this text can be positioned.

When size information is included within the confines of the pack, the numerals should be at least as big as 82pt Open Sans bold (within a 3000 x 3000 pixel image). This ensures that size information will pass the visual clarity test.

Unfortunately, at the time of writing in June 2021, several retailers do not accept hero images with off-pack size lozenges. Although it may satisfy these retailers to squeeze the size into the front of every pack, and ignore the above guidance on minimum font size, this approach is not recommended.

The next panel describes further information on satisfying conflicting guidelines for size lozenges.

Satisfying conflicting guidelines for size lozenges

Summary: Whenever size lozenges are used, duplicate version(s) of the image should be created that omit these communications. Retailers that display size prominently underneath the image should use the version without the size lozenge. All other retailers should use the version with the lozenge.

Further details

At the time of writing in June 2021, some retailers around the world will only accept pack shots. This approach is not recommended.

Some retailers will accept hero images that are compliant with these guidelines, including those with off-pack size lozenges. This is recommended as a best practice approach.

Other retailers will only accept hero images that don’t contain off-pack size lozenges. Unfortunately, most of these retailers still don't display size information prominently underneath the image. This is not recommended, as discussed within the panel oncommunicating size for tall and thin products .

And finally, some retailers will accept all digitally created images, without any restrictions regarding off-pack communications. This approach is not recommended, because suppliers take advantage of this to create attention grabbing images, and this arms race is detrimental to the shopper experience.

The following guidelines represent the best attemps to address these conflicting requirements:

  • Whenever an off-pack size lozenge is used, a duplicate version of the image should be created without the size lozenge.
  • Retailers that display size prominently underneath the image should use the version without the size lozenge.
  • All other retailers should use the version with the lozenge.
  • Suppliers and retailers are encouraged to use automated methods for producing off-pack communications within e-commerce images, so that the duplicate versions can be produced at no extra cost.

Feedback

We would welcome your feedback on this page:

Your name:


Your email:


I would like to receive the Inclusive Design Toolkit news bulletin. This bulletin showcases people’s achievements with inclusive design tools, and highlights new tools. It comes out once or twice a year.

I would be interested in contributing to the Inclusive Design Toolkit news bulletin.

I would like a FREE activation code for the Inclusive Design Toolkit's impairment simulator software.

Your comments:


Please leave this field blank (it's a spam trap):
Submit feedback

Privacy policy. If your feedback comments warrant follow-up communication, we will send you an email using the details you have provided. Feedback comments are anonymized and then stored on our file server. If you select the option to receive or contribute to the news bulletin, we will store your name and email address on our file server for the purposes of managing your subscription. You can unsubscribe and have your details deleted at any time, by using our Unsubscribe form. If you select the option to receive an activation code, we will store your name and email address on our fileserver indefinitely. This information will only be used to contact you for the specific purpose that you have indicated; it will not be shared. We use this personal information with your consent, which you can withdraw at any time.

Read more about how we use your personal data. Any e-mails that are sent or received are stored on our mail server for up to 24 months.

Unless otherwise stated, all images are © Unilever and used with permission. Walkers is a trademark owned and designed by PepsiCo and used with permission.