PIRELLI TYRE wEbsITE GUIDELINEsf1pressarea.pirelli.com/wp-content/files/2013/03/Guidelines... · cONTENT DELIVERY pROcEss 6. cONTAcTs. 1. bRaND IDENTITY oVERVIEw Draft Version under

PIRELLI TYRE wEbsITE GUIDELINEs

Draft Version under final approval

PIRELLI TYREwww.pirelli.com


INTRoDUcTIoN

This document sets forth and defines the main guidelines for the Pirelli.com website. Local teams and digital agen-cies are hereby provided the milestones to define special projects within Pirelli’s digital properties in the world.

DIscLaImER

Text, images and trademarks displayed in the screenshot shall be considered a sample for layout purposes only.



INDEx

1. BRAND IDENTITY OVERVIEW1.1 Logo1.2 Colors and gradients1.3 Box style1.4 Fonts

2. DIGITAL IDENTITY ELEMENTs2.1 Icons and buttons2.2 Links2.3 Image style2.6 Text Style

3. DIGITAL cONTENT 3.1 Image type

4. pROjEcT AcTIVATION AND OpERATIONs 4.1 Homepage

4.2 Index Auto4.3 Index Moto4.4 Special templates4.5 Newsletter

5. cONTENT DELIVERY pROcEss

6. cONTAcTs

1. bRaND IDENTITY oVERVIEw




1. bRaND IDENTITY oVERVIEw

1.1 Logo 1.1.1 - Institutional logo 1.1.2 - Logo with payoff 1.1.3 - Brand layout 1.1.4 - Constraints

1.2 colors and gradients 1.2.1 - Images 1.2.2 - Text

1.3 Box style 1.3.1 - Frames 1.3.2 - Texture and background 1.3.3 - Shadows and effects

1.4 Fonts 1.4.1 - Graphic text, title and Html text 1.4.2 - Title, subtitle and Html title

PIRELLI TYREDIGITaL GUIDELINEs


6

INsTITUTIoNaL LoGo

Two solid colors: red and jellow.To be used for all digital communication projects in compliance with Pirelli’s institutional guidelines.

Logobrand identity overview

LoGo wITh PaYoff

This Logo must always be used either on black background or a background color dark enough to aloow the white payoff readability.



7

bRaND LaYoUT

The Pirelli Brand is made by joining together the red Pirelli logo to a jellow rectangle.The jellow background surface is the Pirelli brand constraint area.

coNsTRaINTs

Any text and/or graphic element must be plced beyond an ideal frame around the brandname. Compliance with this constraint allows to avoid any graphic interference. Sizes are the same for the constraint area for the RED PIRELLI brandname.

For futher details on the use of the Logo and other Pirelli Identity elements, please refer to the Brand Guidelines official document.

Logobrand identity overview



8

coLoRs aND GRaDIENTs IN ImaGE aND TExT

The website has a black background and content is mainly placed within gray graphic elements. Other colors such as red and jellow can be used for graphic and functional elements (diagrams, menues, icons, buttons) while blue and green are mainly used for content related to Pirelli Winter and Green Performance respectively. To guarantee text readability, the page body is ususally dark and possibily with a slight grey shade. Texts may vry from grey to white and redi s to be used for text links.

This section contains exadecimal values for approved colors.

white

#ffffff

black

#000000

Red

#d52b1e

daRk gRey

# 1e1e1e

gRey

#555555

#ffffff

#bbb7b6

#fff170

#f7c700

#939393

#2b2826

#dbeabf

#43ad49

#e52125

#a10c10#afafaf

#1b1613

light gRey

#dddddd

coLoRs

GRaDIENTs

yellow

#fed100

gReen

#43ad49

blue

#0672b0

#a2dbe1

#0672b0

Colors and gradientsbrand identity overview



9

fRamEs

Content to be fully detailed must always be placed in to a box. Based on how the content must be highlighted, all boxes may have a frame of a different thickness (min. 1 px to a max of 5 px) with a gradient ranging from lightest on the left top corner to darkest on right low corner.

fRamE GRaDIENT backGRoUND GRaDIENT

#afafaf

#1b1613

5px 1px

TExTUREs aND backGRoUNDs

To make mainly white texts readable, all boxes must have a dark background. If no images are to be placed in the box, the shade of color similar to the one for the frame must be used, yet beginning with a darker tone and ending with a lighter. To make boxes look threedimensional, some textures can be added.

#939393

