vf 360 shop image style guide

1Vodafone

Vodafone Shop Image Style Guide

OwnerDateVersion

VIS – Content Services

3July 2011

2Vodafone

03 Introduction

04 Overview: Image sizes

Required Images

Icons 200 x 200 px (1 : 1)

06 Icon Spec 07 Icon Examples

Icons 85 x 85 px (1 : 1)

09 Icon Spec 10 Icon Examples

Screenshots 240 x 320 px (1 : 1.3)

12 Screenshot Spec 13 Screenshot Examples

Promos 480 x 120 px (4 :1)

15 Promo Spec 16 Promo Examples

Appendix

18 Re-sizing of Images

20 Guidelines: Creating Effective Images

IndexNote

The Vodafone-branded images in this document are presented for illustrative purposes only.

You may not use the Vodafone logo and imagery (including the Vodafone roundel itself) without Vodafone’s prior written permission. Also, please do not modify/adapt the Vodafone logo or any other visual asset belonging to Vodafone.

3Vodafone

What is the Vodafone Shop Image Style Guide?

This document is for all content partners who publish content to the Vodafone Shop. This includes local and global content partners as well as long-tail developers. This document contains information regarding imagery that is mandatory when submitting content to the Vodafone Shop.

Why are the images you provide important?

All the images you provide when publishing your content are used to market your content in the Vodafone Shop. Imagery is often the first thing that customers see; therefore please ensure all the images you provide are of high quality, clear, engaging and compelling, to maximise the marketing opportunities.

4Vodafone

Overview: Image sizesFor each individual content item:

Icons 200 x 200 px (1 : 1)

Icons 85 x 85 px (1 : 1)

Screenshots * 240 x 320 px (1 : 1.3)

Promos 480 x 120 px (4 :1)

* Minimum 3 up to a maximum of 6 screenshots need to be provided.

Image Naming

Please name the images as follows:

<Content Provider>_<item name>_<language>_<image size>_PPP.png For example; EAGames_Tetris_EN_200x200_PPP.png

<language> should be a two letter code, in most cases the same as the country code (so EN, ES, PT, DE, GR, IT, NL). If the image can be used in any market please use “ALL”.

Image Format

Please provide images in .PNG format.We can accept .JPG however sometimes the images can distort when pulled by the retailing tool to populate recommenda-tion and promotional slots.

Note

Some of the images you provide will be re-sized by Vodafone. For details, please see “Appendix: Re-sizing of Images” at the back of this document.

5Vodafone

Required ImagesIcons, Screenshots & Promos

6Vodafone

Icon Spec 200 x 200 px (1 : 1)

The same image will be used for both the 200 x 200 icon, the 180 x 180 icon and the 130 x 130 icon. The image will be scaled down, by Vodafone, to the smaller sizes with no detail lost as both images have a 1:1 ratio. As the image is only going to be scaled down a minimal amount, text and text based logos will work well on this icon.

Checklist

object centred

text allowed

image scalable

180 x 180 px 130 x 130 px200 x 200 px

7Vodafone

Icon Examples 200 x 200 px (1 : 1)

N.B. The information and image on this page are an example only and not a refl ection of the exclusive use of the image.

Image name: Icon_200x200

Example placement:Device Carousels

200 x 200 px

8Vodafone


Good example

Bad example

The image used in this example does not use the appropriate size (rectangular instead of square). Therefore parts of the image, and also the text, are missing and/or cut off. This incorrect use of footage must be avoided.

This example has a centred image and works just as well when scaled down for various devices, even with text on it.

Note

Important: Images in these examples are not true to scale!

9Vodafone

Icon Spec 85 x 85 px (1 : 1)

The same image will be used for the 85 x 85 icon, the 80 x 80 icon and the 53 x 53 icon. The image will be scaled down, by Vodafone, to the smaller sizes with no detail lost as all images have a 1:1 ratio. As the image is already small and will be scaled down further it is strongly advised not to use text.

Checklist

object centred

text not allowed

image scalable

80 x 80 px 53 x 53 px85 x 85 px

10Vodafone


N.B. The information and image to the right are an example only and not a refl ection of the exclusive use of the image.

Image name: Icon_85x85


85 x 85 px

11Vodafone


When providing the 85 x 85 px icon it is important to remember the following rules.

Good example Bad example Bad example

This image has no text and fi lls the entire icon leaving no border.

Avoid using text on the logo as it cannot be read on the small sizes.

Avoid too much detail in the image or overlaying the image too much as it can not be recognized on the small sizes.

texttext

text

12Vodafone

Screenshot Spec 240 x 320 px (1 : 1.3 )

Three screenshots need to be provided at 240 x 320 px. All screenshots will be visible once the user has selected the content item to be viewed in the Vodafone Shop.

