Vodafone

Visual Identity
Digital guidelines

15.08.13
01

Vodafone Visual Identity

Digital guidelines

Contents
Digital guidelines

1. Our brand in digital

1.1 The visual identity in the digital world
1.2 Core digital identity elements
1.3 Typography
1.4 The Rhombus and the icon
1.5 Using the Rhombus
1.6 Type within the Rhombus
1.7 Animating the Rhombus
1.8 Signature
1.9 Calls to action, buttons and badges

05
06
07
08
09
10
11
12
13

2. Digital display advertising

2.1 Standard display formats
2.2 Rich media
2.3 Expandables and takeovers
2.4 Mobile and tablet
2.5 Static and backup formats

15
16
17
18
19

3. Social media
3.1 Profiles, profile pictures and backgrounds
3.2 Facebook
3.3 YouTube and Twitter

3.4 LinkedIn, Pinterest and Google+

21
22
23
24

4. Emails and newsletters

4.1 Editorial

26

Sections: 0 1 2 3 4

02

Vodafone Visual Identity

Digital guidelines

50%

Discover
the Samsung
Galaxy S4

Headings
Vodafone Bold 20pt on 21pt leading

Flexible spacing

Vodafone
Power to you

Sections: 0 1 2 3 4

CTAs
Vodafone Regular 15pt on 26pt leading
Signature
Vodafone Bold 20pt on 26pt leading
Vodafone Regular

15

1.

Vodafone Visual Identity

Digital guidelines

Our brand in digital

1.1 The visual identity in the digital world
1.2 Core digital identity elements
1.3 Typography
1.4 The Rhombus and the icon
1.5 Using the Rhombus
1.6 Type within the Rhombus
1.7 Animating the Rhombus
1.8 Signature
1.9 Calls to action, buttons and badges

Sections: 0 1 2 3 4

05
06
07
08
09
10
11
12
13

04

1.1

Vodafone Visual Identity

Digital guidelines

Our brand in digital

The visual identity in the digital world
A consistent presence across all digital platforms,
devices and formats.

Sections: 0 1 2 3 4

05

1.2

Vodafone Visual Identity

Digital guidelines

Our brand in digital

Core digital identity elements

Core identity elements

Vodafone typeface

Red, white and grey form our primary colour palette,

with red being at the heart of the brand. Its used to
express our optimism and confidence.

Brush

AaBbCc
Minimum height 30px

The secondary palette is used to support the

primary, we use these colours for accents.

Digital identity elements

Alongside primary and secondary colours, there are

specific colours and icons for interactive elements
and links. When creating links, buttons or interactive
modules, use either the Red Violet and Aubergine
combination or Vodafone Red and Dark Red
combination for rest and active states. For situations
where you need to instruct the user to click or tap
for more information or to close a module, use the
interactive icons as shown.

Colour
Principle palette

Secondary colour palette

Interactive palette
Rest state
Active state

Link icons

Read more

The light grey background colour should be used to

divide content on websites or apps.

Close
Signature

Vodafone
Power to you

Core identity elements and brand assets

Always refer to the Core guidelines for consistency
with other applications. You can find a full catalogue
of logo variants, Vodafone typefaces and imagery
for various applications here.

Vodafone
Sections: 0 1 2 3 4

06

1.3

Vodafone Visual Identity

Digital guidelines

Our brand in digital

Typography

Vodafone Bold

Use for all headlines

and the Signature.

Our brand typeface is Vodafone. It should always be

used in a digital environment. In instances where
this is not possible, please default to Arial.
Vodafone Extra Bold is not permitted for digital use.

Vodafone Regular

Use for body copy for

comms and apps.

Arial Bold

Use for web headings

and text links.

Arial Regular

Use for web body copy.

Sections: 0 1 2 3 4

Vodafone
Online
Typeface
Suite

07

1.4

Vodafone Visual Identity

Digital guidelines

Our brand in digital

