• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
VF 360 Shop Image Style Guide
 

VF 360 Shop Image Style Guide

on

  • 2,427 views

 

Statistics

Views

Total Views
2,427
Views on SlideShare
1,724
Embed Views
703

Actions

Likes
0
Downloads
9
Comments
0

6 Embeds 703

http://developer.vodafone.com 537
https://developer.vodafone.com 152
http://gw.com2us.com 10
http://translate.googleusercontent.com 2
http://devportalsit.vfnet.de 1
http://developer.vfnet.de 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    VF 360 Shop Image Style Guide VF 360 Shop Image Style Guide Presentation Transcript

    • Vodafone ShopImage Style Guide Owner VIS – Content Services Date July 2011 Version 3Vodafone 1
    • Index03 Introduction Appendix Note04 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 and06 Icon Spec imagery (including the Vodafone roundel07 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 Spec10 Icon Examples Screenshots 240 x 320 px (1 : 1.3)12 Screenshot Spec13 Screenshot Examples Promos 480 x 120 px (4 :1)15 Promo Spec16 Promo Examples Vodafone 2
    • What is the Vodafone ShopImage Style Guide?This document is for all content partners who publish content to the VodafoneShop. This includes local and global content partners as well as long-taildevelopers. This document contains information regarding imagery that is mandatorywhen 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 yourcontent 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, engagingand compelling, to maximise the marketing opportunities. Vodafone 3
    • Overview: Image sizesFor each individual content item: Image FormatIcons 200 x 200 px (1 : 1) Please provide images in .PNG format. We can accept .JPG however sometimesIcons 85 x 85 px (1 : 1) the images can distort when pulled by theScreenshots * 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, pleaseImage 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.pngFor 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
    • Required ImagesIcons, Screenshots & Promos Vodafone 5
    • 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 Checklist130 x 130 icon. The image will be scaled down, by Vodafone, to the smaller sizes with object centredno detail lost as both images have a 1:1 ratio. As the image is only going to be scaled text alloweddown a minimal amount, text and text based logos will work well on this icon. image scalable200 x 200 px 180 x 180 px 130 x 130 px Vodafone 6
    • 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 ofthe exclusive use of the image.Image name:Icon_200x200Example placement:Device Carousels 200 x 200 px Vodafone 7
    • 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 exampleThe 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
    • 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. ChecklistThe image will be scaled down, by Vodafone, to the smaller sizes with no detail lost as all object centredimages have a 1:1 ratio. As the image is already small and will be scaled down further it text not allowedis strongly advised not to use text. image scalable85 x 85 px 80 x 80 px 53 x 53 px Vodafone 9
    • Icon Examples 85 x 85 px (1 : 1)N.B. The information and image to the right are an example only and not a reflectionof the exclusive use of the image.Image name:Icon_85x85Example placement:Device Carousels 85 x 85 px Vodafone 10
    • 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 textThis image has no text and fills the Avoid too much detail in the image or Avoid using text on the logo as itentire 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
    • Screenshot Spec 240 x 320 px (1 : 1.3 )Three screenshots need to be provided at 240 x 320 px. ChecklistAll screenshots will be visible once the user has selected the content item to be viewed object centredin the Vodafone Shop. provide 3 up to a maximum of 6 images image not scalable240 x 320 px 240 x 320 px 240 x 320 px Vodafone 12
    • Screenshot Examples 240 x 320 px (1 : 1.3 )Good example Bad example Bad exampleThis example uses all of the screen, all This image has been provided in This image does not fill the entire areaof the text is centred, sized correctly and landscape and therefore appears to the and therefore has left gaps at the top andtherefore 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
    • Screenshot Examples 240 x 320 px (1 : 1.3 )Bad example Bad exampleScreenshots should not incorporate a Screenshots should not be framed usingdevice-frame. a device outline. Vodafone 14
    • 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 Checklistre-scaled as appropriate for various devices. As the images maybe re-scaled object centredconsideration must be given to font size and imagery. Please note that any re-scaling text allowedrequired 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
    • Promo Examples 480 x 120 px (4 : 1)N.B. The information and image to the right are an example only and not a reflectionof the exclusive use of the image.Image name:Promo_480x120Example placement:Device Carousels 240 x 60 px (50%) Vodafone 16
    • Promo Examples 480 x 120 px (4 : 1)Good exampleThe 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 exampleThe displayed image in this example contains too much detail and therefore distracts the user. In addition, the content of the image is notappropriately 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 anddistorted images must be avoided. Vodafone 17
    • AppendixRe-sizing of Images Vodafone 18
    • Re-sizing of ImagesSome of the images that are provided will be automatically re-sized to Noteaccommodate various mobile and web storefront image slots. Please remember these re-sizing rulesThe 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
    • AppendixGuidelines: Creating Effective Images Vodafone 20
    • ColoursTry to use clear colour contrasts and bold shapes.Good examplesThis page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size. Vodafone 21
    • ColoursAvoid the use of similar colours to prevent colour bleed.Bad examples textThis page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size. Vodafone 22
    • LegibilityMake sure that the copy font and background are clearly distinguishable even at smaller sizes.Good examples Legibility Legibility Legibility Legibility Legibility LegibilityThis page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size. Vodafone 23
    • LegibilityAvoid using similar colours for fonts and backgrounds, and do not place the font on topof a busy picture (or similar) as this can be distracting.Bad examples FONTThis page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size. Vodafone 24
    • Displayed ContentFocus on the constitutive elements and choose balanced and interesting image details.Good examplesThis page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size. Vodafone 25
    • Displayed ContentAvoid too much detail in your images as this causes clutter and distracts the user.Bad examplesThis page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size. Vodafone 26
    • Display DetailsIf using a photo then choose a small detail of it rather than applying the full image.Good examplesThis page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size. Vodafone 27
    • Display DetailsAvoid too much detail in your image as this causes clutter and distracts the user.Bad examplesThis page contains general useful hints and tips for creating effective images. These hints are not specific to a particular image size. Vodafone 28
    • General Hints and TipsFontsPlease ensure all the fonts that you incorporate use good legibility in termsof colours, styles, contrasts and sizes; remembering that some images maybe re-sized. Please also only use original font styles.ResolutionAvoid using images with low resolution as this can cause a visible loss ofimage quality. At the same time avoid a too high resolution as the file sizecan get extremely large.Cropping/ClippingIf cropping or clipping images please ensure that it improves the overallcomposition of the image, emphasises the subject and is appropriatelycarried out for the image size; remembering that some images may bere-sized.This page contains general useful hints and tips for creating effective images. Vodafone 29
    • Thank you.Vodafone 30