La progettazione grafica del menù di un DVD - Informazioni, principi ed esempi - UN CASO PRATICO ALCUNI PRINCIPI IDENTITÀ VISIVA SOFTWARE QUALCHE ...
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
UN CASO PRATICO
ALCUNI PRINCIPI
IDENT IT À VISIVA
SOFTW ARE
QUALCHE ESEMPIO
La progettazione grafica del
menù di un DVD.
Informazioni, principi ed esempi
La progettazione grafica del menù di un DVD
1
UN CASO
Per capire come si affronta questo tema partiamo da un
PRATICO
caso concreto, quello illustrato nel Manuale di editoria
multimediale di Valerio Eletti della serie di monografie di
artisti intitolata Cd'Art.
Dopo aver definito il concept e aver disposto una prima
mappa dei contenuti da inserire nel prodotto, arriva il
momento di progettare l'interfaccia, intesa come la
schermata interattiva, della quale vanno considerati due
aspetti distinti ma profondamente intrecciati:
quello logico-funzionale, connesso con lo schema
strutturale dei contenuti del titolo e
quello estetico-comunicazionale, cioè l'aspetto grafico.
Fonte:
Manuale di editoria
multimediale, Valerio
Eletti, Laterza, 2003.
La progettazione grafica del menù di un DVD
1
UN CASO
L'impostazione logica dell'interfaccia, cioè i meccanismi di
PRATICO
navigazione di menù e sottomenù vengono sviluppati in
parallelo alla messa a punto del flow chart (la mappa dei
contenuti) e i problemi dell'uno si riflettono nelle soluzioni
dell'altro in un percorso a spirale.
Contemporaneamente si sviluppa il lavoro di
progettazione grafica: dalla decisione dell'ambiente in
cui andranno collocati i contenuti, al lavoro sugli
strumenti di navigazione.
Il punto da notare è come queste scelte grafiche siano
strettamente legate alle necessità dell'interazione e alle
caratteristiche tecniche del prodotto che si sta
progettando.
Fonte:
Manuale di editoria
multimediale, Valerio
Eletti, Laterza, 2003.
La progettazione grafica del menù di un DVD
1
UN CASO
Nel nostro caso concreto: siamo nel 1995 è i computer
PRATICO
domestici hanno una profondità di colore a soli 8 bit,
dunque limitata a 256 tinte e questo è un grosso
problema per dei cd sull'arte.
La soluzione è disporre una palette di colori
personalizzata per ogni quadro.
Questo limite tecnico pesa anche sulla scelta della
metafora di base: scartata l'idea del museo in 3D o di una
texture di sfondo, si opta per un nero uniforme che è il
colore di default dello schermo, esalta i colori e si adatta
meglio alla varietà di dipinti contenuti nella serie.
La scelta dei colori per gli elementi di navigazione è
anch'essa legata alla necessità di non sottrarre colori alla
Fonte:
Manuale di editoria ristretta palette: bianco e grigio per le scritte, blu per le
multimediale, Valerio parti grafiche e rosso per tutto ciò che è attivo.
Eletti, Laterza, 2003.
La progettazione grafica del menù di un DVD
1
UN CASO
Riassumendo, la progettazione dell'interfaccia avviene
PRATICO
una volta che la scaletta dei contenuti è già stata
abbozzata ma allo stesso tempo la sua organizzazione
definitiva viene messa a punto proprio in questa fase, in
relazione alle necessità di navigazione e ai percorsi tra i
vari materiali.
Le scelte grafiche dei Cd'Art sono nate all'incrocio tra i
vincoli tecnici e gli obbiettivi da raggiungere (far risaltare
le opere) e ne è scaturito un risultato semplice ma non
monotono, efficace nella guida alla navigazione.
Fonte:
Manuale di editoria
multimediale, Valerio
Eletti, Laterza, 2003.
La progettazione grafica del menù di un DVD
2
ALCUNI
Il progetto grafico di una qualsiasi forma di
PRINCIPI
comunicazione si occupa sia di immaginare una forma
coerente al suo contenuto, sia di favorire la fruizione di
quest'ultimo.
Si tratta di cercare di rispecchiare il carattere del
contenuto (es: un testo scientifico avrà una veste grafica
seria e un'impaginazione rigorosa, mentre una rivista sarà
più vivace) ma anche di organizzare gli elementi visivi ed
informativi affinché essi possano veicolare i loro
messaggi nella maniera più chiara possibile.
Nel caso di un'interfaccia le necessità pratiche di fruizione
diventano ancora più importanti perché entra in gioco la
componente dell'interattività.
Vediamo una serie di principi che possono guidarci a
progettare l'aspetto compositivo-estetico e dell'usabilità,
Fonte:
Manuale di grafica e anche se resta molto utile osservare quanti più esempi
stampa, Mariuccia possibile cercando di capire che cosa funziona e cosa no.
Teroni, Apogeo, 2009.
La progettazione grafica del menù di un DVD
2
ALCUNI
PRINCIPI COMPOSITIVI E DI PROGETTAZIONE GRAFICA
PRINCIPI
Partiamo da alcuni principi di percezione visiva
(della Gestalt) che riguardano in generale l'organizzazione
di una serie di elementi su una superficie per ottenere una
comunicazione efficace e sono applicabili a tutti i campi
delle arti visive.
1 - Principio di vicinanza o prossimità:
gli elementi vicini in una scena vengono percepiti come
una figura unica.
Questo principio può aiutarci a rendere più chiara la
struttura dell'interfaccia: dosando gli spazi bianchi
possiamo avvicinare gli elementi con una relazione tra
di loro e allontanare quelli appartenenti a gruppi
differenti.
Fonte:
http://grafica.html.it
La progettazione grafica del menù di un DVD
2
ALCUNI
Un esempio è la divisione in paragrafi del testo di una
PRINCIPI
pagina che ci aiuta a cogliere già a colpo d'occhio i
blocchi che trattano argomenti differenti.
Fonte immagine:
www.grafite.biz
La progettazione grafica del menù di un DVD
2
ALCUNI
2 - Principio di similitudine o similarità:
PRINCIPI gli elementi simili vengono percepiti come collegati.
Anche questo può aiutarci nell'interfaccia: usando un
colore, un simbolo o un font dello stesso tipo che si
ripete possiamo facilitare la lettura delle informazioni
da parte dell'utente. Un esempio è l'uso di un
elenco puntato che ci chiarisce come una serie di
elementi siano parte dello stesso gruppo.
Nello specifico i menù dei DVD spesso contengono
3 tipi di informazioni: il nome della sezione attuale, le
scelte di quel ramo del menù e il ritorno al menù
principale o all'inizio del film. Usare colori, font o
grandezze differenti può aiutare a distinguerli.
Esempio positivo: Across the univers.
Fonte: Esempio negativo: Chicago.
http://grafica.html.it
La progettazione grafica del menù di un DVD
2
ALCUNI
3 - Principio figura-sfondo:
PRINCIPI
le figure vengono percepite grazie al loro contorno,
mentre il resto viene considerato come sfondo.
Maggiore sarà il contrasto della figura con lo sfondo,
più facile sarà la lettura della figura stessa.
Essa acquisterà risalto e si creerà una gerarchia visiva
che ci aiuterà a distinguere gli elementi più importanti.
Fonte:
http://grafica.html.it
Fonte immagine:
www.grafite.bizLa progettazione grafica del menù di un DVD
2
ALCUNI
4 – Principio della chiusura:
PRINCIPI
linee e forme familiari vengono percepite come chiuse
e complete anche se graficamente non lo sono.
Ecco dunque l'importanza dell'allineamento degli
elementi grafici e dell'uso di gabbie e griglie di
impaginazione: strutturare lo spazio secondo linee e
Fonte:
http://grafica.html.it rettangoli invisibili aiuta infatti il lettore a capire
Fonte immagine: l'organizzazione della pagina.
www.grafite.bizLa progettazione grafica del menù di un DVD
2
ALCUNI
Definire una gabbia
PRINCIPI
significa impostare
una matrice della
quale si possono poi
sfruttare le diverse
combinazione per
creare varietà visiva
all'interno di un
sistema ordinato.La progettazione grafica del menù di un DVD
2
ALCUNI
PRINCIPILa progettazione grafica del menù di un DVD
2
ALCUNI
La gabbia più comune è quella organizzata in colonne ma
PRINCIPI
è possibile anche dividere lo spazio con una griglia
modulare da usare a piacimento, come accade nei
quotidiani.
Fonte immagine:
www.papress.comLa progettazione grafica del menù di un DVD
2
ALCUNI
L'impaginazione basata su colonne o su una griglia
PRINCIPI
modulare non riguarda solo la stampa ma anche il web.
Immagine:
www.guardian.co.ukLa progettazione grafica del menù di un DVD
2
ALCUNI
PRINCIPI
Immagine
www.ungarbage.comLa progettazione grafica del menù di un DVD
2
ALCUNI
PRINCIPI
Immagine:
www.uxmag.comLa progettazione grafica del menù di un DVD
2
ALCUNI
L'uso di una struttura facilita la leggibilità e crea una
PRINCIPI
coerenza visiva che migliora anche l'usabilità perché
sarà più facile interagire con un'interfaccia dove i
bottoni non cambiano posizione ad ogni schermata.
Comporre un'immagine o impaginare significa proprio
organizzare la disposizione e definire le proprietà dei
vari elementi per creare un insieme equilibrato dove le
cose più importanti abbiano un “peso” maggiore e
attirino perciò la nostra attenzione.
Ogni elemento di una composizione ha infatti un certo
peso visivo, cioè una certa capacità di attrarre
l'attenzione dell'osservatore.
Fonte:
kigeiblog.myblog.itLa progettazione grafica del menù di un DVD
2
ALCUNI
Il peso di un elemento è definito, oltre che dalle sue
PRINCIPI
caratteristiche come la forma, il colore, le dimensioni e
la collocazione nella pagina, anche in relazione al
contesto in cui si trova e al contrasto con quello che ha
attorno (come abbiamo visto secondo il principio della
figura-sfondo).
La progettazione mira ad ottenere un'immagine
equilibrata, dove ogni elemento abbia il giusto peso
visivo in relazione allo scopo che si vuole raggiungere.
L'equilibrio può essere raggiunto sia con la simmetria
che con un'asimmetria ben bilanciata, come nel caso di
una composizione ordinata, basata sull'allineamento e
le griglie, dove però alcuni elementi rompono l'ordine e
proprio per questo acquistano risalto.
Fonte:
kigeiblog.myblog.itLa progettazione grafica del menù di un DVD
2
ALCUNI
PRINCIPI
Fonte immagine:
desktoppub.about.comLa progettazione grafica del menù di un DVD
2
ALCUNI
PRINCIPI Altri due principi generali possono essere utili:
il primo, valido nel mondo occidentale, dove si legge da
sinistra a destra, è che in generale diamo più
importanza proprio a ciò che si trova in alto e a
sinistra.
Il secondo è la regola dei terzi, usata in pittura e
fotografia. Questa regola ci insegna che i quattro punti
di intersezione delle linee che dividono l'immagine in
terzi sono quelli in cui l'occhio si concentra
maggiormente, oltre all'area centrale.
Posizionare gli elementi di interesse dell'immagine in
questi punti aiuta a produrre una composizione più
armonica e dinamica rispetto ad esempio all'uso della
simmetria centrale ma aiuta anche a guidare
l'attenzione di chi guarda verso gli elementi più
Fonte:
importanti.
http://it.wikipedia.orgLa progettazione grafica del menù di un DVD
2
ALCUNI
PRINCIPI
Fonte:
www.vagabondando.it
www.pastrugni.comLa progettazione grafica del menù di un DVD
2
ALCUNI
PRINCIPI Oltre alla gabbia e all'uso dei colori, un elemento
fondamentale della composizione grafica è il font.
La scelta del carattere del testo deve essere effettuata
conciliando la coerenza con il contenuto del prodotto
(esempio ben riuscito: Il gladiatore) con i criteri di
leggibilità e le necessità dell'interazione.
Un primo elemento da tenere presente è che alcuni font
sono stati progettati appositamente per lo schermo
(screen font) e questo è importante soprattutto in
presenza di lunghi brani di testo.La progettazione grafica del menù di un DVD
2
ALCUNI
PRINCIPI Un'altra considerazione riguarda la creazione di una
gerarchia tra gli elementi visivi che potrebbe farci
scegliere di usare due font nello stesso menù, magari
uno per i titoli principali e un altro per le scelte
secondarie (esempio riuscito: Across the universe).
Se invece usiamo troppi font in maniera non coerente il
risultato sarà soltanto una grande confusione (esempio
negativo: Hulk).
Importante è poi anche la scelta dell'allineamento e
dello stile del testo, sempre in termini di organizzazione
dello spazio e necessità di far risaltare le cose più
importanti.La progettazione grafica del menù di un DVD
2
ALCUNI
PRINCIPI DI USABILITÀ
PRINCIPI
Che cos'è l'usabilità?
«La capacità del software di essere compreso, appreso,
usato e gradito dall'utente quando usato in determinate
condizioni.»
«La misura della qualità dell'esperienza dell'utente in
interazione con qualcosa, sia un sito web, un software o
un qualsiasi altro strumento.»
Progettando un prodotto interattivo, è necessario
prestare particolare attenzione agli strumenti di
navigazione proprio per rendere il prodotto usabile e
Fonte:
Usabilità dei nuovi migliorare l'esperienza con esso dell'utente.
media, Marco
Sentinelli, Carocci.La progettazione grafica del menù di un DVD
2
ALCUNI
Vediamo alcuni principi di buon design che ci possono
PRINCIPI
aiutare:
1 - Rendere visibili le cose: cercare un compromesso tra un
menù troppo ampio e uno troppo profondo.
Nel primo caso le troppe scelte ci confondono, nel
secondo ciò che ci interessa è probabilmente nascosto
dietro una serie troppo lunga di scelte.
Fonte:
Usabilità dei nuovi
media, Marco
Sentinelli, Carocci.La progettazione grafica del menù di un DVD
2
ALCUNI
2 - Fornire sempre all'utente un feedback,
PRINCIPI
un'informazione di ritorno sulle sue azioni, cioè una
conferma che il sistema ha effettivamente eseguito
quel comando.
Un esempio è l'uso di differenti colori per i vari stati dei
bottoni: quando ci vado sopra con il mouse e quando lo
clicco.
3 - Mantenere la coerenza tra le varie parti del prodotto
per evitare di doversi sforzare di capire tutto da capo
ad ogni schermata. Questo scopo viene raggiunto con
la definizione di una gabbia, mantenendo icone e
oggetti sempre nelle stesse posizioni.
Stesso discorso per il colore: scegliere una palette e
mantenerla, usando sempre lo stesso colore per lo
Fonte:
Usabilità dei nuovi stesso tipo di oggetti.
media, Marco
Sentinelli, Carocci.La progettazione grafica del menù di un DVD
2
ALCUNI
Altri aspetti di cui tenere conto, che saltano all'occhio
PRINCIPI
guardando qualche esempio sono:
- la scelta di un carattere leggibile e abbastanza grande
per interagire a distanza (dal divano alla TV);
- la riduzione al minimo dei segmenti ripetitivi e che non
possono essere saltati nelle visioni successive alla prima;
- la necessità di sfruttare immagini o metafore conosciute
nel caso in cui si usino delle icone.La progettazione grafica del menù di un DVD
2
ALCUNI
Concludendo, la cultura dell'usabilità dovrebbe essere alla
PRINCIPI
base di ogni progetto di prodotto multimediale ma non
bisogna neanche avere un approccio integralista perché in
certi prodotti didattici o ludici proprio la componente
esplorativa è la caratteristica più importante.
Sono soprattutto gli strumenti di consultazione delle
informazioni a necessitare di interfacce usabili mentre i
prodotti che puntano sull'emozione, sull'esperienza
dell'utente, devono stupire (esempio: videogiochi
d'avventura, di esplorazione dello spazio).
Quindi, così come per la progettazione in generale, è
fondamentale chiarire bene dall'inizio quali sono gli
obbiettivi del prodotto.
Fonte:
Usabilità dei nuovi
media, Marco
Sentinelli, Carocci.La progettazione grafica del menù di un DVD
2
ALCUNI
Un DVD video a seconda dei casi potrebbe rientrare
PRINCIPI
nell'uno o nell'altro caso, a seconda di quello che offre:
se contiene soltanto il film e riesce a rendere spiacevole
anche la semplice scelta delle scene o dei sottotitoli,
allora ha un progetto sbagliato perché avrebbe dovuto
puntare sull'usabilità.
Se invece il DVD punta sugli extra, sull'immersione magari
in un mondo simile a quello contenuto nel film,
immaginandolo quasi come un videogioco, allora il
discorso dell'esperienza potrebbe passare in primo piano.La progettazione grafica del menù di un DVD
3
IDENTITÀ
Il fatto di progettare una collana di DVD piuttosto che
VISIVA
un prodotto singolo pone due ordini di problemi:
● di contenuto e organizzazione:
come nel caso della collana Cd'Art, lo schema messo a
punto per il primo cd andava poi applicato a tutti gli
altri dunque fin dall'inizio bisognava valutare i
materiali da inserire nelle varie uscite.
● di riconoscibilità visiva:
è necessario progettare un aspetto grafico di base
comune che possa essere declinato in differenti modi.
Forti aspetti di riconoscibilità sono il logo, la posizione
degli elementi, il font e il colore.
Il colore è in particolare l'elemento che può essere usato
sia per far riconoscere sia per differenziare.La progettazione grafica del menù di un DVD
3
IDENTITÀ
Il peso degli elementi di differenziazione rispetto a quelli
VISIVA
comuni andrà definito in base ai singoli casi.
Nel caso di un prodotto in cui prevale la serialità (le varie
stagioni di una serie TV) gli elementi distintivi saranno
minimi.
Se invece all'interno della stessa serie ogni oggetto ha
un tema diverso allora la necessità di distinguersi ha il
sopravvento.
Questo discorso può essere applicato tanto agli
audiovisivi quanto alle collane di libri.
Vediamo qualche esempio.La progettazione grafica del menù di un DVD
3
IDENTITÀ
VISIVA
La collana di DVD con le varie stagioni di una serie TV
può essere un esempio in cui i vari prodotti non hanno
molto bisogno di distinguersi tra loro, specie se il cast e
la formula del telefilm rimangono fissi.
In questo caso la riconoscibilità è massima e la
Fonte: differenziazione è giocata soprattutto sul colore e sui
http://tfdownload.blo numeri.
gspot.comLa progettazione grafica del menù di un DVD
3
IDENTITÀ
VISIVA
Anche nel caso di questa serie l'identità visiva prevale
Fonte: sulla differenziazione.
www.slashfilm.comLa progettazione grafica del menù di un DVD
3
IDENTITÀ
VISIVA
Diverso è il caso di una collana di libri con titoli molto
diversi tra di loro che hanno bisogno di differenziarsi.
In questo caso gli elementi di riconoscibilità sono
l'elemento grafico in alto, il font e la posizione del titolo.
Nemmeno i colori sono stabiliti una volta per tutte ma si
Fonte: adattano alle copertine tutte diverse tra di loro.
www.lafeltrinelli.itLa progettazione grafica del menù di un DVD
3
IDENTITÀ
VISIVA
Anche qui c'è la necessità di differenziare i vari prodotti
ma in questo caso gli elementi di identità visiva sono
predominanti, cioè si ha più l'impressione che si tratti di
una serie progettata in un colpo solo: lo sfondo nero, il
taglio dell'immagine, il logo in primo piano.
Anche in questo caso i colori del titolo si adeguano
Fonte: all'immagine.
www.dvdcineshop.comLa progettazione grafica del menù di un DVD
3
IDENTITÀ
Vediamo un esempio
VISIVA
di identità visiva
nella progettazione
di una serie
coordinata di marchi.
Questo è il logo del
Lifelong Learning
Program, un
programma che
comprende
numerosi progetti al
suo interno.
Il suo logo contiene
gli elementi e i colori
utilizzati poi per i
marchi dei singoli
Fonte: progetti.
www.programmallp.itLa progettazione grafica del menù di un DVD
3
IDENTITÀ
Dunque qui era
VISIVA
necessario comunicare
l'appartenenza dei vari
progetti ad una matrice
comune di programmi
europei ma allo stesso
tempo la loro
indipendenza.
Ecco dunque la scelta di
creare un logo che
raccoglie tutti gli
elementi grafici e i colori
presenti nelle sei
varianti.
Fonte:
www.programmallp.itLa progettazione grafica del menù di un DVD
4
SOFTWARE
- FREE
La maggior parte mettono a disposizione una serie di
temi ma non consentono la personalizzazione da zero
del menù.
- PROFESSIONALI
Supportano la personalizzazione; si trovano nei
pacchetti di editing video:
- Final cut Pro --> DVD Studio Pro
- Premiere --> Elements e Encore CS5
Di alcuni di questi programmi è possibile trovare le
versioni Free trial per 30 giorni: un buon esempio è
Sony DVD Architect che permette creare menù
personalizzati importando delle grafiche realizzate per
esempio con Photoshop e definendo le aree sensibili con
delle maschere.La progettazione grafica del menù di un DVD
4
SOFTWARE
Sony DVD Architect 4.0La progettazione grafica del menù di un DVD
5
QUALCHE
- FARENHEIT 9/11
ESEMPIO Struttura semplice, le voci sono quelle essenziali ma la
grafica è efficace, ben organizzata e funzionale alla
navigazione. Aspetto coerente anche nel sito web.
- IL GLADIATORE
Anche qui struttura semplice ma aspetto curato e in
linea con l'epoca in cui è ambientato il film, grazie
soprattutto alla scelta del font. Stessa impostazione
anche nel disco degli extra.
- STAR WARS
In questo caso la struttura è molto complessa.
L'impostazione grafica resta coerente tra le varie
schermate e c'è da notare che la navigazione si basa per
intero sull'idea del viaggio nello spazio e sugli scenari del
film. L'usabilità viene in parte trascurata.La progettazione grafica del menù di un DVD
5
QUALCHE
- HULK
ESEMPIO In questo caso manca la coerenza per l'uso di troppi font
e non del tutto adatti. Da notare la decisione di inserire
delle piccole sequenze animate tra le varie schermate.
Progetto grafico totalmente diverso nel sito web.
- SIN CITY
Qui la parentela film-fumetto è risolta molto meglio e la
scelta del font molto azzeccata.
- CHICAGO
Qui anche se si riprendono le scene del film, il font e
l'idea delle scritte fatte di punti di luce, le voci sono
scritte in piccolo e cambiano posizione tra le schermate.
Manca una gerarchia chiara tra gli elementi e il tutto
risulta confuso.La progettazione grafica del menù di un DVD
5
QUALCHE
- ACROSS THE UNIVERSE
ESEMPIO Un esempio di grafica molto curata, che riesce a creare
una gerarchia visiva chiara tra gli elementi del menù con
le caratteristiche dei font. Forse i testi sono un po' piccoli
per l'interazione con la TV.
- GOMORRA
Forse il migliore di tutti gli esempi per coerenza visiva
sia nell'impostazione che nell'uso del colore.
Semplice ma efficace, sfrutta i due elementi
caratterizzanti dell'immagine del film: il font e il colore
rosa del titolo.LUCIA FERRONI
Puoi anche leggere
