DIGITAL GUIDELINES

BLACK, SPARKLING, ELEGANT

BASIC ELEMENTS

1.1 Logo Web 1.2 Digital Fonts 1.3 Colours 1.4 Titoli, Elementi grafici, stili ed effetti

1.1

LOGO WEB

Logo Web
LOGO ISTITUZIONALE
E ammessa unicamente per uso WEB una versione particolare del logo Pirelli, rielaborata sulla base del Logo istituzionale.

LOGO WEB

LOGO 3D

1.2

DIGITAL FONTS

Fonts
GRAPHICAL FONTS

Helvetica Neue 65 Medium

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Helvetica Neue 66 Medium Italic Helvetica Neue 75 Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

I fonts scelti per il sito web sono lHELVETICA NEUE and ARIAL. HELVETICA NEUE consentito in tutti gli stili, a partire dal 65 Medium al 95 Black, incluse le varianti Italic. E utilizzato unicamente per testi in grafica. Il font ARIAL utilizzato per tutti i testi in HTML, nella sua versione BOLD o REGULAR.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Helvetica Neue 76 Bold Italic Helvetica Neue 85 Havey

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Helvetica Neue 86 Havey Italic Helvetica Neue 95 Black

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Helvetica Nueu 96 Black Italic

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

HTML FONTS

Arial Regular Arial Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

1.3

COLOURS

Colours
Il total Black lanima 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, con lutilizzo particolare del rosso per i link. Questa sezione contiene i valori esadecimali dei colori consentiti

COLOURS
WHITE #ffffff DARK GREY #2a2a2a BLACK #f1d93c GREY #555555 RED #db1919 LIGHT GREY #d5d5d5

GRADIENTS
#ffffff #bbb7b6 #fff170 #f7c700 #f7cfcf #e11818

#e0e0e0 #a6a6a6

#504f4b #1b1613

1.4

TITOLI, ELEMENTI GRAFICI, STILI ED EFFETTI

Titoli di sezione
TITOLI DI SEZIONE/ TITOLI VISORI
I titoli di sezione presentano uno stile grafico particolare.

#ffffff #bbb7b6

Helvetica Neue 95 Black, 40 pt

E sufficiente selezionare leffetto GRADIENT OVERLAY dal pannello LAYER e seguire le impostazioni indicate nella finestra di settaggio a sinistra.

1.5

TITOLI, ELEMENTI GRAFICI, STILI ED EFFETTI

Titoli Visori
TITOLI DI SEZIONE/ TITOLI VISORI
E possibile utilizzare allinterno del sito titoli su due righe. In questo caso la seconda riga presenta un effetto gradient overlay differente rispetto ai titoli di sezione.

# f26969 #da1818 Helvetica Neue 95 Black

1.6

TITOLI, ELEMENTI GRAFICI, STILI ED EFFETTI

Icon and Buttons

Tutti i bottoni del sito presentano lo stesso stile grafico. E ammessa una variazione in altezza/larghezza a seconda della lunghezza del testo contenuto allinterno del bottone. ICONOGRAFIA Presentiamo un esempio della gamma icone utilizzate allinterno del sito. Non esistono vincoli particolari per la creazione di nuove icone, sufficiente osservare 3 regole base per seguire il look & feel del sito: 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 bottone. Il font utilizzato pu essere HELVETICA NEUE 85 HEAVY 12px o ARIAL 12px 1. rounded shape 2. glossy effect 3. illustrated content

BOTTONI E LINK

ICONE

MAIN TEMPLATES

2.1 Struttura della pagina 2.2 HOMEPAGE 2.3 INDEX pages 2.4 PRODUCT pages 2.5 Family Pages 2.6 Special template

2.1

STRUTTURA DELLA PAGINA

TOOLBAR MENU PRINCIPALE

CORPO PAGINA

QUICK LINKS

FOOTER E SEARCH TOOL

2.2

HOMEPAGE

Struttura della pagina

La pagina organizzata secondo una struttura 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

2.3

HOMEPAGE