The Rhombus and the icon
The Rhombus is a flexible brand building device.
In the digital world its role is to hold messaging,
animate to convey a sense of direction and
momentum and interact with imagery. The
Rhombus always anchors to the icon. Positioned
centrally, the lines of the Rhombus intersect the
icon at a 45 angle.

45

Centre of Icon

45
Icon size for display and email formats
x = 40px

Icon size for small display formats

x = 40px

y = 50% of x

Preferred size
40px with 50%
safe zone

Icons and logo variants

You can find a full catalogue of icons and logos for
various applications here.

Sections: 0 1 2 3 4

y = 50% of x

Smallest size 20px

with 25% safe zone

08

1.5

Vodafone Visual Identity

Digital guidelines

Our brand in digital

Using the Rhombus

Grid for display

10px margin

To position the Rhombus in digital display

advertising, divide your canvas by four. Then, divide
each segment, by four again. This gives you four
central blocks in which to position the icon. The
Rhombus should always occupy at least 20% of the
canvas.

The central four blocks of the

canvas is the container area
for the Icon to be positioned.
The position is dependent
of media type and size. The
positioning is kept open and
simplified to allow maximum
flexibily for the fluid character
of the Rhombus, while still
maintaining consistency,
even in restricted space.

Select Icon positioning inside

the preferred zone

Positioning

The Rhombus device can enter the

application from top or bottom,
left or right.

Sections: 0 1 2 3 4

What to avoid
The Rhombus is
never centred.

09

1.6

Vodafone Visual Identity

Digital guidelines

Digital display advertising

Type within the Rhombus
Type is centered within the Rhombus and aligned
to the principal canvas edge opposite to the icon.
The safe zone from the canvas edge and the icon
is 50% of icon size. Copy always ranges left or right
according to where the flat canvas edge falls.
x

50%

Discover
the Samsung
Galaxy S4
Vodafone
Power to you

Sections: 0 1 2 3 4

Headings
Vodafone Bold
Minimum 14pt on 15pt leading

CTAs
Vodafone Regular
Minimum 12pt on 22pt leading
Signature
Vodafone Bold
Vodafone Regular
Minimum 14pt on 15pt leading

10

1.7

Vodafone Visual Identity

Digital guidelines

Our brand in digital

Animating the Rhombus
The Rhombus always animates 360. As the
Rhombus rotates, copy and imagery are revealed.
The movement is sweeping, fluid and fast. Always
rotate in the same direction of movement from start
to finish. When the animation pauses on Rhombus
copy, make sure the lines of the Rhombus always
intersects the icon at a 45 angle. The icon should
not rotate.

Frame 1.
Red transparent Rhombus
reveal.

Frame 2.
Rotating the Rhombus,
messaging reveals.

Frame 3.
At full Rhombus position,
Rhombus pauses. New
messaging fades in.

Frame 4.
Rotating the Rhombus,
messaging is masked

Frame 5.
Solid is introduced.

Frame 6.
Red Rhombus rotates.

Frame 7.
Continue animation to full
Rhombus position.

Frame 8.
Product shot fades in, 'Power
to you' appears, signature
complete.

Making the transparent Rhombus in Photoshop

Fill the shape with Vodafone Red 485 and change the layer blending mode to multiply. Create a Hue/Saturation adjustment layer directly above the photograph layer and set the saturation to 0%. Then, create a mask
the same shape as the Rhombus and apply to the adjustment layer you just made.

Rhombus animation variants

Animated examples of the Rhombus variants are
available here.

Sections: 0 1 2 3 4

11

1.8

Vodafone Visual Identity

Digital guidelines

Our brand in digital

Signature

Vertical stack

The Signature is used with Vodafone and 'Power to

you' in display advertising, however in small display
formats you can use the Vodafone Signature on its
own.

Vodafone + Power to you

Vodafone + Power to you

Vodafone + Power to you

