Mobile Ready Hero Image Guidelines

This layout shows the packs together with a digitally created cardboard tray. The tray does not necessarily exist, but provides a visually pleasing way of binding multiple packs together within a single image. However, digital trays should be plain, rectangular and minimal in height - they should not be used to incorporate more brand logos or marketing claims.

For 2-3 packs in a tray, the front most pack in the tray is usually large enough such that the 4Ws can pass the visual clarity test. For 6-12 packs in the tray, each individual pack becomes unavoidably small, so one of the packs is shown in front of the tray on the left-hand side of the image, and the tray is shown slightly behind it on the right-hand side of the image. The situation for 4 packs depends on the specific product, so 4 packs may use either variant of digital trays.

Therefore, some guidelines apply to all trays, whereas some only apply to 4-12 packs in the tray, and others to 2-4 packs in a tray. Each of these are now described in turn.

The following guidelines apply to all digital trays

• Digital trays should use a single flat colour, which should be a tint/shade of the dominant brand colour that’s on the pack, or a plain cardboard colour. The colour chosen should contrast with the outer edges of the packs that it contains, so that the eye can distinguish the tray edges and the products inside.
• Digital trays should be minimal in height, and should not significantly obscure the products that are in the tray.
• The tray should be arranged so that its depth direction points from bottom-left to top-right. This ensures that the product in front does not hinder the shopper determining the number of rows of products that are in the tray.
• The number of packs shown in the tray should exactly match the number of packs that are being sold.

If the tray contains 4-12 packs

• A single product should be shown at the biggest possible size, on the left-hand side of the image.
• The tray should be positioned on the right-hand side of the image.
• The single pack may slightly overlap the tray, however enough of the tray should be visible to get a sense of the number of packs that are in it.
• A Gaussian blurring edge effect should be applied to the front image to help make the pack edges obvious.
• Even if the packs contain discrete items, these should not be shown outside of the packs.
• The product shown in front may be slightly zoomed, so that the bottom of the product is not shown. However, in this case, the products that are shown in the tray should have the correct aspect ratio.
• The packs in the tray may be digitally manipulated so that they match the front image, or they may be pack shots.
• The camera angle of the tray should be roughly consistent with the camera angle of the product that shown in front. If the product in front is shown with a completely flat camera angle, then the tray should be shown slightly rotated, with a slightly elevated camera angle.
• The tray should be accompanied by a double set of lozenges that describes the number of packs and the size of each pack, if the retailer will accept these. See Communicating the number of packs for detailed guidance on these lozenges.

Alternatively, if the retailer will not accept the lozenges for trays that contain 4-12 packs

• A single line of text should be digitally added into the tray, and this line of text should only describe the number of packs and the size of each pack, using only numerals and standard units.
• Best attempt should be made to maximise the size of the text, while also keeping the tray minimal in height, so that it does not obscure the products that are in the tray. An ideal text size would be 340px (within a 3000 x 3000 pixel image).
• The typeface should be Open Sans Bold, and the text height and weight should be uniform across all the numerals.
• If text is added into the tray, then it should be white, unless the tray is a very pale colour, in which case it should be black.
• The tray may be shown in three-quarter angle, which helps to communicate the total number of the items in the tray (as shown in the Barilla example below). Alternatively, the tray may be shown such that one side is front and flat, which helps make the text on the tray easier to read the text (as shown in the Pril example below).

If digital trays are used for landscape packs

The packs in the tray may be arranged in a double layer, as shown in the example below (which shows the alternatives both with and without the lozenges)

If the tray contains 2-4 packs

• All of the packs should be shown in a tray, without pulling one pack out of the tray.
• If the packs contain discrete items, and the image doesn’t contain any lozenges, and the items inside the packs are all the same, then exactly one of the discrete items may be shown outside of the tray, in the bottom right-hand corner. If the pack contains several different kinds of items, then exactly one of each different kind of item may be shown outside of the tray.
• In order to help communicate the number of packs and the size of each pack a single line of text may be digitally added into the tray. The guidelines for this text are the same as digital trays with 4-12 packs, and compliant examples are shown in the images below

• Alternatively, the image may include a double set of lozenges. The guidelines for these lozenges are the same as digital trays with 4-12 packs, and compliant examples are shown in the images below.

In this layout, the packs are shown partially enclosed in a digitally created sleeve. The sleeve doesn’t necessarily exist, but can be created using the graphics that exist on the actual packs.

Compared to other kinds of bundle layouts, digital sleeves have the advantage that the pack graphics are only presented once, at a much bigger size. Furthermore, the packs are only partially obscured by the sleeve, so the shopper still gets a visual indication of the number of packs.

The following guidelines apply to digital sleeves:

• Digital sleeves should only contain graphics that exist on the actual packs, but should also describe the size of each pack and the number of packs. In order to satisfy both of these requirements, a neutral description of the quantity may be added into the digital sleeve, like ‘2 x 45 washes’ or ‘Twin Pack’. Phrases like ‘Mega pack or ‘Best value pack’ should not be included.
• For landscape packs, digital sleeves should be plain and rectangular (as shown in the XTRA example below).
• For portrait packs, sleeves should either be plain and rectangular, or wrap exactly to the shape of the packs (as shown in the Pril example below).
• For sleeves that enclose several multipacks, if the multipack is homogeneous, then exactly one lowest-level item may be shown outside of the sleeve. If the multipack is not homogeneous, then exactly one of each different kind of item may be shown outside of the sleeve.
• Sleeves may be used for gift packs or variety packs, where different items are enclosed within a single sleeve. In this case, the graphics of the sleeve should communicate the 4Ws for the packs that are enclosed, using a combination of the graphics that exist on the actual packs.

This layout shows the pack together with a digitally created cardboard box. The box does not necessarily exist, but showing the box in the image communicates that the price refers to multiple packs, and the text that is digitally added into the cardboard box communicates exactly how many packs.

Digital boxes should be a pale cardboard like colour, and should be arranged so that the depth direction points from bottom left to top right (for consistency with digital trays).

When using this layout, a single pack may be shown separately, in addition to the box. Alternatively, the cardboard box can be shown on its own, with the image of the pack digitally added onto one of the surfaces of the cardboard box. Each of these cases are now considered in turn.

If the single pack is shown separately, in addition to the box

• The single pack should be shown at the biggest possible size, on the left-hand side of the image tile.
• The box should be positioned on the right-hand side.
• The box should be arranged so that its depth direction points from bottom left to top right.
• The single pack may overlap in front of the box, in order to help pass the visual clarity test.
• Black ink should be added into the cardboard box in order to communicate the number of packs and the size of each pack. The use of Open Sans bold is encouraged, and the numerals should be at least as big as 340px Open Sans bold (within a 3000 x 3000 pixel image). This ensures that size information will pass the visual clarity test.
• The black ink may also depict brand assets, but should not compete with the product for visual attention. Any ink on the box should only be black.

If an image of the pack is digitally added into one of the surfaces of the cardboard box

• The box should be arranged so that the front appears flat, and the top of the box is visible, as shown below.
• The size of each pack should ideally be communicated within the pack artwork
• Black ink should be added into the cardboard box in order to communicate the number of packs. The text should be positioned either below, or to the right-hand side of the pack image. The use of Open Sans bold is encouraged, and the numerals should be at least as big as 340px Open Sans bold (within a 3000 x 3000 pixel image).
• If the cardboard box contains packs that are all the same, then exactly one image of the pack should be shown. If the box contains several different packs, then exactly one of each different kind of pack should be shown.