Blog

Una tempesta di dischi

Guglielmo Cok

18 Agosto 2021

Ho una grande passione per gli LP.
E questo, devo dire, ben si sposa con il profondo spirito archivistico che mi caratterizza.

Per fare un esempio, i vinili sulle mensole di casa sono, sì, in ordine alfabetico, ma in primis sono divisi per decadi.
Alcuni mantengono la mente allenata con La Settimana Enigmistica. Alla mia compagna, invece, basta cercare un disco da metter su.

Da qui il mio entusiasmo nello scoprire di dovermi occupare del redesign del sito La Tempesta con il suo catalogo di duecento e passa dischi.

La tempesta

La Tempesta è un’etichetta indipendente che dal 2000 promuove la nuova musica italiana. In vent’anni di attività, gli artisti prodotti sono un centinaio, e tra questi possiamo citare velocemente i più noti: Tre Allegri Ragazzi Morti, The Zen Circus, Le luci della centrale elettrica, M¥SS KETA, Sick Tamburo e molti altri.

Il logo de La Tempesta

In questo articolo ci concentreremo sul design di una pagina tipo: la “pagina disco”, colonna portante dell’intero sito.

La pagina disco

Quando incomincio a lavorare al design della pagina “disco” mi accorgo subito di una cosa: le immagini a mia disposizione sono piccoline, soprattutto se andiamo a guardare dischi vecchi. Sicuramente non possiamo chiedere al cliente di ricaricare in alta definizione tutte le copertine presenti in archivio. Parliamo di centinaia di foto.

Accantono quindi subito l’idea di utilizzare un’immagine buca schermi in apertura.

Seconda cosa: le copertine sono tutte quadrate (e ci mancherebbe altro).

Se per caso non ci avessi già rinunciato prima, ora è chiaro che utilizzare un qualsiasi tipo di immagine fullscreen in testata è impossibile.

Decido allora di dare molto peso al titolo del disco lavorando con una tipografia piuttosto grande. Riesco così a riportare in equilibrio la composizione, momentaneamente affossata dalla copertina.

Però come vedremo nel prossimo paragrafo, è una scelta che si porta dietro delle conseguenze.

La pagina del disco con la foto di copertina affiancata al titolo
Copertina e titolo si spartiscono la scena.

 

Titoli dei dischi: criticità e potenzialità

Lavorare sul web con una tipografia molto grande e con dei testi molto vari è sempre un casino.

La dimensione dei titoli dei dischi infatti deve funzionare sia con testi brevi che con testi lunghi.

Per capirci, la dimensione deve adattarsi alla singola A (titolo dell’ultimo album di Blindur), ma anche a Vita e opinioni di Nello Scarpellini, gentiluomo (degli Zen Circus). Senza dimenticarci di titoli magari anche brevi, ma composti da una parola molto lunga. Le parole lunghe infatti rischiano di essere spezzate su due righe. Per esempio, PHANTASMAGORIA di Black Snake Moan conta ben 14 caratteri.

Le copertine dei dischi di Blindur, Zen Circus e Black Snake Moan
Le Tre copertine analizzate. In ordine: A (di Blindur); Vita e opinioni di Nello Scarpellini, gentiluomo (degli Zen Circus); PHANTASMAGORIA (di Black Snake Moan).

 

Titoli grandi e titoli medi nel backend del sito.

Presto mi rendo conto che scegliere una dimensione univoca del font è molto difficile.

Seleziono quindi due tipologie di titolo (lungo e breve) e a queste abbino due dimensioni di font differenti.

Ora però si tratta di risolvere tecnicamente la questione, ovvero come implementarla nello sviluppo del sito.

Avremmo potuto creare un’automazione: se il titolo è più lungo di tot, allora il font è piccolo. Altrimenti il font è grande. Però in questa casistica non rientrerebbero i titoli corti composti da parole lunghe: PHANTASMAGORIA sarebbe rimasto scritto in grande e avrebbe rotto il design.

Abbiamo quindi deciso di creare un semplice selettore. Quando accedo al backend (il backend è l’interfaccia con la quale si gestiscono i contenuti di un sito) e inserisco un nuovo disco, dovrò selezionare se voglio utilizzare il titolo grande, o più piccolo.