Use double space between Vodafone and 'Power to you'

Do not feature 'Power to you' when space is limited.

For example, in mobile banners.

Vodafone only

Sections: 0 1 2 3 4

12

1.9

Vodafone Visual Identity

Digital guidelines

Our brand in digital

Calls to action, buttons and badges

Text link with arrow

For consistency across digital only use these

buttons, badges and calls to action.

Text link with cross

Rest state

Active state

Rest state

Active state

Read more

Read more

Close

Close

Use grey for text links

with red arrow.

Use grey for text links

with red cross.

Buttons

Badges

Primary call to action

Rest state

Active state

Primary call to action must be in purple.

Secondary call to action

Rest state

Primary call to action - when on red

Rest state

Active state

When on red, the call to action is white.

Button radius

Upgrade
today

Active state

Purple badge permitted in digital only.

Secondary calls to action are grey.

Sections: 0 1 2 3 4

2px corner radius

13

2.

Vodafone Visual Identity

Digital guidelines

Digital display advertising

2.1 Standard display formats
2.2 Rich media
2.3 Expandables and takeovers
2.4 Mobile and tablet
2.5 Static and backup formats

Sections: 0 1 2 3 4

15
16
17
18
19

14

2.1

Vodafone Visual Identity

Digital guidelines

Digital display advertising

Standard display formats

MPU
300 x 250

As you run your campaign across the most

common display formats, make sure the layout
of the Rhombus, call to action, imagery, copy and
signature follow the guidance set out in section
1 of this document. Your campaign art should be
cropped in a similar way and messaging should be
the same, no matter what the shape of the format.

Skyscraper
120 x 600

Wide skyscraper
160 x 600

Frame 1

Frame 2

Frame 3

Frame 1

Frame 2

Frame 3

Frame 3

Leaderboard 728 x 90

Sections: 0 1 2 3 4

15

2.2

Vodafone Visual Identity

Digital guidelines

Digital display advertising

Rich media

Animation

Video

Interactive

Frame 1

Frame 1

Frame 1

Frame 2

Frame 2

Frame 2

Frame 3

Frame 3

Frame 3

Rich media is typically for display over 40KB. This

includes animation, video and interaction.
Simple animation can be achieved within the typical
100KB limit. In this 3 key frame example, as the
iPhone glides right, it makes space for the badge to
fade in.
With video where streaming limits are anywhere
between 1MB to 5MB and specifically real footage,
make sure the grading and overall colouring
follows the photography styles set out in the Core
guidelines.
For more interactive applications such as online
calculators where the user is asked to input
information, make sure that the result loads quickly
and rewards the user with useful information.

Sections: 0 1 2 3 4

16

2.3

Vodafone Visual Identity

Digital guidelines

Digital display advertising

Expandables and takeovers

Expandables

Takeovers

As with standard display formats, follow the

guidance set out in section 1 of this document.

Multiple format page takeovers should make use of

all the available space to showcase a dynamic use of
the Rhombus. When possible, use of the Icon should
be limited to one per page and displayed in the most
prominent banner. Synchronised display formats
should work together as one piece. Use discretion
and best practice to align elements on the page.

Expandable display formats should be responsive

and animate effortlessly when activated by the
user. If you can, include a reward on click such as
triggering a video to play.

Sections: 0 1 2 3 4

17

2.4

Vodafone Visual Identity

Digital guidelines

Digital display advertising

Mobile and tablet

Mobile formats Size varies by plataform and device.

As with standard display formats, follow the

guidance set out in section 1 of this document. In
small mobile formats you can use the Vodafone
Signature on its own. With mobile expandable
formats, you can use the Vodafone only signature
when expanded. Bearing in mind file size restrictions
on mobile ad platforms, keep animation to a
minimum.

Landscape

Portrait

Mobile expandable ad

Closed
Sections: 0 1 2 3 4

Expanded

Landscape mobile format

18

2.5

Vodafone Visual Identity