Visore Flash
Il visore flash presenta uno slideshow di immagini con relativi link. TITOLO Il contenuto testuale gestito tramite XML, mentre limmagine 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.

ABSTRACT

ESEMPIO PREPARAZIONE IMMAGINI

DIMENSIONI: 916x443 pixels

2.4

HOMEPAGE

Lanci Principali
I box full image vanno preparati seguendo le linee guida del psd di riferimento. 29 px I 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 BLACK la seconda in HELVETICA NEUE 95 BLACK con gradiente che va da #ffffff a #bbb7b6 Labstract in HELVETICA NEUE 65 MEDIUM colore #d5d5d5 con un 80% di trasparenza Anche qui il colore dominante il nero. Larea dedicata allimmagine posizionata sempre 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

E possibile prevedere titoli su una riga sola, come in questo caso Gli oggetti sono scontornati e posizionati su sfondo con effetto fumo. Il colore del fumo pu variare a seconda di tonalit particolari dellimmagine.

INDEX PAGES

Le Index Pages
Ogni sezione del sito (CAR, MOTO, TRUCK&BUS, AGRO e MOTORSPORT) ha una index page diversa dalle altre. Questo permette di dare maggiore flessibilit e di presentare i contenuti identificativi di ogni segmento in modo unico.

3.1

INDEX PAGES

CAR
Come per tutte le pagine del sito, il titolo presente nellHeader di sezione in grafica. Per le specifiche si rimanda al capitolo 1.4 del manuale. HEADER DI SEZIONE Il template CAR prevede un visore realizzato 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 unarea dedicata a lanci particolari quali PROMO e iniziative speciali.

LINK AREE CATALOGO

LANCI PRODOTTO

>
LOGO IMMAGINE PRODOTTO 3/4

LANCI ADV Esempio lancio di prodotto: dimensioni 26862 pixel

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

3.2

INDEX PAGES

MOTORCYCLE
Come per tutte le pagine del sito, il titolo presente nellHeader di sezione in grafica. Per le specifiche si rimanda al capitolo 1.4 del manuale. HEADER DI SEZIONE 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 unarea dedicata alle news testuali e a lanci particolari quali PROMO e iniziative speciali.

VISORE FLASH

LANCI PRODOTTO

NEWS

>
IMMAGINE TESTO HTML

MEDIAGALLERY

Limmagine a destra una PNG trasparente 37x37 px con effetto glossy e spigoli con stondatura 3 px

3.3

INDEX PAGES

MOTORCYCLE/ Il Visore

VISORE IN MODALITA SLIDESHOW

Il visore flash della index Motorcycle presenta una doppia funzionalit: - SLIDESHOW automatico di lanci ADV e PROMOZIONI - FILTRO di accesso al catalogo prodotti al quale si accede cliccando sul Menu Segmenti

LANCIO ADV

MENU SEGMENTI

VISORE IN MODALITA ACCESSO SEGMENTI

ESEMPIO VISORE DEDICATO SEGMENTO

Ogni segmento presenta unimmagine di sfondo: limmagine 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

ROLLOVER

3.4

INDEX PAGES

TRUCK
ll template TRUCK & BUS prevede un visore realizzato in FLASH (vedi pagina successiva per dettagli) HEADER DI SEZIONE Il corpo pagina presenta una serie di lanci, disposti su due livelli di importanza.

VISORE FLASH

LANCI PRINCIPALI

LANCI SECONDARI

3.5

INDEX PAGES

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

VISORE SEGMENTI APPLICAZIONE, SEVERIT

ESEMPIO VISORE DEDICATO A SEGMENTO

Ogni Severity presenta unimmagine di sfondo: limmagine 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

3.6

INDEX PAGES

MOTORSPORT
Come per tutte le pagine del sito, il titolo presente nellHeader di sezione in grafica. Per le specifiche si rimanda al capitolo 1.4 del manuale. HEADER DI SEZIONE Il visore principale pu essere unimmagine o un flash, non presenta attualmente elementi di navigazione. Il corpo pagina presenta una serie di lanci, disposti su due livelli di importanza. A fondo pagina, prevista larea dedicata alla MEDIAGALLERY .

