Università
Degli
Studi
Di
Napoli – Federico II
Dipartimento scienze sociali- Corso di Laurea in Culture Digitali e Della Comunicazione
Visual Web Design Un modello di riferimento per la progettazione e
sviluppo di un sito web
Elementi di informatica e web – a.a. 2013/2014
di Guido Fusco
Fattori che concorrono ad ottenere un sito di qualità (flusso)
Scopo della grafica
Lo scopo comune di ogni grafica, indipendentemente dall’utilizzo che se ne faccia e dal
canale di riferimento, è quello di comunicare, di esprimere un messaggio – sia esso
psicologico, commerciale o emozionale - ad un target più o meno definito.
La grafica generale delle pagine, è un
elemento di primaria importanza per dare
riconoscibilità e personalità alla propria
attività online, ecco perché nell’iperspazio
testo, immagini, filmati e ogni altro elemento
delle pagine, devono concorrere verso uno
stesso obiettivo di comunicazione. Per questo
è importante che tutto il sito, prima di definire
il dettaglio di ciascuna di queste parti, sia
pensato e valutato all’interno di un progetto
globale.
Gli obiettivi della grafica nel web
Nel contesto progettuale più specifico del sito, la grafica Web dovrebbe sempre e comunque
assolvere alcune funzioni di base:
• Garantire la continuità dell’immagine. La grafica Web non deve essere a se stante ma riferirsi
a un progetto di comunicazione integrata online-offline chiaramente identificabile. Questo è
particolarmente vero per i siti Web aziendali o comunque professionali per i quali si può
parlare d’immagine coordinata. È evidente che per i siti personali c’è una libertà maggiore;
in questo caso, all’idea d’immagine coordinata si potrà sostituire più semplicemente il
concetto di riconoscibilità ed eventualmente di appartenenza a un gruppo o community
ecc. In sostanza, il look personale è l’equivalente privato dell’identità aziendale.
• Essere parte integrante del contenuto. Le scelte grafiche non devono essere relegate a un
carattere puramente descrittivo, ma svolgere anche funzioni di contenuto e di navigazione.
In più, gli elementi decorativi rappresentano un elemento di criticità nella progettazione di un
sito web, poiché rispondendo a criteri estetici, che possono, anche non essere condivisi,
rischiano piuttosto di allontanare l’utente invece che di attrarlo
• Rendere più usabile il sito. La grafica non deve essere un elemento di disturbo, ma un
elemento di semplificazione e facilitazione nell’uso del sito
Immagine coordinata
L'immagine coordinata è materia propria della comunicazione visiva, e include tutti i prodotti
ed i servizi che riguardano l'identità visiva e l'immagine aziendale: biglietti da visita, brochure,
carta intestata, buste, logo ecc.
Manuale d’immagine coordinata
Il Manuale di immagine coordinata è uno strumento che regola
in modo organico e vincolante l’uso degli strumenti di
comunicazione, dal logo dell’azienda/ente alla impostazione
grafica della carta intestata, buste da lettera, biglietti da visita,
cover fax ecc. Il Manuale dell’immagine coordinata deve interpretare e
rappresentare l’azienda/ente comunicandolo in modo
efficace ai destinatari, essere immediatamente riconoscibile e
deve dare un’impostazione grafica coordinata anche ad altri
strumenti di comunicazione quali manifesti, periodico
comunale, sito internet, newsletter.
L’input per la stesura del Manuale è dato, solitamente, dal
Settore Comunicazione che coinvolge e coordina anche gli
altri settori dell’azienda/ente. Una volta raccolte le indicazioni
dalle varie Direzioni si procede con la progettazione grafica
che verrà poi rappresentata nel volume. Ultimo
step: approvazione con delibera del manuale. ecc
Coerenza informativa: obiettivo principale nella grafica La più importante funzione della grafica, comunque, rimane quella della coerenza informativa.
Questa coerenza, può essere esaminata su vari livelli, o meglio per centri concentrici,
pressappoco corrispondenti ai tre obiettivi precedenti.
Immagine coordinata: La grafica deve
essere sviluppata nel rispetto delle scelte
compiute per la comunicazione su altri
media.
Rapporto con il contenuto del sito:
Pagine professionali richiedono testo e
grafica dello stesso tipo, pagine ironiche
avranno maggiore libertà espressiva e
meno vincoli, un sito di comunicazione vorrà
La grafica a sé: le scelte devono
andare tutte nella stessa direzione e offrire
una visione unitaria della comunicazione.
Grafica su carta e sul web: scopi diversi
Nella maggior parte dei casi, quando parliamo
di “grafica su carta”, puntiamo un immaginario
indice verso la cartellonistica e i comuni
volantini pubblicitari; nella maggior parte dei
casi lo scopo principale di tali manifesti è infatti
quello di mettere in evidenza il marchio di
un’azienda e di farlo attraverso immagini
evocative o slogan capaci di attirare
l’attenzione in modo creativo e originale
Nel web tale scopo viene a mancare in quanto la necessità
primaria delle aziende è quella di fornire informazioni circa i
propri prodotti e servizi,
e di farlo nel modo più esaustivo
possibile, così che i potenziali clienti decidano di acquistare
presso l’azienda
Wireframe
Un Wireframe è una bozza in bianco e nero del lavoro che abbiamo intenzione di svolgere: non
sarà navigabile poiché consiste in un’immagine statica ed avrà la funzione di delineare la
giusta posizione di ogni elemento all’interno di una pagina web.
Il wireframe ha la funzione di:
• Comunicare l’idea iniziale del progetto;
• Focalizzare l’attenzione solo su architettura e contenuti, senza le “distrazioni” che possono
provenire da “oggetti” grafici;
• Comunicare cosa si vedrà;
• Essere la base del prototipo
Prototypes
I prototypes sono il mezzo più potente nella fase di testing e di documentazione. Questo
genere di bozza, infatti, rappresenta un vero e proprio prototipo funzionante del sito, il quale
verrà realizzato con i codici HTML e CSS per permettere al cliente di testare con mano
l’esperienza di navigazione. Le pagine proposte saranno anche graficizzate in maniera molto
simile al sito finale ma sarà pur sempre un prototipo, quindi sarà composto da pochi contenuti,
il minimo indispensabile per esporre in maniera esauriente il progetto.
Mockup
Un Mockup è una rappresentazione statica del progetto finale dalla qualità medio-alta: di
solito è un progetto grafico molto dettagliato, a volte coincide con il progetto finale vero e
proprio, così come verrà presentato a lavoro finito.
Modello a faccette o multidimensionale (analitico-sintetica
Layout, composizione e
posizionamento degli
oggetti
Anatomia di una pagina web
Blocco Logo
Spazio senza testo
Blocco contenitore
Spazio senza testo
Blocco Navigazione
Blocco Navigazione
Blocco Blocco Blocco CContenitore
ontenuto
Blocco Footer
Spazio senza testo
Anatomia di una pagina web
Container Ogni pagina web prevede un blocco contenitore che e’ il tag body. La presenza di questo
contenitore garantisce la possibilità di inserire correttamente il contenuto nella pagina. La larghezza
del blocco può essere fluida, cioè può espandersi per tutta la finestra del browser, o fissa e in questo
caso il contenuto della pagina occupa sempre la stessa larghezza.
Logo I designer identificano una determinata azienda con un logo o colori che contraddistinguono la
stessa. Molte persone associano l’identità di un’azienda con il suo marchio. L’identità di un’azienda e’
in realtà un sottoinsieme di branding, dato che ne sottolinea esclusivamente gli aspetti di visibilità
all’esterno. Il blocco logo che compare nel sito web deve contenere il logo o il nome dell’azienda e
deve trovarsi nella parte superiore di ogni pagina del sito.
Navigation Il sistema di navigazione deve essere semplice da individuare e da utilizzare. Gli utenti sono abituati a
trovarlo all’inizio della pagina. Potete mettere a punto menu’ verticali o orizzontali, ma in entrambi i
casi gli strumenti di navigazione devono essere il più vicino possibile all’inizio del layout.
Anatomia di una pagina web
Content Il contenuto e’ il re della pagina web. Chi non trova quello che cerca passa ad un’altro sito. Il blocco
del contenuto deve essere sempre nella parte centrale del design del sito, in modo che chi visita le
pagine possa individuare le informazioni che sta cercando.
Footer Ben visibile in fondo pagina, questo blocco contiene i dati del copyright, i modi per i contatti e le altre
informazioni legali.
Whitespace Spazio bianco, senza testo e senza illustrazioni. I design esperti lo usano spesso, mentre quelli alle
prime armi vogliono riempire ogni singolo centimetro della pagina. E’ necessario studiare molto bene
la disposizione degli spazi vuoti, altrimenti la pagina assume un’aspetto troppo stipato, come una
stanza piena di persone. Lo spazio bianco deve dare respiro al design della pagina
accompagnando l’occhio dell’utente che visualizza oltre a creare equilibrio e uniformità.
Layout a larghezza fissa
In un layout fisso, il contenitore principale ha la larghezza dimensionata in pixels. Un layout fisso è
generalmente studiato per una dimensione standard e vi sono due principali larghezze utilizzate per
questo tipo di layout, a seconda delle due più diffuse risoluzioni del monitor:
•
800×600 pixels
•
1024×768 pixels
Generalmente è uso lasciare circa 40-50 pixel come margine di tolleranza, quindi, le due dimensioni
utilizzate sono all’incirca 760 pixel. oppure 960 pixel.
Esempio: Se la finestra del browser
è più larga di 1280px, a destra e a
sinistra del contenitore compare
lo sfondo dell’elemento BODY; se
è più piccola di 960px, compare
una barra di scorrimento
orizzontale.
Layout a larghezza variabile
I layout a larghezza variabile sono anche detti fluidi o liquidi e si progettano in base a percentuali.
Una soluzione di questo tipo va ben pensata, dato che diventa necessario prevedere i problemi che
si possono verificare per ogni larghezza possibile della finestra del browser
I layout a larghezza variabile si
adattano alla maggior parte delle
risoluzioni e dei dispositivi. Riduce
lo scorrimento della pagina da
parte del cliente.
Di contro però diventa difficile da
leggere quando il testo e’
visualizzato ad una certa distanza.
E’ difficile da costruire e limita
l’utilizzo degli spazi vuoti.
Layout a larghezza variabile
I layout dinamici sono la soluzione alternativa tra fisso e fluido. Il concetto di fondo di questo tipo di
layout tiene conto del fatto che il Web è sempre più mobile e che per questo motivo le dimensioni
delle finestre dei browser sono sempre meno uniformi. Nasce quindi l’esigenza di definire layout fluidi
che si adattano a larghezze diverse.
Definito anche Layout Responsive
Il design responsive è un
importante elemento
dell'accessibilità, la quale
tiene conto inoltre di
numerosi altri fattori,
incentrati non solo sui
dispositivi ma anche sulle
caratteristiche dell'utente
(quali: capacità cognitive,
vista, difficoltà fisiche, e così
via).
Sezione aurea
La sezione aurea o rapporto aureo, indica il rapporto fra due lunghezze disuguali, delle quali la
maggiore è medio proporzionale tra la minore e la somma delle due.
l
x
A
AB:AP=AP:PB
A
.
.P
AP
PB
l-x
B
1,6180…
.
P
Rettangolo aureo
B
La sezione aurea nella pittura
La sezione aurea nella fotografia
In fotografia, la sezione aurea può essere applicata mantenendo le proporzioni della sezione aurea
tra gli elementi che compongono lo scatto: il soggetto, lo sfondo, la distanza tra gli occhi in un primo
piano e così via:
Loghi in sezione aurea
Sezione aurea di una pagina web
E’ possibile adottare le proporzioni auree per ottenere layout più equilibrati e gradevoli. Partiamo dal
presupposto che il nostro sito sia composto da due sezioni, quella del contenuto a sinistra (che
generalmente ha una dimensione maggiore) e quella laterale contenente una sidebar, come mostrato
nel seguente schema:
ESEMPIO: Prendiamo la dimensione totale del nostro layout (960 pixel) e dividiamo tale valore per il
“numero magico” (1,62)
• 960/1,62 = 592 pixel (larghezza
della sezione adibita al
contenuto)
!
• 960–592= 368 pixel (larghezza
della sidebar)
Sezione aurea di una pagina web
Ogni elemento del layout può essere realizzato con la proporzione aurea, basta dividere la dimensione
per 1,6180 e applicare il principio su ogni elemento, partendo proprio dalla proporzione tra corpo e
sidebar ad esempio
Esempio di sezione aurea di una pagina web
Esempi
Il layout di Twitter del 2010 faceva uso della
sezione aurea
Se per esempio vogliamo creare un banner con una larghezza di 360 pixel e
vogliamo applicare le proporzioni della sezione aurea (costruire il rettangolo
aureo)
per calcolare la giusta altezza da applicare, dobbiamo solo
effettuare un piccolo calcolo:
360
=222,4 px
1,6180
Regola dei terzi
un altro principio interessante, aiutarci a dare un equilibrio visivo alle pagine web, è quello della
cosiddetta “regola dei terzi”, che consiste nella suddivisione di un’immagine – o comunque di un
progetto grafico – in terzi, attraverso un reticolo definito da quattro linee, due verticali e due
orizzontali.
.
.
.
.
i quattro punti di intersezione che la delimitano sono
detti punti focali (o fuochi).
Quest’ultimi rappresentano le zone visive in cui
l’occhio, dopo essere stato attratto verso il centro
dell’immagine, si concentra maggiormente.
Esempio della regola dei terzi applicata ad un layout Se i quattro punti di intersezione rappresentano le zone in cui l’occhio si concentra maggiormente, possiamo sfruttare questa potenzialità nella progettazione del layout, magari posizionando proprio sui
punti focali gli elementi a cui vogliamo dare maggior risalto.
Le intersezioni della griglia sovrapposta al
layout danno maggior risalto:
• All’immagine dell’header;
• Allo slogan testuale inserito nell’header;
• Al contenuto della pagina;
• Ad un punto imprecisato delle news
laterali.
Il sistema delle griglie
Un altro interessante metodo per posizionare in modo semplice ed efficace gli elementi all’interno di
un layout riguarda l’utilizzo delle griglie, ovvero la suddivisione del layout in un numero definito di
colonne verticali, tutte della stessa dimensione, separate l’una dall’altra da una distanza costante.
La griglia offre una discreta versatilità nei blocchi del layout e rende molto più semplice la
suddivisione dell’area di design tra contenuti testuali, contenuti decorativi e spazi bianchi. Grazie alla
simmetria delle griglie, é praticamente possibile creare elementi di dimensioni proporzionate e
progettare un layout simmetrico e ordinato
Una griglia a 16 colonne, ognuna delle
Una griglia a dodici colonne, ognuna
nostre sezioni è composta da 4 colonne.
delle nostre sezioni è composta da tre
colonne, anche se le dimensioni
rimarrebbero comunque invariate
Un Layout armonico ed equilibrato ed efficace
Ogni elemento è allineato in modo corretto:
applicando la regola dei terzi e la sezione
aurea e l’utilizzo delle griglie, è possibile
ottenere un’equilibrio chiaro al layout, nonché
una comunicazione efficace.
Spazio Bianco
Con il termine spazio bianco (o “spazio negativo”), si intende lo spazio vuoto che si viene a creare tra
i vari elementi di una composizione grafica.
Si tratta, in pratica, di quel margine che separa visivamente box, paragrafi, immagini e cosi via,
dando respiro ed equilibrio al progetto grafico. Gli spazi bianchi contribuiscono a dare armonia ai
nostri design, migliorandone la chiarezza visiva e la leggibilità dei contenuti.
Il corretto uso dello spazio bianco consente
due cose:
• E’ possibile guidare l'occhio del visitatore
del sito direttamente al contenuto chiave
che si desidera che si veda per primo;
• Si può indirizzare l'occhio del visitatore a ciò
che si vuole far vedere dopo il contenuto
chiave, e così via, conducendoli alla
prossima azione che si desidera farli
intraprendere.
Macro spazi
Possiamo classificare gli spazi bianchi in due tipologie ben distinte: i macro spazi e i micro spazi.
Spazio bianco
I macro spazi sono gli spazi bianchi che
si vengono a creare tra gli elementi
principali del progetto grafico: nel
nostro layout, per esempio, sono
Spazio bianco
macro spazi lo spazio tra il contenuto
della pagina e la sidebar e lo spazio
Spazio bianco
footer.
Spazio bianco
Spazio bianco
vuoto che si viene a creare prima del
Micro spazi
Come suggerisce il nome stesso,
con “microspazi” ci riferiamo a
quelle piccole spaziature che
possiamo trovare, ad esempio, tra i
titoli, i paragrafi, le parole e le
singole lettere che compongono
quest’ultime
Obiettivi degli “spazi bianchi”
Il concetto di spazio bianco ha molto in comune con un’altra teoria, ugualmente fondamentale
per quanto riguarda i principi basilari della progettazione grafica: quella del “less is more“. Con
questo termine, prende forma l’idea di “minimalismo”, di una forma di design essenziale, pulito e
privo di orpelli grafici inutili o troppo vistosi, che permette di focalizzarsi sui contenuti veramente utili
e di farlo grazie ad un progetto grafico equilibrato dove, appunto, gli spazi bianchi giocano un
ruolo sostanziale.
Utilizzando in modo efficace gli spazi bianchi del nostro layout:
• E’ possibile valorizzare e mettere in risalto determinati elementi della pagina, e dare così enfasi ai
contenuti principali;
• Si migliora la leggibilità dei testi, in modo che la pagina appaia visivamente più ordinata, anche
da un punto di vista prettamente strutturale o gerarchico;
• La struttura del layout e dei suoi contenuti è più agevole e rilassante, di conseguenza per l’utente
sarà più semplice assorbire i contenuti in modo semplice e spontaneo.
• Si evita la sensazione di “sovraccarico” e di confusione della pagina, con il risultato di una pagina
armoniosa ed esteticamente gradevole.
Consigli utili sugli “spazi bianchi”
1. Prestare particolare attenzione ai testi e agli elementi visivi inseriti
all’interno di box e banner: immagini o testi troppo vicini ai bordi
delle sezioni in cui sono stati inseriti danno una sensazione di
oppressione e di sbilanciamento veramente sgradevole.
2. Dividere i testi in piccoli paragrafi e distanziare gli stessi tra di loro in
modo da creare piccoli spazi bianchi all’interno del testo.
3. Distanziare sempre i titoli dai paragrafi in modo da dare una
gerarchia visiva ai contenuti della pagina.
4. Non commettere l’errore di abusare di spazi vuoti inseriti qua e là
nel layout: gli spazi bianchi inconsistenti rendono il layout confuso
e poco curato.
5. Allo stesso modo, non esagerare con l’interlinea nei testi della
pagina: se eccessiva rende difficile la consultazione dei contenuti.
6. Utilizzare le griglie per capire come distanziare gli elementi e per
dare maggior simmetria al layout.
Modello a faccette o multidimensionale (analitico-sintetica
Aspetti grafici e di lettering
Layout grafico
Leggere è l'attività più importante che svolgiamo in rete,
eppure, le tante ricerche sui comportamenti degli utenti di
fronte a uno schermo, sembrano dimostrare il contrario; tutti noi
cerchiamo di leggere il meno possibile.
La lettura dei siti web tramite computer è differente dalla
lettura su carta. La lettura su schermo è più faticosa e lenta
perché si legge in modo discontinuo, sorvolando gran parte di
ciò che viene scritto (skimming) per ricercare solo le righe di
interesse, cercando di ignorare il testo meno interessante o
rilevante.
A colpire l’occhio sono soprattutto titoli, sottotitoli immagini e
colori; e sono proprio questi elementi che indirizzano la lettura.
E’ dunque importante seguire alcune semplici regole che
permettano di rendere la lettura facile, interessante, piacevole,
ordinata e di facile memorizzazione.
Schema di colore
Partendo dai colori primari (rosso, blu, giallo) è possibile creare, mescolando uguali quantità di
ciascuna coppia di colori primari, i colori secondari (arancione, verde e viola). Continuando
questo processo, si produce la fatidica ruota dei colori, un dispositivo, simmetrico in cui ogni
colore si fonde senza soluzione di continuità e linearmente nel successivo.
Esistono diverse versioni di ruota, quella classica, che rappresenta i 12 colori fondamentali
Uno schema di colore è una combinazione armoniosa
e visivamente gradevole di colori, abbinati tra loro
sulla base della loro posizione nella ruota
Schema Monocromatico e acromatico
Lo schema monocromatico, così come fa intuire il nome stesso, fa
uso di una sola tinta, con tutte le sfumature e le tonalità che ne
conseguono: per esempio, uno schema monocromatico blu avrà
una palette di colori che andranno dal blu più scuro al celeste,
senza manifestare colori appartenenti a una scala cromatica
differente.
L’immagine mostra alcuni esempi di palette monocromatica.
Realizzarne una è del resto molto semplice, basta scegliere una
tinta e utilizzarla in tutte le sue sfumature.
Lo schema acromatico è quello più facile da comprendere e, di
conseguenza, da mettere in pratica: si tratta di uno schema che
potremmo grossolanamente definire “senza colori”, e che si basa
sul nero, il bianco, e i grigi.
L’immagine mostra un esempio di palette acromatica: anche in
questo caso le tonalità sono molto semplici da riprodurre, dato che
non contemplano altri colori all’infuori del bianco, del nero e di
diverse sfumature di grigio
Home page di un sito con schema monocromatico
Home page di un sito con schema monocromatico
Home page di un sito con schema monocromatico
Home page di un sito con schema monocromatico
(http://www.piropixel.com)
Home page di un sito con schema acromatico
Home page di un sito con schema acromatico
Home page di un sito con schema acromatico
Home page di un sito con schema acromatico
Schema complementare e contrastante
Lo schema complementare è molto frequente nel web design,
perché permette di accostare in modo semplice e immediato dei
colori nettamente in contrasto tra loro. L’effetto è decisamente
interessante: gli abbinamenti sono armoniosi, accattivanti e
particolarmente efficaci.
Utilizzare uno schema complementare è molto semplice: basta
scegliere dalla ruota dei colori due colori diametralmente opposti:
per esempio il colore complementare del rosso è il verde, e quello
del blu è l’arancione.
In uno schema contrastante si combina un colore con una tinta
posizionata a destra o a sinistra del suo complementare nella ruota
dei colori.
Ad esempio: il colore complementare del rosso è il verde; il suo
colore contrastante è invece il blu, che è per l’appunto posizionato
immediatamente a destra del verde nella ruota dei colori
Home page di un sito cine schema complementare: accostamento
viola/giallo
Home page di un sito con schema complementare: accostamento viola/giallo
Home page di un sito con schema complementare: accostamento
verde/rosso
Home page di un sito con schema complementare: accostamento verde/rosso
Home page di un sito con schema complementare: accostamento
blue/arancione
Home page di un sito con schema complementare: accostamento blue/arancione
Home page di un sito con schema contrastante: accostamento
blue/rosso
Home page di un sito con schema contrastante: accostamento blue/rosso
Home page di un sito con schema contrastante: accostamento
verde/viola
Home page di un sito con schema contrastante: accostamento verde/viola
Realizzazione e scelta del modello di font (lettering)
Fin dagli inizi la tipografia sul web ha manifestato diversi limiti rispetto a quella riservata alla
grafica tradizionale: la realizzazione e scelta del modello di font (lettering) impiegabili nei
progetti di web design era molto circoscritta, e questo ovviamente era decisamente
demotivante per i visual-designers che dovevano rassegnarsi a lavorare con una manciata di
font web-safe, a discapito della loro creatività e della resa estetica dei layout.
Fortunatamente con il tempo il progresso è
arrivato anche sul web. La tipografia applicata al
web design è adesso una vera e propria arte che
consente ai web designer una libertà d’azione
particolarmente ampia: oggi nessuno ci vieta di
sperimentare con font ed effetti tipografici diversi
a seconda dei risultati – visivi e comunicativi –
che desideriamo ottenere
Anatomia di un carattere tipografico: La struttura base di un font
Linea Ascendente: E’ la linea che definisce il punto di
altezza massimo del carattere.
Linea Discendente: Generalmente questa linea è
definita dalle stanghette delle lettere “con asta
discendente”, ovvero le p, le q e le g.
L’altezza delle maiuscole e dei numeri: definisce
l’altezza massima di un carattere, prendendo come
riferimento le maiuscole e i numeri dello stesso.
Quest’altezza non tiene conto delle lettere con asta
discendente (nell’esempio non si valuta la misura della
stanghetta della lettera “p”).
Il corpo del carattere misura l’altezza totale del
carattere, dalla linea ascendente a quella
discendente.
Occhio del carattere: misura l’altezza del carattere
senza tenere conto delle maiuscole, dei numeri e delle
lettere con asta discendente. Nel nostro esempio
l’occhio è l’altezza definita dalle lettere b e r.
Anatomia di un carattere tipografico: Dettagli dei singoli
caratteri
Asta: può essere discendente, quando la linea si protrae
verso il basso come nel caso della lettera “p” (n.5) o
ascendente, quando si protrae verso l’alto ( è il caso della
lettera “l”, n.3)
Occhiello: è lo spazio bianco che si viene a creare all’interno
di alcune lettere. Nel nostro esempio tutte le lettere – tranne
la “l” hanno un occhiello, anche se in alcune appare più
evidente di altre.
Incrocio: si ha quando due sezioni della lettera si
intersecano, come nel caso della lettera t o della lettera f.
Gamba: è il “punto di appoggio” della lettera, nei font
regolari è simmetrico all’asta.
Orecchio: è una “stanghetta” sporgente che appare in
determinate lettere. (come la g e la Q maiuscola)
Braccio: è l’asta superiore o inferiore di una lettera.
Collo: la curva che unisce due sezioni della lettera. Nella
lettera “g” il collo unisce la parte superiore della lettera con il
“cappio”, ovvero con l’occhiello inferiore.
Cravatta: è un’asta puramente ornamentale del carattere
Anatomia di un carattere tipografico: Categorie dei font In pochi anni la mole di font disponibili è cresciuta in modo esponenziale, e ciò ha reso necessaria la
classificazione degli stessi in “famiglie”, sulla base delle loro caratteristiche estetiche.
Le principali categorie di font sono:
!
• Font con grazie (o “serif”);
• Font senza grazie (“sans-serif”);
• Font monospazio
• Font calligrafici.
• Font decorativi;
Le grazie di un font sono quelle rifiniture ornamentali
che terminano le aste di alcuni di essi.
Anatomia di un carattere tipografico: Font con e senza grazia
Il termine Sans Serif è francese e significa senza
“serif”, cioè senza grazie.(nell’esempio vediamo le
grazie della lettera “a” nel font Georgia, rispetto alla
“a” priva di grazie del font Verdana) e sono un
retaggio delle antiche scritture lapidarie.
E’ pensiero comune i font serif siano più leggibili dei
sans-serif (forse grazie alle peculiarità delle grazie,
che rendono facilmente riconoscibili i diversi
caratteri) e per questo motivo quasi tutti i quotidiani
e gli opuscoli su carta stampata sono redatti con
caratteri graziati.
In realtà sul web è preferibile optare per un font
sans-serif, in quanto la dimensione ridotta dei
caratteri e la visualizzazione a schermo rendono
abbastanza ostica la consultazione dei testi, e si
ritiene che font lineari e meno decorati appaiano
più leggibili, soprattutto se si tratta di blocchi di testo
abbastanza estesi.
Anatomia di un carattere tipografico: Font monospazio e font calligrafici
Generalmente i font sono proporzionali, ovvero ogni carattere
occupa uno spazio varabile, sulla base della larghezza del
carattere stesso. Nei font proporzionali alcune lettere sono
meno ingombranti di altre, per esempio la lettera r e la i
posseggono uno spessore decisamente diverso da quello
della lettera o, e cosi via. Nei font monospazio, invece, ogni
carattere ha una larghezza fissa, indipendentemente dalla
reale dimensione delle lettere.
I font calligrafici sono – come suggerisce il nome stesso – font che
simulano la scrittura a mano. I font calligrafici possono rivelarsi molto
eleganti e formali (prova a pensare a una partecipazione di nozze,
con i nomi degli sposi impressi in un elegante calligrafico argentato) o
estrosi e originali, come nel caso dei font “sketch”, ricavati dagli
schizzi a matita dei designer.
Ovviamente la natura eclettica di questi font li rende veramente
poco leggibili. Per questo occorre utilizzarli a piccole dosi: vanno
bene per dare un tocco creativo al layout, per un’intestazione o uno
slogan molto breve, ma sono assolutamente da evitare nei paragrafi.
Anatomia di un carattere tipografico: Font decorativi I font decorativi rappresentano il 70% dei font
disponibili in rete. Si tratta di font dai contorni
irregolari o dal taglio volutamente eccentrico,
con lettere arricciate, asimmetriche o arricchite
da disegni e fantasie.
Nonostante si possa pensare che questo tipo di
font sia poco professionale e difficilmente
utilizzabile in un progetto di web design che si
rispetti, non è cosi: con un tocco di fantasia e di
senso estetico si possano ottenere effetti grafici
particolarmente interessanti.
In realtà se ci guardiamo intorno è facile notare
che moltissimi siti web fanno uso nelle loro
intestazioni – o per enfatizzare alcune sezioni del
layout – font decorativi capaci di una forte
valenza estetica o comunicativa.
Anatomia di un carattere tipografico: Il colore del carattere
tipografico
Il contrasto di colore è un modo comune per
distinguere tra navigazione, intestazioni, link e
corpo del testo.
Un colore diverso nel testo per evidenziare un link
Si può anche usare del colore dissolto per
indicare che qualcosa è disabilitato o non
disponibile.
colore
testoper
perdistinguere
evidenziare
un link abilitata e non
Un uso
deldiverso
colore nel
diverso
un’attività
Alcune volte non c’è bisogno di rendere
qualcosa più grande per catturare meglio
l’attenzione, basta creare enfasi usando colori
più luminosi, come ad esempio il rosso.
Un esempio di colore più luminoso (rosso) per attirare l’attenzione
Anatomia di un carattere tipografico: Peso e spazi
Rendere alcune parti del testo con maggiore peso (bold,
grassetto) può creare enfasi.
Un errore comune è la tendenza a mettere in grassetto intere
frasi. Facendo questo l’enfatizzazione e il contrasto del testo
viene perduta.
Lo spazio gioca la parte più importante per mantenere il flusso
nel design. Un buon utilizzo dello spazio comunicherà al lettore
dove iniziare, quando fare pausa, dove finisce, e cosa fare
dopo.
Ci sono vari modi per creare spazio: spazio tra i paragrafi,
spazio tra i caratteri delle parole, l’interlinea (spazio tra le righe)
e indentazione.
Licenza Creative Commons
Il presente materiale è pubblicato con licenza Creative Commons 3.0 Italia
“Attribuzione - Non commerciale - Condividi allo stesso modo”
http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it