2. Index
03 Introduction Appendix Note
04 Overview: Image sizes 18 Re-sizing of Images The Vodafone-branded images in this
document are presented for illustrative
20 Guidelines: Creating
purposes only.
Required Images Effective Images
Icons 200 x 200 px (1 : 1) You may not use the Vodafone logo and
06 Icon Spec imagery (including the Vodafone roundel
07 Icon Examples itself) without Vodafoneâs prior written
permission. Also, please do not modify/
Icons 85 x 85 px (1 : 1) adapt the Vodafone logo or any other
visual asset belonging to Vodafone.
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
Vodafone 2
3. 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.
Vodafone 3
4. Overview: Image sizes
For each individual content item: Image Format
Icons 200 x 200 px (1 : 1) Please provide images in .PNG format.
We can accept .JPG however sometimes
Icons 85 x 85 px (1 : 1)
the images can distort when pulled by the
Screenshots * 240 x 320 px (1 : 1.3) retailing tool to populate recommenda-
Promos 480 x 120 px (4 :1) tion and promotional slots.
* Minimum 3 up to a maximum of 6 screenshots need to be provided. Note
Some of the images you provide will be
re-sized by Vodafone. For details, please
Image Naming see âAppendix: Re-sizing of Imagesâ at
the back of this document.
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â.
Vodafone 4
6. 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 Checklist
130 x 130 icon. The image will be scaled down, by Vodafone, to the smaller sizes with object centred
no detail lost as both images have a 1:1 ratio. As the image is only going to be scaled
text allowed
down a minimal amount, text and text based logos will work well on this icon.
image scalable
200 x 200 px 180 x 180 px 130 x 130 px
Vodafone 6
7. Icon Examples 200 x 200 px (1 : 1)
N.B. The information and image on this page are an example only and not a reflection of
the exclusive use of the image.
Image name:
Icon_200x200
Example placement:
Device Carousels
200 x 200 px
Vodafone 7
8. Icon Examples 200 x 200 px (1 : 1)
Good example Note
Important: Images in these examples are
not true to scale!
This example has a centred image and works just as well when scaled down for various devices, even with text on it.
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.
Vodafone 8
9. 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. Checklist
The image will be scaled down, by Vodafone, to the smaller sizes with no detail lost as all object centred
images have a 1:1 ratio. As the image is already small and will be scaled down further it
text not allowed
is strongly advised not to use text.
image scalable
85 x 85 px 80 x 80 px 53 x 53 px
Vodafone 9
10. Icon Examples 85 x 85 px (1 : 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:
Icon_85x85
Example placement:
Device Carousels
85 x 85 px
Vodafone 10
11. Icon Examples 85 x 85 px (1 : 1)
When providing the 85 x 85 px icon it is important to remember the following rules.
Good example Bad example Bad example
text
text
This image has no text and fills the Avoid too much detail in the image or Avoid using text on the logo as it
entire icon leaving no border. overlaying the image too much as it can cannot be read on the small sizes.
not be recognized on the small sizes.
Vodafone 11
12. Screenshot Spec 240 x 320 px (1 : 1.3 )
Three screenshots need to be provided at 240 x 320 px. Checklist
All screenshots will be visible once the user has selected the content item to be viewed object centred
in the Vodafone Shop.
provide 3 up to a maximum of 6 images
image not scalable
240 x 320 px 240 x 320 px 240 x 320 px
Vodafone 12
13. Screenshot Examples 240 x 320 px (1 : 1.3 )
Good example Bad example Bad example
This example uses all of the screen, all This image has been provided in This image does not fill the entire area
of the text is centred, sized correctly and landscape and therefore appears to the and therefore has left gaps at the top and
therefore legible. user on its side. Avoid this by making bottom. Some text has also been cut off,
your image portrait. make sure your font size is right for the
image.
Vodafone 13
14. Screenshot Examples 240 x 320 px (1 : 1.3 )
Bad example Bad example
Screenshots should not incorporate a Screenshots should not be framed using
device-frame. a device outline.
Vodafone 14
15. 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 Checklist
re-scaled as appropriate for various devices. As the images maybe re-scaled object centred
consideration must be given to font size and imagery. Please note that any re-scaling
text allowed
required will be carried out by Vodafone.
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%)
Vodafone 15
16. 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
Example placement:
Device Carousels
240 x 60 px (50%)
Vodafone 16
17. Promo Examples 480 x 120 px (4 : 1)
Good 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.
Bad example
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 fit the banner size. The result is the content of the image is illegible and the image is falsified.
When this image is scaled down it will loose even more detail and become increasingly more difficult to read. Using inappropriate sizes and
distorted images must be avoided.
Vodafone 17
19. Re-sizing of Images
Some of the images that are provided will be automatically re-sized to Note
accommodate various mobile and web storefront image slots. Please remember these re-sizing rules
The images that will be re-sized are as follows: when creating your images and consider
the visuals that you include in these
images.
Icons 200 x 200 px
180 x 180 px 1. Re-sizing dimensions outlined are not
exhaustive; primarily because as new
130 x 130 px
devices are rolled-out the re-sizing
85 x 85 px dimensions may need to differ. How-
ever re-sizing is carried out within ratio.
80 x 80 px
53 x 53 px 2. The screenshots (240 x 320 px) will not
be re-sized.
Promos 480 x 120 px
320 x 80 px
225 x 56 px
Vodafone 19
21. Colours
Try to use clear colour contrasts and bold shapes.
Good examples
This page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size.
Vodafone 21
22. Colours
Avoid the use of similar colours to prevent colour bleed.
Bad examples
text
This page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size.
Vodafone 22
23. Legibility
Make sure that the copy font and background are clearly distinguishable even at smaller sizes.
Good examples
Legibility
Legibility
Legibility
Legibility
Legibility
Legibility
This page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size.
Vodafone 23
24. Legibility
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.
Bad examples
FONT
This page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size.
Vodafone 24
25. Displayed Content
Focus on the constitutive elements and choose balanced and interesting image details.
Good examples
This page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size.
Vodafone 25
26. Displayed Content
Avoid too much detail in your images as this causes clutter and distracts the user.
Bad examples
This page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size.
Vodafone 26
27. Display Details
If using a photo then choose a small detail of it rather than applying the full image.
Good examples
This page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size.
Vodafone 27
28. Display Details
Avoid too much detail in your image as this causes clutter and distracts the user.
Bad examples
This page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size.
Vodafone 28
29. General Hints and Tips
Fonts
Please 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.
Resolution
Avoid 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/Clipping
If 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.
This page contains general useful hints and tips for creating effective images.
Vodafone 29
