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