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.
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
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
![[D&D 2e - ITA] [Avventura] - Il Laboratorio](https://imgv2-1-f.scribdassets.com/img/document/263273812/149x198/196e168392/1430153662?v=1)
