DIGITAL GUIDELINESBLACK, SPARKLING, ELEGANT

BASIC ELEMENTS1

1.1 Logo Web

1.2 Digital Fonts

1.3 Colours

1.4 Titoli, Elementi grafici, stili ed effetti

LOGO WEB1.1

Logo WebE’ ammessa unicamente per uso WEB una versione particolare del logo Pirelli, rielabo-rata sulla base del Logo istituzionale.

LOGO ISTITUZIONALE

LOGO WEB

LOGO 3D

DIGITAL FONTS1.2

GRAPHICAL FONTS

Helvetica Neue 65 MediumABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Helvetica Neue 76 Bold ItalicABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Helvetica Neue 86 Havey ItalicABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Helvetica Nueu 96 Black ItalicABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Helvetica Neue 75 BoldABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Helvetica Neue 85 HaveyABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Helvetica Neue 95 BlackABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

HTML FONTS

Arial RegularABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Arial BoldABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Helvetica Neue 66 Medium ItalicABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

FontsI fonts scelti per il sito web sonol’HELVETICA NEUE and ARIAL.HELVETICA NEUE è consentito in tutti gli stili, a partire dal 65 Medium al 95 Black,incluse le varianti Italic. E’ utilizzatounica mente per testi in grafica.Il font ARIAL è utilizzato per tutti i testi in HTML, nella sua versione BOLD oREGULAR.

COLOURS

WHITE

#ffffff

BLACK

#f1d93c

RED

#db1919

DARK GREY

#2a2a2a

GREY

#555555

GRADIENTS

#ffffff

#bbb7b6

#fff170

#f7c700

#f7cfcf

#e11818

#504f4b

#1b1613

#e0e0e0

#a6a6a6

COLOURS1.3

Colours

Il total Black è l’anima del sito. Altri colori come il rosso e il grigio, possono essere utilizzati per gli elementi funzionali (bottoni, frecce, menu)

Per garantire pulizia e leggibilità dei testi, il corpo pagina è generalmente bianco, con una leggera sfumatura grigia.

I testi possono variare dal grigio al nero, conl’utilizzo particolare del rosso per i link.

Questa sezione contiene i valoriesadecimali dei colori consentiti

LIGHT GREY

#d5d5d5

TITOLI, ELEMENTI GRAFICI, STILI ED EFFETTI1.4

Titoli di sezioneI titoli di sezione presentano uno stile grafico particolare.

E’ sufficiente selezionare l’effetto GRADIENT OVERLAY dal pannello LAYER e seguire le impostazioni indicate nella finestra disettaggio a sinistra.

TITOLI DI SEZIONE/ TITOLI VISORI

#ffffff#bbb7b6Helvetica Neue 95 Black, 40 pt

TITOLI, ELEMENTI GRAFICI, STILI ED EFFETTI1.5

Titoli VisoriE’ possibile utilizzare all’interno del sito titoli su due righe. In questo caso la seconda riga presenta un effetto gradient overlaydifferente rispetto ai titoli di sezione.

TITOLI DI SEZIONE/ TITOLI VISORI

# f26969 #da1818Helvetica Neue 95 Black

TITOLI, ELEMENTI GRAFICI, STILI ED EFFETTI1.6

Icon and ButtonsTutti i bottoni del sito presentano lo stesso stile grafico. E’ ammessa una variazione in altezza/larghezza a seconda dellalunghezza del testo contenuto all’interno del bottone.

ICONOGRAFIAPresentiamo un esempio della gamma icone utilizzate all’interno del sito. Non esistono vincoli particolari per la creazione di nuove icone, è sufficiente osservare 3 regole base per seguire il look & feel del sito:

1. rounded shape2. glossy effect3. illustrated content

BOTTONI E LINK

ICONE

I bottoni in pagina sono rounded rectangular shape con radius di 3 px.

I colori ammessi sono rosso e nero per il fondo. E’ previsto un particolare effetto grafico “glossy”

che si ottiene aggiungendo un livello di gradiente da bianco a trasparente tagliato alla metà del bot-

