Restyling sito del Giornale

Il sito del Giornale è stato sottoposto a un bel restyling e si è molto modernizzato.

Finora la home page era scomoda navigando da cellulare, con i titoli degli articoli che comparivano in maniera incompleta e si stipavano in riquadri rigidi, due a due.

Ora la pagina di apertura è molto più amichevole, con i titoli di ciascun articolo che si estendono per tutta la larghezza. E’ vero che sugli schermi stretti compaiono ancora incompleti, non andando oltre le prime tre righe, ma ruotando il dispositivo e disponendolo in orizzontale è possibile leggerli in maniera completa.

Anche dal punto di vista dei colori le innovazioni si notano. Prima si era ancora in una fase derivata dalle vecchie convenzioni tipografiche dei quotidiani, che tradizionalmente erano stampati in bianco e nero; il colore era arrivato soltanto di recente, e non aveva ancora scalfito certe convenzioni e un certo immaginario. Qui invece siamo già ad una fase successiva. Ora alcune parole chiave in alcuni titoli vengono evidenziate in giallo, mentre i nomi dei giornalisti sono sempre sottolineati in azzurro.

Inoltre alcuni articoli sono inseriti in riquadri con fondo grigio scuro.

Anche le pagine dedicate ai singoli articoli sono più movimentate: sono divise in varie sezioni titolate, in maniera tale da avere un quadro della struttura dell’articolo semplicemente scorrendo la pagina, e contengono non soltanto parole in neretto, ma anche link evidenziati da una sottolineatura azzurra. Le parole chiave nei titoli sono evidenziate in giallo. Il giallo e l’azzurro sono due colori chiave nella nuova impaginazione del sito, tanto da comparire proprio nel logo, a sottolineare il .it che compare dopo il nome della testata.

Per i titoli viene usato un sans chiamato Darkmode. Il font è caricato dal server del Giornale, le note sul copyright lo attribuiscono genericamente a Dalton Maag Ltd, anno 2020.

Per gli articoli invece è stato scelto un serif, Calluna, disegnato da Jos Buivenga per la fonderia Exljbris. I numeri sono minuscoli, le grazie sono palesemente asimmetriche. Alla base della l, per esempio, la grazia di sinistra ha il raccordo transizionale, mentre a destra da lontano potrebbe sembrare una grazia bodoni, senonché il bordo dell’asta verticale devia a sinistra prima della grazia creando una rientranza. Qualcosa di molto strano, se visto ingrandito.

Le parole evidenziate in giallo nei titoli sono ottenute taggandole strong nell’html, e impostando il valore del background tramite i css: colore --yellow, definito a parte come variabile del valore #eae522.

L’azzurro è definito come #00d1b8, e ci sono altri otto colori definiti nel codice (varie tonalità di grigio, il giallo scuro, il bianco e il nero).

Il colore della sottolineatura dei link è attinto nell’opzione background-image della .typography di a, mentre il background-color è facile individuarlo nei css, alla voce a:hover: è azure. Questo significa che passando col mouse sul link, tutta la parola viene evidenziata in azzurro.

La dimensione del testo dell’articolo è 22 px, con altezza riga a 34,1, dedotta dall’istruzione line-height: 1.55.

Al di là dei dettagli tecnici, lo spirito dell’iniziativa è spiegato in un articolo che i designer hanno pubblicato sul sito, che contiene anche foto riguardanti il work-in-progress e animazioni che rendono evidente le modifiche apportate. Anche al logo, dove lo spessore delle aste è stato alleggerito, lo spazio tra le lettere aumentato, mentre la sottolineatura sotto il .it è ispirata al concetto di glitch, ossia di disturbo informatico che può comparire su un monitor: un concetto chiave, “inteso come la volontà di dichiararsi totalmente digitali, completamente fuori registro rispetto al mercato, una voce fuori dal coro”.

Dal punto di vista grafico, “la sfida maggiore è stata quella di conferire un carattere magazine al quotidiano”. Si è puntato quindi su “background noisy e ampi spazi”, tra l’altro.

“Per i titoli avevamo bisogno di un font facilmente leggibile su sfondi light e dark, così ne abbiamo scelto uno progettato proprio con questo scopo, il Darkmode. Mentre per il corpo degli articoli è stato scelto il Calluna, un serif che combina il fascino del design classico con quello pulito del modernismo”. E che secondo me ha pure quel tocco glitch in linea con lo spirito di questo restyling.

Il risultato visivo mi pare interessante e al passo con i tempi.