Il selettore all'interno del backend del sito
Nel backend del sito posso selezionare la dimensione del font da utilizzare per il titolo del disco.

 

E questo è il risultato:

Titoli grandi e titoli lunghi
Carrellata di dischi: la grandezza dei titoli varia a seconda della scelta fatta nel backend.

 

Sfondi personalizzati

Risolta la questione copertina + titolo album, decido di aggiungere un ulteriore elemento che caratterizzi l’apertura di ogni singola pagina disco: il colore di sfondo.

Di nuovo rientra in gioco il backend del sito. Oltre al selettore della dimensione dei titoli, implementiamo anche un campo colore di sfondo dove è possibile inserire un codice colore personalizzato.

Nel backend possiamo selezionare il colore da usare come sfondo della pagina del disco
Nel backend possiamo selezionare un colore da usare come sfondo della pagina del disco.

 

Ma possiamo spingerci ancora un po’ più in là. Implementiamo infatti anche la possibilità di selezionare un ulteriore colore. Al posto di una tinta unita, ora siamo in grado di ottenere un gradiente.

Possiamo anche selezionare un secondo colore e ottenere così un gradiente
Selezionando un ulteriore colore otteniamo un gradiente.

 

Possiamo in questa maniera lavorare con un tono su tono, o riprendere le due tinte maggiormente presenti nella copertina, o viceversa lavorare per contrasto. Le possibilità sono illimitate:

Carrellata di dischi: gli sfondi vengono personalizzati scegliendo uno o due colori nel backend.

 

Allo stesso tempo, anche lo sfondo completamente bianco continua a funzionare. E ciò è fondamentale: si presentano infatti così i dischi “vecchi” che non sono ancora stati customizzati con il nuovo sistema.

Il disco Terra di Le luci della centrale elettrica risale al 2017 e non è stato ancora customizzato con il colore di sfondo. Ma questo non è un problema.

 

Mouse over nell’archivio dischi

In più, piccola chicca, tutti questi colori utilizzati negli sfondi diventano un’opportunità per caratterizzare il mouse over (ovvero il passaggio col mouse sopra a un elemento) di ogni singolo disco all’interno dell’archivio. In questo modo ogni elemento del catalogo si “attiva” in un modo unico e originale.

Nel catalogo, al passaggio del mouse, ogni elemento si colora automaticamente con le tinte scelte nella customizzazione della pagina disco.

 

Da grandi poteri derivano grandi responsabilità

Certo, tutte queste opzioni rischiano di creare più danni che altro nelle mani di un editor che non ha familiarità con concetti come RGB e codici esadecimali. O che banalmente non ha mai utilizzato il contagocce per campionare un colore.

Ma in questo caso abbiamo a che fare con un cliente skillato, che da sempre cura in autonomia l’immagine coordinata della casa discografica.

Ecco quindi che questo grado di personalizzazione viene immediatamente recepito dal cliente con entusiasmo. E il processo un po’ tedioso che caratterizza ogni data entry, si trasforma in un’esperienza interattiva che i ragazzi della Tempesta commentano così:

“Comunque figata, mi sto divertendo, è una bomba, mi sa che sarà un tunnel!”

Conclusioni

Se dovessimo trovare una sorta di morale conclusiva, questa potrebbe riassumersi in due punti:

  1. Il contenuto è fondamentale per determinare il design. Per contenuto intendiamo: che immagini dobbiamo utilizzare? Qual è la loro dimensione e la loro ratio? Come è strutturato il testo? Ci sono dei titoli da evidenziare? Quanto lunghi sono? Quanto grandi possono essere?
  2. Conoscere le competenze dell’editor che curerà il sito può essere uno stimolo per integrare nel design degli elementi di personalizzazione. Ne guadagnerà il sito, ne guadagnerà in divertimento l’editor in fase di compilazione.

Potrebbero interessarti

Si è beneficiato del sostegno finanziario del Programma Operativo del Fondo Sociale Europeo della Regione Autonoma Friuli Venezia Giulia in relazione al programma PS 101/2020 – "Sostenere l’adozione di modelli innovativi di organizzazione del lavoro attraverso lo sviluppo di piani aziendali e l’adozione di adeguata strumentazione informatica per adottare strumenti di lavoro agile ovvero di smart working. Emergenza da COVID-19"