tone.

Il font utilizzato può essere HELVETICA NEUE 85 HEAVY 12px o ARIAL 12px

MAIN TEMPLATES2

2.1 Struttura della pagina

2.2 HOMEPAGE

2.3 INDEX pages

2.4 PRODUCT pages

2.5 Family Pages

2.6 Special template

STRUTTURA DELLA PAGINA2.1

TOOLBAR

MENU PRINCIPALE

QUICK LINKS

FOOTER E SEARCH TOOL

CORPO PAGINA

HOMEPAGE2.2

Struttura della paginaLa pagina è organizzata secondo una strut-tura orizzontale, che definisce i contenuti secondo diversi livelli di lettura.TOOLBAR

MENU PRINCIPALE

VISORE FLASH

LANCI PRINCIPALI

NOTIZIE

MEDIAGALLERY PLAYLIST

QUICK LINKS

FOOTER E SEARCH TOOL

HOMEPAGE2.3

Visore Flash Il visore flash presenta uno slideshow di im-magini con relativi link.

Il contenuto testuale è gestito tramite XML, mentre l’immagine di sfondo va preparata in formato JPG e prevede generalmente un fondo nero (eventualmente con aree di luce colorata) ed una parte di visual posizionata a destra.

TITOLO

ABSTRACT

ESEMPIO PREPARAZIONE IMMAGINIDIMENSIONI: 916x443 pixels

HOMEPAGE2.4

Lanci PrincipaliI box full image vanno preparati seguendo le linee guida del psd di riferimento. Anche qui il colore dominante è il nero. L’area dedicata all’immagine è posizionatasempre sulla parte destra del box. E’ consentito uno sfondo colorato o con immagine, purchè non interferisca con la leggibilità del testo.

Titolo ed abstract hanno posizioni stabilite e ben precise

29 pxI Box in homepage hanno una dimensione di 300x150 px. La distanza dal bordo grigio al titolo è di 29 px

Il titolo è generalmente diviso in due righe la prima in HELVETICA NEUE 95 BLACKla seconda in HELVETICA NEUE 95 BLACKcon gradiente che va da #ffffff a #bbb7b6

L’abstract è in HELVETICA NEUE 65 MEDIUMcolore #d5d5d5 con un 80% di trasparenza

E’ possibile prevedere titoli su una riga sola, come in questo caso

Gli oggetti sono scontornati e posizionati su sfondocon effetto fumo. Il colore del “fumo” può variarea seconda di tonalità particolari dell’immagine.

INDEX PAGES3

Le Index PagesOgni sezione del sito (CAR, MOTO, TRUCK&BUS, AGRO e MOTORSPORT) ha una index page diversa dalle altre.

Questo permette di dare maggioreflessibilità e di presentare i contenuti iden-tificativi di ogni segmento in modo unico.

INDEX PAGES3.1

CAR Come per tutte le pagine del sito, il titolo presente nell’Header di sezione è in grafica. Per le specifiche si rimanda al capitolo 1.4 del manuale.

Il template CAR prevede un visore realiz-zato in FLASH+HTML con i tre accessi alle diverse aree del catalogo

Un carousel HTML presenta invece i lanci di prodotto.

A fondo pagina, è prevista un’area dedicata a lanci particolari quali PROMO e iniziative speciali.

HEADER DI SEZIONE

LINK AREECATALOGO

LANCI PRODOTTO

LANCI ADV

>

Esempio lancio di prodotto: dimensioni 268×62 pixel

LOGO IMMAGINE PRODOTTO 3/4

Esempio utilizzo immagine a tutto sfondo.E’ possibile usare immagini di sfondo che vadano a sfumare a nero da dx a sx

INDEX PAGES3.2

MOTORCYCLECome per tutte le pagine del sito, il titolo presente nell’Header di sezione è in grafica. Per le specifiche si rimanda al capitolo 1.4 del manuale.

Il template MOTORSPORT prevede un visore realizzato in FLASH con una doppia modalità di navigazione (pagina seguente per approfondimenti)