Checklist

object centred

provide 3 up to a maximum of 6 images

image not scalable

240 x 320 px 240 x 320 px 240 x 320 px

13Vodafone

Screenshot Examples 240 x 320 px (1 : 1.3 )

Good example Bad example Bad example

This example uses all of the screen, all of the text is centred, sized correctly and therefore legible.

This image has been provided in landscape and therefore appears to the user on its side. Avoid this by making your image portrait.

This image does not fi ll the entire area and therefore has left gaps at the top and bottom. Some text has also been cut off, make sure your font size is right for the image.

14Vodafone

Screenshot Examples 240 x 320 px (1 : 1.3 )

Bad example

Screenshots should not incorporate a device-frame.

Bad example

Screenshots should not be framed using a device outline.

15Vodafone

Promo Spec 480 x 120 px (4 : 1)

The 4:1 promo needs to be supplied at a size of 480 x 120 px. This image will then be re-scaled as appropriate for various devices. As the images maybe re-scaled consideration must be given to font size and imagery. Please note that any re-scaling required will be carried out by Vodafone.

Checklist

object centred

text allowed

image scalable

Note

The promo must meet requirements for both applications: web and device. Therefore the large size (480 x 120 px ) is required.

480 x 120 px

360 x 90 px (75%)

16Vodafone

Promo Examples 480 x 120 px (4 : 1)

N.B. The information and image to the right are an example only and not a reflection of the exclusive use of the image.

Image name: Promo_480x120


240 x 60 px (50%)

17Vodafone

Promo Examples 480 x 120 px (4 : 1)

Good example

Bad example

The text and the image within the above example have been used appropriately. The banner is clear, crisp and the text well placed and legible. No content within the image is distorted or stretched. This example will work very well when scaled down.

The displayed image in this example contains too much detail and therefore distracts the user. In addition, the content of the image is not appropriately sized and has clearly been distorted to fi t the banner size. The result is the content of the image is illegible and the image is falsifi ed. When this image is scaled down it will loose even more detail and become increasingly more diffi cult to read. Using inappropriate sizes and distorted images must be avoided.

18Vodafone

AppendixRe-sizing of Images

19Vodafone

Re-sizing of Images

Note

Please remember these re-sizing rules when creating your images and consider the visuals that you include in these images.

1. Re-sizing dimensions outlined are not exhaustive; primarily because as new devices are rolled-out the re-sizing dimensions may need to differ. How- ever re-sizing is carried out within ratio.

2. The screenshots (240 x 320 px) will not be re-sized.

Some of the images that are provided will be automatically re-sized to accommodate various mobile and web storefront image slots.

The images that will be re-sized are as follows:

Icons 200 x 200 px

180 x 180 px

130 x 130 px

85 x 85 px

80 x 80 px

53 x 53 px

Promos 480 x 120 px

320 x 80 px

225 x 56 px

20Vodafone

AppendixGuidelines: Creating Effective Images

21Vodafone

Colours

This page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size.

Good examples

Try to use clear colour contrasts and bold shapes.

22Vodafone

Bad examples

Colours

Avoid the use of similar colours to prevent colour bleed.

text

This page contains general useful hints and tips for creating effective images. These hints are not specifi c to a particular image size.

23Vodafone

Good examples

Legibility

LegibilityLegibilityLegibility

LegibilityLegibilityLegibility


Make sure that the copy font and background are clearly distinguishable even at smaller sizes.

24Vodafone

Bad examples

Legibility

FONT


Avoid using similar colours for fonts and backgrounds, and do not place the font on top of a busy picture (or similar) as this can be distracting.

25Vodafone

Good examples

Displayed Content


Focus on the constitutive elements and choose balanced and interesting image details.

26Vodafone

Bad examples

Displayed Content


Avoid too much detail in your images as this causes clutter and distracts the user.

27Vodafone

Good examples

Display Details


If using a photo then choose a small detail of it rather than applying the full image.

28Vodafone

Bad examples

Display Details


Avoid too much detail in your image as this causes clutter and distracts the user.

29Vodafone

General Hints and Tips

This page contains general useful hints and tips for creating effective images.

FontsPlease ensure all the fonts that you incorporate use good legibility in terms of colours, styles, contrasts and sizes; remembering that some images may be re-sized. Please also only use original font styles.

ResolutionAvoid using images with low resolution as this can cause a visible loss of image quality. At the same time avoid a too high resolution as the file size can get extremely large.

Cropping/ClippingIf cropping or clipping images please ensure that it improves the overall composition of the image, emphasises the subject and is appropriately carried out for the image size; remembering that some images may be re-sized.

30Vodafone

Thank you.

vf 360 shop image style guide

Technology