Una delle novità più recenti in fatto di strutturazione visiva di un sito web è il parallax scrolling, detto anche design parallasse. Da un paio di anni l'applicazione di questa tecnica ha preso particolarmente piede nell'universo dal web design, tanto da catalizzare l'attenzione di grandi aziende: si pensi al sito di Spotify o alla sezione dedicata al nuovo iPhone 5S del portale Apple.
Di fatto, il parallax scrolling permette ai contenuti di una pagina di spostarsi a velocità differenti, creando così livelli di diversa profondità cognitiva e la possibilità di porre un accento importante a più contenuti su una stessa pagina. Di pari passo, diventa chiaro come la scelta del carattere tipografico da abbinare ai contenuti visivi sia molto importante e le risorse a disposizione del designer davvero tante. Per questo motivo, prima di effettuare una scelta, è utile individuare il tipo di messaggio che si vuole comunicare, per poi studiare come comunicarlo.
La caratteristica più evidente della scrittura è che veicola il messaggio direttamente al lettore, che dovrà essere in grado di leggere e comprendere l'informazione in modo veloce e chiaro. La scelta di un carattere tipografico, all'interno di questa comunicazione visiva, dovrebbe essere conforme al tipo di effetto che si vuole stimolare. Scegliere il font "sbagliato", secondo l'obiettivo che ci siamo proposti, potrebbe causare una ricezione errata del messaggio stesso, una lettura faticosa e l'allontanamento dell'utente. Detto questo, negli esempi che seguono sperimenteremo il tipo di effetto che la scelta di un carattere tipografico, piuttosto di un altro, ha sull'insieme di un design e come ottenere una comunicazione visiva omogenea rispetto a ciò che vogliamo comunicare.
Scelta del messaggio
Ai fini del tutorial, ci si pone l'obiettivo di trasportare una comunicazione Twitter all'interno di un design parallasse, per verificare quanto i messaggi social possano essere utili per catalizzare il lettore. Scelto il tipo di messaggio, proveremo ora a distribuirlo graficamente, utilizzando l'iconico uccellino di Twitter unito a un testo che ne sottolinei le caratteristiche. Useremo la seguente citazione di Coco Chanel: «In order to be irreplaceable one must always be different» ("per essere insostituibili bisogna essere differenti"). Qual è il messaggio? Nel mare di informazioni condivise sui social network, bisogna fare in modo di non lasciar affogare ciò che vogliamo comunicare, per questo motivo essere differenti è un plus non trascurabile. L'originalità diventa quindi il brand del nostro sito parallasse e, con la tipografia, dobbiamo dimostrarlo.
Applicazione del messaggio
Nella Figura 1, la nostra grafica viene affiancata dalla citazione. Certamente fa il suo effetto, ma potrebbe non colpire nel segno: rischia di lasciare indifferente il lettore. Il font geometrico potrebbe risultare monotono, come del resto l'utilizzo di un unico colore.
Potremmo intervenire sulle parole chiave “irreplaceable” e “different”, in modo da enfatizzare il messaggio. Nella Figura 2 il testo risulta più movimentato, le parole in grassetto guadagnano spazio e prospettiva: essendo più visibili, interrompono la piatta monotonia.
Siamo sulla buona strada perché il nostro messaggio non passi inosservato, ma come intervenire ulteriormente? Le possibilità sono molteplici, ma al momento limitiamoci alle due più semplici. La prima idea potrebbe essere inserire una difformità con l'utilizzo di un font diverso per le parole chiave, come in Figura 3.
La seconda opzione si basa sul colore, riprendendo il concetto espresso dalla parte grafica del messaggio: tra tanti uccellini blu ce n'è uno differente, di color arancione. Applicando lo stile al testo, l'occhio del lettore viene agganciato al concetto che vogliamo esprimere.
Come detto poc'anzi, le possibilità di sviluppare una comunicazione visiva omogenea e divulgare un messaggio sono infinite. Abbiamo visto molto velocemente come un carattere tipografico possa solleticare in modo differente l'attenzione del lettore. Come facile intuire, anche lo sfondo ha un ruolo determinante nel veicolare il contenuto e proprio il design parallasse si presta a cambiamenti repentini e modifiche. Nelle due immagini seguenti possiamo percepire come l'uso del bianco e nero e le relative sfumature di grigio, magari assunte dal testo scorrendo la pagina verso l'alto o verso il basso, rendano drammatico il risultato. Abbinando un carattere tipografico estremamente geometrico e tutto maiuscolo si ottiene un effetto meno morbido rispetto ai precedenti.
Non ci si dimentichi, infine, come la differente velocità degli elementi del parallax design permettano di apportare ulteriore enfasi al testo: in che modo potrebbe reagire l'utente se, al movimento del mouse, il singolo uccellino di Twitter si ingrandisse a centro pagina? Le possibilità, come accennato, sono davvero infinite.
Fonte:
The Effects of Font Type Choosing On Visual Perception And Visual Communication, PDF