Un carousel HTML presenta i lanci di prodotto.

A fondo pagina, è prevista un’area dedicata alle news testuali e a lanci particolari quali PROMO e iniziative speciali.

HEADER DI SEZIONE

VISORE FLASH

LANCI PRODOTTO

NEWS

MEDIAGALLERY

L’immagine a destra è una PNG trasparente 37x37 pxcon effetto glossy e spigoli con stondatura 3 px

IMMAGINE TESTO HTML

>

INDEX PAGES3.3

MOTORCYCLE/ Il Visore Il visore flash della index Motorcycle pre-senta una doppia funzionalità:

- SLIDESHOW automatico di lanci ADV e PROMOZIONI

- FILTRO di accesso al catalogo prodotti al quale si accede cliccando sul Menu Segmenti

MENUSEGMENTI

LANCIO ADV

ESEMPIO VISORE DEDICATO SEGMENTO

Ogni segmento presenta un’immagine di sfondo: l’immagine di sfon-do va preparata in formato JPG e prevede generalmente un fondo nero (eventualmente con aree di luce colorata) ed una parte di visual posizionata a sinistra. Il testo è gestito invece tramite XML

ROLLOVER

VISORE IN MODALITA’ SLIDESHOW

VISORE IN MODALITA’ ACCESSO SEGMENTI

INDEX PAGES3.4

TRUCK ll template TRUCK & BUS prevede un visore realizzato in FLASH (vedi pagina suc-cessiva per dettagli)

Il corpo pagina presenta una serie di lanci, disposti su due livelli di importanza.

HEADER DI SEZIONE

VISORE FLASH

LANCIPRINCIPALI

LANCISECONDARI

INDEX PAGES3.5

TRUCK/ Il Visore

Il visore flash della index Truck & Bus ha una singola funzionalità:

- FILTRO di accesso al catalogo prodotti al quale si accede cliccando e scegliendo la propria applicazione e severità

ESEMPIO VISORE DEDICATO A SEGMENTO

Ogni Severity presenta un’immagine di sfondo: l’immagine di sfondo va preparata in formato JPG e prevede generalmente un fondo nero (eventualmente con aree di luce colorata) ed una parte di visual posizionata a sinistra. Il testo è gestito invece tramite XML

SEGMENTI SEVERITÀ E APPLICAZIONE

VISORE SEGMENTI APPLICAZIONE, SEVERITÀ

INDEX PAGES3.6

MOTORSPORT Come per tutte le pagine del sito, il titolo presente nell’Header di sezione è in grafica. Per le specifiche si rimanda al capitolo 1.4 del manuale.

Il visore principale può essere un’immagine o un flash, non presenta attualmenteelementi di navigazione.

Il corpo pagina presenta una serie di lanci, disposti su due livelli di importanza.

A fondo pagina, è prevista l’area dedicata alla MEDIAGALLERY .

HEADER DI SEZIONE

VISORE FLASH

LANCI PRODOTTO

MEDIAGALLERY

LANCIPRINCIPALI

PRODUCT PAGES4

Il CatalogoIl Catalogo prodotti è costituito da un unico template valido per tutti i segmenti i cuielementi fondamentali sono la TOOLBAR dei filtri e le anteprime di prodotto.

Lo sfondo delle thumbnail presenta un effetto “fumo” declinato a seconda della tipologia di prodotto:

GRIGIO: tutti i prodottiVERDE: prodotti Green performanceAZZURRO: prodotti WINTER

Per la lavorazione delle immagini, fare riferimento al file .psd sorgente

LOGO PRODOTTO

IMMAGINE PNEUMATICO

SPAZIO ICONE E LINK A SCHEDA

PRODUCT PAGES4.1

Scheda prodotto/1

La scheda prodotto è il cuore del nuovo sito Pirelli: la completezza e la coerenza grafica dei contenuti sono fondamentali.

Il menu principale della scheda prodotto può comunque contenere un numero variabile di voci, in base chiaramente ai contenuti disponibili.