Digital guidelines

Digital display advertising

Static and backup formats
Where Flash can not be used or only static display
ads are required only one frame of image and text
should be used.
Make sure that the benefit is clear, along with the
call to action. This is a good place to use a badge
if you need to call out an additional prompt. Keep
copy short.

Sections: 0 1 2 3 4

19

3.

Vodafone Visual Identity

Digital guidelines

Social media
3.1 Profiles, profile pictures and backgrounds 21
3.2 Facebook
22
3.3 YouTube and Twitter
23
3.4 LinkedIn, Pinterest and Google+
24

Sections: 0 1 2 3 4

20

3.1

Vodafone Visual Identity

Digital guidelines

Social media
Profiles, profile pictures and backgrounds

Profile picture

Backgrounds

width of icon

Whether a 'share', tweet, like or post, it's vital our

brand is consistently presented across all social
media platforms.

We use the Rhombus as a

background image to create
maximum impact.

When it's not possible to use

a background image, bring
the brand personality to life
through other areas of the page.

Our icon should be used as the profile picture for all

social media platforms. It should be used on a solid
white background with a safe area of 25%.
Background images should be used across social
media to communicate the Vodafone personality.

y =25% of icon size

Safe area of 25% on all sides.

Never use the Rhombus

icon lock-up for profile
images.

Naming your profile

When we register social media accounts we have

standard naming conventions which should be
followed by all local markets.

Linkedin

YouTube

Google+

Pinterest

Vodafone + country name

written in full in the local
language.

Vodafone + country name

written in full in the local
language.

Vodafone + country name

written in full in the local
language.

Vodafone + country name

written in full in the local
language.

Examples

Examples

Examples

Examples

Vodafone Spain
www.linkedin.com/companies/
VodafoneEspaa

Sections: 0 1 2 3 4

Vodafone Spain
youtube.com/VodafoneEspaa

Vodafone Spain
plus.google.com/
VodafoneEspaa

Vodafone Spain
pinterest.com/
VodafoneEspaa

21

3.2

Vodafone Visual Identity

Digital guidelines

Social media
Facebook

Timeline and cover photo

On the timeline, the cover photo should carry a red

thread integrated into the composition. If it is an
illustration, use red as the main colour. To support
the cover photo, a single copy line should be used.
The Rhombus is never used on the cover photo.
The profile picture is the icon, which should always
be on white.

Sections: 0 1 2 3 4

22

3.3

Vodafone Visual Identity

Digital guidelines

Social media
YouTube and Twitter

YouTube

The main image should carry a red thread integrated

into the composition. Follow the TVC rules from the
Core guidelines for videos on YouTube.
On Twitter, use the Rhombus as a full bleed
background image when there is no other Rhombus
on the page.

Twitter

Sections: 0 1 2 3 4

23

3.4

Vodafone Visual Identity

Digital guidelines

Social media
LinkedIn, Pinterest and Google+

LinkedIn

The main image should carry a red thread integrated

into the composition.
Where appropriate, on Google+ include campaign
creative alongside the Icon.
Pinterest profile account names and profile pictures
should follow the guidelines.
Content should follow the conventions of the
platform and feature lifestyle shots and must have
products, all displayed at the highest resolution.

Pinterest
Google+

Sections: 0 1 2 3 4

24

4.

Vodafone Visual Identity

Digital guidelines

Emails and newsletters

4.1 Editorial

26

Sections: 0 1 2 3 4

25

4.1

Vodafone Visual Identity

Digital guidelines

Emails and newsletters

Editorial
Use the Rhombus on the left hand side in the main
header of email templates. For emails, there are 5
types of module that you can use. The first module
should always be the 'Intro' module. Content
modules that follow are 'Sales', 'Editorial', 'Account'
and 'Social & Legal' which should always appear last.

Intro module

Editorial module

Account module
Social & Legal
module

Sections: 0 1 2 3 4

26