skip to primary navigation skip to content
Home

Mobile Ready Hero Image Guidelines

 

Standard layouts

All products may use the standard layouts shown on the right and described on this page. There are some additional layouts for multipacks. Each of the standard layouts is described in more detail below.

In S1: Full-square, a modified square pack shot uses the full canvas. In S2: Size only, a square size call-out is added to the bottom right corner of the image. In S3: Landscape with stripe, the pack shot is landscape, and a horizontal stripe and size call-out have been added below the image. In S4: Portrait with stripe, the pack shot is portrait and a vertical stripe and size call-out have been added to the right of the image

Standard layouts for Mobile Ready Hero Images that may be used by all products.

S1: Full-square

If the pack shot is square, then the use of the available space can be maximised by making the pack shot take up the whole canvas. In this case, the front of the pack should be edited to maximise the legibility of the four key messages: brand, product type, product variant and size.

Example of an S1 image. The square pack shot uses the full canvas. It is edited to maximuse the legibility of the four key messages

If the pack shot is square, then it uses the full canvas. It should be edited to maximise the legibility of the four key messages.

S2: Size-only

In some cases, the product type is obvious from the image. For example, it may be the case that a particular bottle shape is only used for mayonnaise within the category of condiments. In this case, brand teams may decide to omit the stripe and only use a size call-out. As with other Mobile Ready Hero Images, this call-out should be placed in the bottom right hand corner of the image, and should use the Open Sans typeface. The colour of the callout should match the brand colours to enhance brand recognition in a small image.

Example of an S2 image. A size call-out is placed in the bottom right of the image. It uses the Open Sans typeface, and its colour matches the brand. The product variant is written on the pack shot.

If the product format/type is obvious from the pack shot, then the stripe is not needed and only the size call-out is added.

S3: Landscape with stripe

If the pack is landscape, then using a horizontal stripe makes maximum use of the available space. The stripe is placed below the image and contains details of the product type. It should not contain marketing messages. The FAQ contains more information on the words that are allowed in the stripe. The stripe colour matches the product variant in order to increase user recognition of the variant. As with other Mobile Ready Hero Images, the size call-out is placed in the bottom right hand corner of the image, and the colour of this callout matches the brand colours. All callouts should use the Open Sans typeface.

Example of an S3 image. The pack shot is landscape. A horizontal stripe is placed below the image. It contains the product type, not marketing messages and not variant text. The stripe uses the same colour as the product variant. The product variant itself is written on-pack. The size callout is in the bottom right-hand corner. Its colour matches the brand. All callouts use the Open Sans typeface.

If the product type is ambiguous and the product is landscape, then the Mobile Ready Hero Image uses a horizontal stripe and size-callout.

S4: Portrait with stripe

If the pack is portrait, then using a vertical stripe makes maximum use of the available space. The stripe is placed at the right of the image and contains details of the product type. It should not contain marketing messages. The FAQ contains more information on the words that are allowed in the stripe. The stripe colour matches the product variant in order to increase user recognition of the variant. As with other Mobile Ready Hero Images, the size call-out is placed in the bottom right hand corner of the image, and the colour of this callout matches the brand colour. All callouts should use the Open Sans typeface.

Example of an S4 image. The pack shot is portrait. A vertical stripe is placed to the right of the image. It contains the product type, not marketing messages and not variant text. The stripe uses the same colour as the product variant. The product variant itself is written on-pack. The size callout is in the bottom right-hand corner. Its colour matches the brand. All callouts use the Open Sans typeface.

If the product type is ambiguous and the product is portrait, then the Mobile Ready Hero Image uses a vertical stripe and size-callout.

Back to top

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.

Back to top

Study at Cambridge

About the University

Research at Cambridge