#2b2826

Box stylebrand identity overview

Bg for viewers Skin section F1 BgTyre Click & Find Hp



10

shaDows aND EffEcTs

Box must always have a light spot on the top left corner that can be a slanted triangular cut and/or a horizontal strip-like cut alonf the top side of the box. Content on the lighter area of the box must bear a shde ensuring their readability.

Box stylebrand identity overview



11

foNTs

Only fonts allowed: Gotham: Light – Book – Medium Arial: Regular – BoldGotham is used for headlines and calls to action in the graphic elements. Arial must be used for all HTML texts used for indexing on all search engines.

GRaPhIc TExT: GoTham

Used for titles, calls to action and texts present in all graphic elements.

Gotham LightABcDEFGhIjkLMNOpqRsTuVWxYz abcdefghijklmnopqrstuvwxyz 1234567890

Gotham BookabcDEfGhIjkLmNoPqRsTUVwxYz abcdefghijklmnopqrstuvwxyz 1234567890

Gotham MediumabcdefGhijklMnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890

Gotham BoldaBcdefGhijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890

Gotham BlackaBcdefGhijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890

TITLE, sUbTITLE aND hTmL: aRIaL

Used for all HTML texts

Arial RegularABCDEFGHIjkLMnOPqRSTUvWxyz abcdefghijklmnopqrstuvwxyz 1234567890

Arial BoldABcdefghijklmnopqrstuvwxyz abcdefghijklmnopqrstuvwxyz 1234567890

fontsbrand identity overview

2. DIGITaL IDENTITY ELEmENTs




2. DIGITAL IDENTITY ELEmENTs

2.1 Icons and buttons 2.1.1 - Icon 2.1.2 - Call to action buttons 2.1.3 - Filter buttons

2.2 Links 2.2.1 - Textual 2.2.2 - Graphical

2.3 Image style 2.3.1 - Slip box 2.3.2 - Full image box 2.3.3 - Not allowed style

2.6 Text style 2.6.1 - Section titles 2.6.2 - Viewer titles



14

Icons and buttonsDigital identity elements

IcoNs

For new Icons, just follos the three basic rules below to comply with the website look&feel:

1. Icons are ususally into a square box with rounded corners with a ray of 3px and minimum size of 40x40px

2. Background is always a plain color with a slight glossy effect by adding one gradient level from white to transparent

3. Icons must always bear a white image if backgrund is in color

3D Icons cannot be used, except for TRUCk Icons from the tread panel.

The only cases an Icon can be used outside a 40x40px square box is when it is already part of a layout already inside a box.



15

bUTToNs

All Buttons must have the same graphic style. A change of height/width is possible based on the text length inside the Button. Two categories are allowed: CALL TO ACTIOn and FILTERS

