[
Scuola Internazionale di Comics // a.a. 2011-2012 // Grafica pubblicitaria 3 Workshop/Concorso "Portale Giovani di Firenze" Docenti: Giuditta Valentina Gentile + Giada Bargellini // Software: Adobe CS 5.5
▸ Indice
✒ 05
07
Introduzione > Programma didattico
14
Parte 1 > Logotipo → Proposte vettoriali → Proposta tipografica
15
37
39
47
8 14
Appendice 1 > Manuale di stile
Parte 2 > Template sito → Sito originale
40
→ Home
42
→ CartaGiò
44
Introduzione
Programma didattico del workshop
Il progetto si basa sul restyling del coordinato visivo del Portale Giovani di Firenze. La proposta grafica di restyling comprende la realizzazione del nuovo logo e la sua testata, con relativo template grafico per il sito web. Il progetto consiste nell'attivazione di un laboratorio di 30 ore, coordinato da due docenti del dipartimento di grafica pubblicitaria della Scuola Internazionale di Comics di Firenze: Giuditta Valentina Gentile (visual design) e Giada Bargellini (web design). Il workshop si articola in 10 incontri, ciascuno di 3 ore. Per ampliare l'esperienza del progetto-concorso, è stato inserito un laboratorio di tipografia tradizionale, dalla quale sarà tratta una proposta di logotipo, realizzato su carta e con caratteri mobili.
❯ Programma
1. Brainstorming (incontro con il committente e presentazione del progetto da parte del personale addetto alla gestione del Portale, Ufficio Politiche Giovanili) 2. Prima ipotesi di logo e concept delle testata 3. Laboratorio in tipografia – esperienze su carta, con inchiostri e caratteri tipografici (Tipografia Sociale di Arezzo) 4. Definizione/digitalizzazione del logo e della testata, con stesura del manuale di stile 5. Presentazione delle proposte (logo / testata / manuale di stile) 6. Realizzazione del template grafico dell'home-page del sito 7. Realizzazione del template per la pagina secondaria relativa a CartaGiò 8. Realizzazione del template per la pagina terzaria relativa a CartaGiò - Sconti e promozioni 9. Correzioni e revisione del progetto 10. Definizione e consegna del template per il sito
✎ Stefania Pizzichi / Scuola Internazionale di Comics
☞
Parte 1 > Logotipo
▸ Parte 1 > Logotipo Proposte vettoriali Proposte di logotipi con lettering vettoriale, creati dalla scomposizione delle singole lettere. I font selezionati sono o molto tondeggianti, o molto geometrici. L'ultima proposta è, invece, ispirata alla "Pixel Art", di linguaggio giovanile e molto di moda fra le nuove generazioni.
ANI PROPOSTE DI LOGOTIPO
Stefania P
☞ Portale Giovani
8→9
Proposte vettoriali Proposte di logotipi ispirati al 3d, tema molto conosciuto tra i giovani. Ho creato delle lettere con diversi stili 3d, per fare delle variazioni sulla stessa tipologia di concept. I colori usati sono quelli suggeriti dal committente del progetto (il rosso e il viola sono cromie tipiche di Firenze).
✎ Stefania Pizzichi / Scuola Internazionale di Comics
â–¸ Parte 1 > Logotipo Proposte vettoriali Logotipi ispirati a: balloon, scarabocchi e etichette retro; tutti elementi visivi familiari, dal mood fresco e giovanile.
☞ Portale Giovani
10 → 11
Proposte vettoriali scelte Le due proposte vettoriali scelte, su cui ho creato la testata del sito.
Proposta vettoriale A
Proposta vettoriale B
✎ Stefania Pizzichi / Scuola Internazionale di Comics
▸ Parte 1 > Logotipo Proposta vettoriale A - Testata
In questo compositing ho usato gli elementi costitutivi delle singole lettere del logotipo. Le cromie rispettano quelle usate nel logo. Sotto, nel riquadro, l'aspetto della testata, all'interno di una locandina fittizia.
☞ Portale Giovani
12 → 13
Proposta vettoriale B - Testata Per questa proposta ho utilizzato diversi elementi, visivamente esterni al concept del logotipo. Questi elementi hanno forme semplici (frecce, triangoli e manine) e per questo, sono facili da ricordare. Sotto, nel riquadro, l'aspetto della testata, all'interno di una locandina fittizia.
PG
PORTALE GIOVANI
✎ Stefania Pizzichi / Scuola Internazionale di Comics
▸ Parte 1 > Logotipo Proposta tipografica Questo logotipo è il risultato della digitalizzazione del lavoro svolto in tipografia con caratteri mobili e carta. è la proposta che - in accordo con il docente - ho presentato ed è, quindi, su questa proposta che ho sviluppato il manuale di stile (Appendice 1).
☞ Portale Giovani
Appendice 1. MANUALE DI STILE
Appendice 1 ▸ Indice del manuale di stile
19
29
Capitolo 1 > Logotipo → Tecnica utilizzata
31
35
33
37
20
→ Manifesto realizzato
21
→ Versione in bianco e nero
22
→ Versione a colori
23
→ Ridimensionamenti
24
→ Area di rispetto
25
→ Usi corretti e scorretti
26
→ Caratteri tipografici
28
Capitolo 2 > Testata → Elementi
32
→ Mock-up
33
Capitolo 3 > Gadget → Segnalibro
36
→ T-shirt
37
✒
☞ Capitolo 1 > Logotipo
▸ Capitolo 1 > Logotipo Tecnica utilizzata La tecnica utilizzata per la realizzazione del logotipo è tramite l'uso dei caratteri mobili (esempi di quest'ultimi nelle figure: a,b e d). Il procedimento di stampa consiste nell'allineare i singoli caratteri - in modo da formare una pagina - cospargerli di inchiostro e pressarli su un foglio di carta tramite il "tirabozze" (fig. c). Tramite questo processo si hanno effetti sempre diversi, e ogni stampa diventa un pezzo unico. Le lettere non possiedono la fredda perfezione del tipico tratto digitale e questa peculiare imperfezione dona una senzazione di artigianalità, aspetto fondamentale della cultura fiorentina. Successivamente ho fotografato i poster, da cui ho ripreso le lettere che mi servivono per creare la scritta "Portale giovani" e alcuni simboli tipografici.
a
c
b
☞ Portale Giovani
d
20 → 21
Manifesto realizzato Risultato della tecnica precedentemente descritta è questo manifesto. Una volta fotografato e portato in digitale, lo si può modificare liberamente, sia per la disposizione degli elementi (caratteri e simboli) sia per il colore. Da questo poster, quindi, ho ripreso gli elementi costitutivi del logotipo (prevalentemente nelle aree "a" e "b", ovvero la scritta "Portale Givani" e qualche simbolo tipografico). Successivamente ho ridisposto ad hoc quest'ultimi, con il fine di garantire al marchio una buona leggibilità.
a
b
✎ Stefania Pizzichi / Scuola Internazionale di Comics
▸ Capitolo 1 > Logotipo Versione in bianco e nero Le due versioni in bianco e nero (positivo e negativo) sono da utilizzare ai fini di stampa a un colore, come p.e. fotocopie, fax e timbri.
ℹ Stampa offset: l'immagine del logotipo deve essere in quadricomia, con il profilo colore
definito dalla tipografia.
Stampa digitale: consiglio di presentare il documento in RGB, previa dichiarazione della tipografia/copy store. In entrambi i casi, possibilmente, è preferibile tarare il logotipo in nero ricco, ovvero: C 100 - Y 100 - M100 - K100.
ℹ Web: l'immagine del logotipo deve essere in RGB, con profilo colore "sRGB IEC61966-2.1".
Positivo
Negativo
☞ Portale Giovani
22 → 23
Versione a colori La versione a colori si può utilizzare in tutte le applicazioni, spaziando dal cartaceo al web.
ℹ Stampa offset: l'immagine del logotipo deve essere in quadrcomia, con il profilo colore
definito dalla tipografia.
Stampa digitale: consigliamo di presentare il documento in RGB, previa dichiarazione della tipografia.
ℹ Web: l'immagine del logotipo deve essere in RGB, con profilo colore "sRGB IEC61966-2.1".
Rosso dominante
Rosso chiaro
RGB: 228 - 15 - 15 CMYK: 0 - 97 - 100 - 1
RGB: 245 - 60 - 55 CMYK: 0 - 85 - 74 - 0
Rosso scuro
Rosso intermedio
RGB: 100 - 5 - 5 CMYK: 35 - 100 - 100 - 58
RGB: 150 - 6 - 6 CMYK: 25 - 100 - 100 - 30
Palette colori Rosso scuro
Rosso intermedio
Rosso dominante
Rosso chiaro
✎ Stefania Pizzichi / Scuola Internazionale di Comics
▸ Capitolo 1 > Logotipo Ridimensionamenti Le dimensioni massime del logotipo, a 300 dpi, sono di b 36,5 x h 10 cm, mentre le dimensioni minime (per garantire la leggibilità) sono di b 25 x h 6,8 mm. Il logotipo è comunque ridimensionabile in qualsiasi modo, purchè si rispetti la qualità e le proporzioni dell'immagine.
ℹ Larghezze minime raccomandate per formato: A3 → 80 mm | A4 → 50 mm | A5 e DL → 35 mm.
Dimensioni minime l = 25 mm
l = 55 mm
l = 100 mm
☞ Portale Giovani
24 → 25
Area di rispetto L'area di rispetto corrisonde all'ingombro intero del marchio (indicato dal tratteggio) che non è possibile invadere con la giustapposizione di altri marchi o elementi. è poi necessario calcolare un margine ideale per impaginare il logo con altri elementi, che nel caso specifico corrisponde alla larghezza della lettera "o" (segnalata con il riquadro rosso).
ℹ Nelle riduzioni più piccole, è vivamente consigliato usare un margine non inferiore ai 5 mm, come nell'esempio in fondo alla pagina.
5 mm
✎ Stefania Pizzichi / Scuola Internazionale di Comics
▸ Capitolo 1 > Logotipo Usi corretti Esempi di utilizzo del logo all'interno di: immagini a colori, bianco/nere, pattern e artwork grafici. Se l'immagine di sfondo ha molti colori bisogna inserire il logotipo all'interno di un riquadro bianco, mentre se l'immagine è chiara, e la visibilità dei colori si mantiene, può essere inserito senza riquadro bianco. Nelle immagini in bianco e nero o con sfondo scuro si può utilizzare il logo nella versione monocromatica.
☞ Portale Giovani
26 → 27
Usi scorretti Usi scorretti: dividere la dicitura, sproporzionare le parole, stretchare il logotipo, inserirlo in contesti poco leggibili, modificare e/o alterare le cromie anche se parzialmente, tracciare il contorno del logotipo senza mantenere l'area di rispetto, eliminare degli elementi costitutivi.
ℹ è possibile modificare allineamenti e cromie solo in lavori e contesti artistici, come per esempio per un manifesto, rispettando comunque la riconoscibilità e leggibilità del marchio.
Voluptat hictotatecae plab ipsae et escipsus repudam, omnimin totaes et ab issim volore coritinus aut peri aperumque placea si blab invendis et dis acient, volorendi dit odipidebite sitibus, tet quas sunteces ditiand itibus est quidici enestem qui nos quatur aut quiatem perspe none veratecti dolorum ataspiet doluptati acid it.Ompos confint iciam, viciena vilica quempli caediis. Edendem.
✎ Stefania Pizzichi / Scuola Internazionale di Comics
▸ Capitolo 1 > Logotipo Caratteri tipografici: stampa è possibile abbinare alla grafica del logotipo, i seguenti caratteri tipografici: "TitilliumText22L", "PT Sans Narrow" e "Jesaya Free". I diversi font si possono utilizzare con i loro molteplici pesi (dal light al bold).
TitilliumText22L
ABCDEFGHIJKLMNOPQRUSUVWXYZ abcdefghijklmnopqrusuvwxyz 1234567890 !?$%&()”’,.
PT Sans Narrow
ABCDEFGHIJKLMNOPQRUSUVWXYZ abcdefghijklmnopqrusuvwxyz 1234567890 !?$%&()”’,.
Jesaya Free
☞ Portale Giovani
ABCDEFGHIJKLMNOPQRUSUVWXYZ abcdefghijklmnopqrusuvwxyz 1234567890 !?$%&()”’,.
28 → 29
Caratteri tipografici: web Per quanto riguarda la scelta tipografica destinata al Web, si consiglia l'uso dei seguenti font (appartenenti alla libreria Google Font): "Open Sans" (anche nella versione condensed), "Yanone Kaffeesatz" e "Quattrocento".
Open Sans
Yanone Kaffeesatz
Quattrocento
ABCDEFGHIJKLMNOPQRUSUVWXYZ abcdefghijklmnopqrusuvwxyz 1234567890 !?$%&()”’,.
ABCDEFGHIJKLMNOPQRUSUVWXYZ abcdefghijklmnopqrusuvwxyz 1234567890 !?$%&()”’,.
ABCDEFGHIJKLMNOPQRUSUVWXYZ abcdefghijklmnopqrusuvwxyz 1234567890 !?$%&()”’,.
✎ Stefania Pizzichi / Scuola Internazionale di Comics
✒
☞ Capitolo 2 > Testata
▸ Capitolo 2 > Testata Elementi La composizione della testata del sito è stata realizzata mantenendo e ripetendo gli elementi del poster tipografico. La bicromia aiuta ad esaltare il rosso e a riempire lo sfondo, altrimenti troppo bianco e minimal.
ℹ Le misure del layout sono b 945 x h 245 pixel.
Virgoletta
Freccetta
Sfondo
Logotipo
☞ Portale Giovani
Mano
Blocco Firenze
32 → 33
Mock-up Riproduzione della testata sul sito attuale del portale.
✎ Stefania Pizzichi / Scuola Internazionale di Comics
✒
☞ Capitolo 3 > Gadget
▸ Capitolo 3 > Gadget Segnalibro Il fronte del segnalibro riprende la testata, mentre nel retro si comunica il sito web con una citazione, mantendo lo stesso concept grafico.
ℹ Le misure del segnalibro sono
b 20 x h 5 cm.
I GIOVANI ADORANO
ciò che è stato da sempre celebrato:
LA GIOIA DI VIVERE, LA SCOPERTA DI SE STESSI, LA LIBERTA’. Jim Morrison
☞ Portale Giovani
www.portalegiovani.comune.fi.it
36 → 37
T-shirt Esempio di maglietta a mezze maniche. La grafica riprende gli elementi della testata.
✎ Stefania Pizzichi / Scuola Internazionale di Comics
☞
Parte 2 > Template sito
â–¸ Parte 2 > Template sito Originale / Home Aspetto originale della home del sito, con relativa testata. La struttura del sito si basa su tre colonne, che dovranno rimanere invariate anche nel restyling. Quest'ultimo si concretizza, infatti, sulla creazione di un nuovo "vestito" per la stessa struttura attuale.
☞ Portale Giovani
40 → 41
Originale / CartaGiò Aspetto originale della pagina secondaria "CartaGiò" con form di iscrizione. Nelle pagine secondarie scompare la colonna destra. Il restyling dovrà intervenire sulla veste grafica di tutti gli elementi presenti.
✎ Stefania Pizzichi / Scuola Internazionale di Comics
â–¸ Parte 2 > Template sito Home Il mio intervento si concentra su una grafica giovanile, ricca di icone e effetti jquery. Le cromie riprendono esattamente i colori della testata.
☞ Portale Giovani
42 → 43
Home / Mock-up Mock-up dell'home-page su schermo.
✎ Stefania Pizzichi / Scuola Internazionale di Comics
▸ Parte 2 > Template sito Pagina CartaGiò Ho creato due pulsanti per scegliere il tipo di servizio e ho dato un tono più accogliente al form, usando uno sfondo di carta a righe.
☞ Portale Giovani
44 → 45
Pagina CartaGiò / Mock-up Mock-up della pagina secondaria "CartaGiò" su schermo.
✎ Stefania Pizzichi / Scuola Internazionale di Comics
▸ Parte 2 > Template sito Pagina CartaGiò -> Sconti Ho inserito delle icone per la scelta della categoria, tramite un menù scorrevole. I partner visibili hanno un sottomenù di tipo "tabs".
☞ Portale Giovani
46 → 47
Pagina CartaGiò -> Sconti / Mock-up Mock-up della pagina secondaria "CartaGiò" su schermo.
✎ Stefania Pizzichi / Scuola Internazionale di Comics
✒