VISORE FLASH

LANCI PRINCIPALI

LANCI PRODOTTO

MEDIAGALLERY

PRODUCT PAGES

Il Catalogo
Il Catalogo prodotti costituito da un unico template valido per tutti i segmenti i cui elementi 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 prodotti VERDE: prodotti Green performance AZZURRO: prodotti WINTER

LOGO PRODOTTO

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

IMMAGINE PNEUMATICO

SPAZIO ICONE E LINK A SCHEDA

4.1

PRODUCT PAGES

Scheda prodotto/1
La scheda prodotto il cuore del nuovo sito Pirelli: la completezza e la coerenza grafica dei contenuti sono fondamentali. LOGO PRODOTTO DIMENSIONE MAX: ( 500x19 px) MEN 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 particolare costruzione, illustrata nella pagina seguente. PANNELLO BATTISTRADA

IMMAGINE PRODOTTO
Formato SWF 383x550 px Per la preparazione dei materiali fare riferimento ai sorgenti .fla forniti

AREA TOOLS

4.2

PRODUCT PAGES

Pannelli battistrada CAR

ll pannello battistrada composto da due aree principali: - BATTISTRADA - ICONOGRAFIA A seconda della sezione, il pannello battistrada contiene elementi diversi e presenta caratteristiche particolari. A titolo di esempio presentiamo i quattro diversi utilizzi

MOTORCYCLE

TRUCK

MOTORSPORT

4.3

PRODUCT PAGES

Tyre Details
Il template contiene le informazioni di approfondimento sul singolo prodotto. Nella sezione CAR, prevista unarea dedicata al dettaglio del battistrada: limmagine pu essere preparata secondo due diverse modalit (FAR VEDERE ANCHE ESEMPIO DI PZERO CORSA SYSTEM): la dimensione rimane comunque la medesima TABELLE PRESTAZIONI

FORMATO 383x550 px

4.4

PRODUCT PAGES

Test Results
Il template contiene le informazioni dei test applicati sugli pneumatici Pirelli. Nella sezione, prevista unarea dedicata alle informazioni dei test e le informazioni relative a chi ha eseguito il test.

PANNELLO RISULTATI TEST IMMAGINE LOGO MAGAZINE

Formato Max 95x60 px

4.5

PRODUCT PAGES

Fit on your Car

Il template tool di ricerca per trovare lo pneumatico adatto per il tuo veicolo. Nella scheda presente unimmagine dellauto selezionata e unimmagiane del prodotto, che vanno preparate seguendo le linee guida del psd di riferimento. In basso sono presenti i prodotti correlati.

IMMAGINE PRODOTTO
Formato 162x160 px

IMMAGINE DELLAUTO SELEZIONATA

Formato 344x215 px

PRODOTTI CORRELATI

FAMILY PAGES

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 larea dedicata al tyre range. VISORE

MEN A TAB
Il colore sello sfondo pu variare a secona della familgia.

PRODOTTI CORRELATI

TEMPLATE SPECIALI

Template Magazine
Il contenuto della sezione magazine un full flash della dimensione di:... Limmagine di copertina deve avere una dimensione di 325x435 px

FLASH

NEWSLETTER

NEWSLETTER
Il format Newsletter prevede preferibilmente lutilizzo del total black e di un colore predominante. La struttura prevede tre diversi livelli di lettura, illustrati nello schema a lato. Per mantenere la coerenza grafica con il look & feel del sito, importante inoltre utilizzare, ove possibile, immagini scontornate. HEADER

LANCIO PRINCIPALE

LANCIO SECONDARIO

LANCI PRODOTTI

VIDEO FORMAT

Video Format
Requirements Formato 16:9 HD quality

8.1

VIDEO FORMAT

OPENING LOGO PIRELLI 1

Video Format: the standard

Il format video prevede unapertura ed una chiusura standardizzate. Per il montaggio di pi scene preferibile utilizzare transizioni semplici e non artificiose, 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.

TITLE Helvetica Neue Black max. 42 px SUBTITLE Helvetica Neue Regular 14 px FROM 6 TO 15

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