Il pannello battistrada ha una propria par-ticolare costruzione, illustrata nella pagina seguente.

LOGO PRODOTTODIMENSIONE MAX: ( 500x19 px)

MENÙ

PANNELLO BATTISTRADA

IMMAGINE PRODOTTOFormato SWF 383x550 px

Per la preparazione dei materiali fare riferimento ai sorgenti .fla forniti

AREA TOOLS

PRODUCT PAGES4.2

Pannelli battistrada ll pannello battistrada è composto da due aree principali:

- BATTISTRADA- ICONOGRAFIA

A seconda della sezione, il pannello battis-trada contiene elementi diversi e presenta caratteristiche particolari.

A titolo di esempio presentiamo i quattro diversi utilizzi

CAR

MOTORCYCLE

TRUCK

MOTORSPORT

PRODUCT PAGES4.3

Tyre Details Il template contiene le informazioni di ap-profondimento sul singolo prodotto.

Nella sezione CAR, è prevista un’area dedi-cata al dettaglio del battistrada: l’immagine può essere preparata secondo due diverse modalità (FAR VEDERE ANCHE ESEMPIO DI PZERO CORSA SYSTEM): la dimen-sione rimane comunque la medesima

FORMATO 383x550 px

TABELLE PRESTAZIONI

PRODUCT PAGES4.4

Test Results Il template contiene le informazioni dei test applicati sugli pneumatici Pirelli.

Nella sezione, è prevista un’area dedicata alle informazioni dei test e le informazioni relative a chi ha eseguito il test.

PANNELLO RISULTATI TEST

IMMAGINE LOGO MAGAZINEFormato Max 95x60 px

PRODUCT PAGES4.5

Fit on your Car Il template tool di ricerca per trovare lo pneumatico adatto per il tuo veicolo.

Nella scheda è presente un’immagine dell’auto selezionata e un’immagiane del prodotto, che vanno preparate seguendo le linee guida del psd di riferimento.

In basso sono presenti i prodotti correlati.

IMMAGINE PRODOTTOFormato 162x160 px

IMMAGINE DELL’AUTO SELEZIONATAFormato 344x215 px

PRODOTTI CORRELATI

FAMILY PAGES5

Scheda Famiglia Il template FAMIGLIA presenta un visore principale ed un corpo pagina con il menu di secondo livello gestito a TAB.

A fondo pagina è presente l’area dedicata al tyre range.

VISORE

MENÙ A TAB

Il colore sello sfondo può variare a secona della familgia.

PRODOTTI CORRELATI

TEMPLATE SPECIALI6

Template Magazine Il contenuto della sezione magazine è un full flash della dimensione di:...

L’immagine di copertina deve avere una dimensione di 325x435 px

FLASH

NEWSLETTER7

NEWSLETTER Il format Newsletter prevede preferibilmente l’utilizzo del total black e di un colore pre-dominante.

La struttura prevede tre diversi livelli di let-tura, illustrati nello schema a lato.

Per mantenere la coerenza grafica con il look & feel del sito, è importante inoltre uti-lizzare, ove possibile, immagini scontornate.

LANCIOPRINCIPALE

LANCIOSECONDARIO

LANCIPRODOTTI

HEADER

VIDEO FORMAT8

Video Format Requirements

Formato 16:9HD quality

VIDEO FORMAT8.1

Video Format:the standard Il format video prevede un’apertura ed una chiusura standardizzate.

Per il montaggio di più scene è preferibile utilizzare transizioni semplici e non artifi-ciose, una semplice assolvenza mantiene pulito ed elegante il ritmo del video.

Il Voice Over è preferibile ai sottotitoli, nel caso in cui si debbano predisporre versioni in lingua.

OPENING LOGO PIRELLI1’’

TITLE Helvetica Neue Black max. 42 px

SUBTITLEHelvetica Neue Regular 14 px

FROM 6’’ TO 15’’

NOTA Per i sottopancia utilizzareNOME: Helvetica Neue BOLD 14 px CARICA: Helvetica Neue REG 14 px