CALL TO ACTIOn BUTTOnS can be either black or grey with a glossy effect made by adding one level of white to transparent gradient level cut at half length of the Button.Corners are always rounded with a 5px ray and the text inside must all be written in capital Gotham Book o Medium 12 pt white (#fffff), except those cases in which the Button is jellow and text is black (#000000)

Filters are rectangular with an inner grey stroke of 2px (#cececd), colors are grey (inactive filter) and red (active filter). Glossy effect is added with ARIAL Bold max 12px font.

caLL To acTIoN fILTER

Icons and buttonsDigital identity elements

fIT oN YoUR caR

comPaRE TYREs

cLIck To aDD a NEw TYRE

sUmmER

wINTER



16

TExTUaL LINks

GRaPhIcaL LINks

All text links are html Arial and always followed by the major symbol written in FS ALBERT.

Symbol size varies based on text size and cannot be smaller than 18px.

All graphic links may also be written in Gotham in line with the sizes that best suit the graphics of the link. Text must all be in capital letters and with a few exceptions, letters must be white on black background.

This link is usually coupled to an Icon with a content symbol.

LinksDigital identity elements



17

ImaGE sTYLE

Objects edges are slightly deckled and placed on a neutral background where other effect, such as smoke, light beams or thick textures can be added. “Smoke” may vary according to tones of image.

Title Gotham Black 20 ptSubtitle Gotham Black 13 ptSpace 10 px

Abstract Arial regular 12 ptArrow FS Albert Bold 18 pt

Top distance 13 pxTitle Gotham Bold 20 pt

Space 10 px

Abstract Arial regular 12 ptArrow FS Albert Bold 18pt

Image styleDigital identity elements

box TITLE + absTRacT

box TITLE + sUbTITLE + absTRacTTop distance 13 px



18

As an option to declked images, full image boxes can be used. Main color: black. Color or image background allowed if not interfering with text.




19

NoT aLLowED sTYLE

In major visuals, images must not be used with raw background cuts.

Background cannot be out of con-text.

no backgound color is allowed. In the event an image composite is used, proportions among image ele-ments must be complied with.

waRNING




20

sEcTIoN TITLEs

Section titles have a specific graphic style.

Select the GRADIEnT OvERLAy effect from the LAyER panel and follow the instructions indicated in the left set-ting window.Gotham Black, 40 pt

color: #ffffff

Gotham Book, 24 pt color: #bbb7b6

Text styleDigital identity elements

truck & Bus woRLD



21

VIEwER TITLE

Titles on two lines can be used in the website.

The second line has a gradient overlay effect different than the section titles.

There is no standard font size, since it varies according to text length. The range set should not be exceeded.

Gotham Black, 40 -> 50 px // color: # f26969

Gotham Black, 30 -> 40 px // color: #da1818

Text styleDigital identity elements

innovationBy experience

3. DIGITaL coNTENT




3. DIGITAL CoNTENT

3.1 Image type



24

ImaGE TYPE

The following are the criteria for creative images without materials connected with promotion and/or event:

oRIENTaTIoN fILE TYPE caTEGoRY coLoRs LIcENsE TYPE

portrAit photo ABstAct

BAckground

Automotive

Business

environment

fAshion

people

motorsport

Action

trAnsports

creAtive

editoriAl

lAndscApe illustrAtion

x

x

x

x

x

x

x

Image typeDigital content

x no yes

5. PRojEcT acTIVaTIoN aND oPERaTIoN




5. projECT ACTIVATIoN aND oPERaTIoN

3.1 homepage 3.1.1 - Layout 3.1.2 - Viewer 3.1.3 - Main box

3.2 Index Auto 3.2.1 - Layout 3.2.2 - Main box 3.3 Index Moto 3.3.1 - Layout

3.4 special template 3.4.1 - Index Promotion 3.4.2 - Promotion page

3.5 Newsletter 3.5.1 - Layout



27

Layouts and functional elements through which special ac-tions within the Pirelli.com website can be carried out are he-reby listed. Actions in areas not heerby specifiedis subject to approval by Pirelli Hq.

Layouts special template

AreAs where Actions Are Allowed

AreAs where Actions Are not Allowed

LEGENDa



28

LaYoUT homEPaGE

Horizontal page layout defining content accor-ding to reading levels.

TOOLBAR: Height 37 px

MENU: Height 56 px

viewer: Height 380 px

main box: Height 260 px

seo text

QUICK LINKS

FOOTER E SEARCH TOOL : Height 62 px

Layouts Homepage



29

homEPaGE VIEwER

Homepage viewer in Html. May contain sta-tic images in .jpg or .png, javascript objects and .swf format.To produce viewer, a 374x602 px image is needed with no outer frame. Back visor thumbnails are inserted into a 56px heigth darker strip. Each image has a size of 68x42px and covers a space of 80x56px.

The number of thumbnails in the homepage viewer cannot be less then three and more than five.Local countries may work on a maximum of five viewers and must allow for the space of at least two viewes for worldwide projects defined by Hq.

380 px 374 px

3 px

3 px

3 px3 px

56 px

608 px

602 px

80 px

Layouts Homepage



30

maIN box

Mai boxes on the Homepage center can be edited.The central column is made by two boxes positioned one on top of the other and on special Tyre projects.The functional 300x260px space can be used for a single launch box covering the entire center area.

260 px

918 px

300 px

127 px

127 px

Layouts Homepage



31

LaYoUT INDEx aUTo

The Auto template has a second level Menu se-lection Header and, if needed, a banner space. Below it, thre launches in Flash+Html allowing access to the three different catalogue areas Car, Suv and van.

An Html carousel highlights the Top Range launches

Bottom page: area for specific promotion and special event launches.

section header: height 37 pxsecond level menu: Height 56 px

LINK CATALOGue AreAs: Height 260 px

box ToP range : Height 86 px

box ADV : Height 305 px

Layouts Index auto



32

maIN box268 px

298 px

62 px

141 px

ToP sELEcTIoN box ExamPLE The Top Range launch box must always have a dark background. Product logo on the left and must not exceed 180x50px. Prodcut deckled image must be placed on the right with a smoke, light beam or fire effect to make it glow on the back background.

PRODUCT LOGOmax size

180×50 px

HEADLInE OFCALL TO ACTIOn

PRODCUT IMAGEmax size

140×62 px

PROMOTIOn IMAGE

PRomo box ExamPLE:Size 298px x 141pxDark background, title and call to action on the left and the picture on the right.Background picture shading off in black on the left. In the event of a deckled image, a graphic effect to make it glow must be added.

The Range and Promotional top boxes in the Auto index can be place in other website sections such as MOTO, TRUCk, AGRO AnD MOTORSPORT.

Layouts Index auto



33

LaYoUT INDEx moTo

Moto template with Flash viewer with double sur-fing mode:- Automatic slideshow for Adv and Promotions- Access filter to products catalogue where ac-cess can be made trough Segment Menu

Html carousel with Top range launches.

Bottom page: space for text news and specific contents, such as FB and Mediagallery info.

section header: height 37 pxsecond level menu: Height 56 px

viewer : Height 404 px

box top range : Height 86 px

BOX FACEBOOK: Height 235 px

NEWS: Height 115 px

MEDIAGALLERY: Height 190 px

Layouts Index moto



34

108 px

INDEx PRomoTIoN

Promotions template made of Html viewer with vertical carousel surfing allowing to see all on-going promo-tions.

viewr hosts a general image featuring promotional content in this Section. Layout as follows:Headline on two lines on the top left corner and de-scriptive text below. Left corner below, image to be deckled and graphic efects to be added. Lefto-to-right shadeing off of the image to leave room for carousel covering the entire spece on the right.

Carousel made by a number of horizontal boxes and offering a vertical surfing capability to best view all in-going promotions. In the evento ne promotion only is active, promotion can be placed on this space with no carousel.

viewer : Height 470 px

Layouts special Template

205 px



35

PRomoTIoN PaGE

The Promotions Section detail page must have a static Html viewer highlighting the current pro-motion, while promotion details must be placed below.

Sem traffic pages must always have descriptive text so that Google can doublecheck keywords coherence with content.

Details:Height min 424 px max 454 px

viewer :Height min 308 px max 380 px




36

mENU DI NaVIGazIoNE

First Level Menu for first navigation level in the event of special actions (i.e. Parteneships external to the Pirelli.com website)

Second Level menu for navigation in the special section within the Pirelli.com site and in general during the second navigation level.

Herebelow the definition of the navigation menues through which navigation tools for Pirelli.com can be made (i.e. promotions and events) or for special external programs (i.e. Partenerships, Canvess App, etc.)




37

PRomoTIoN PaGE

The detail section is made of tabs. The first tab is always related to the description of the promotion and the last tab always to the serach for Pirelli de-alers.The tab number varies from three to five accor-ding to the emount of content to be loaded.

TAB: Height 42 px




38

LaYoUT NEwsLETTER

All newsletters must follow the same layout criteria. Black background and texts can be either in whi-te or jellow fonts. The Pirelli logo is on the top left corner, while the web address is positioned on the right.Below the header, a graphic and Html areas.In the graphic area a custom viewer with contents, while the second area conteins text contents and call to action.

HEADER: Height 37 px

viewer

Contents

call to action: Height 190 px

Layouts Newsletter

6. coNTENT DELIVERY PRocEss




40

conceptidea

Functionalanalysis

graphiclayout

online

comPLEx PRojEcT

wireFrame

conceptidea

Functionalanalysis

graphiclayout

online

hIGh ImPacT PRojEcT

wireFrame

HQ

HQ

HQ

HQ

HQ

HQ

Collaboration withthe local agency Hq approval

Content delivery process

conceptidea

Functionalanalysis

graphiclayout

online

sImPLE PRojEcT

wireFrame

HQ

Project phases Online

7. coNTacTs




42

aPPRoVING PRocEss aND coNTacTs

Contacts

PIRELLI DIGITaL maRkETING hq

IT PIRELLI

NURUN

ivana [email protected].:

Aldo [email protected].: 02/64424992

marco [email protected].: 02/83137210


Documents

PIRELLI TYRE wEbsITE GUIDELINEsf1pressarea.pirelli.com/wp-content/files/2013/03/Guidelines... · cONTENT DELIVERY pROcEss 6. cONTAcTs. 1. bRaND IDENTITY oVERVIEw Draft Version under