Come cadere in un buco e godersi la caduta

Progettare il design del blog NCL è come liberare un’opera d’arte da un blocco di marmo

Pedro parla.

Ricevuto e discusso il brief.
Bene, tutto bello, l’entusiasmo cresce.

Mi ritiro nelle mie stanze (“la caverna”, che è come chiamiamo gli uffici del reparto web). Ma subito dopo, un’eco di domande inizia a risuonare nella mia testa:

• Come disegno un blog che sia semplice e facile da navigare ma allo stesso tempo abbia quel tocco creativo “fuori dagli schemi” che rende NCL unica?
• Come rimaniamo uguali cambiando sempre? Cioè come faccio a bilanciare la familiarità del sito web con un’impronta visiva nuova, esclusiva del blog?
• Come faccio in modo che tutte le persone all’interno dell’agenzia si riconoscano in un’unica interfaccia?
• Come faccio una cosa figa senza fare incazzare il signor Google e il signor Buoro per la SEO (cioè il posizionamento sui motori di ricerca)?
• Come faccio a disegnare il blog senza farmi insultare dai programmatori che lo svilupperanno? O come faccio a farmi insultare il meno possibile, ecco. XD
• Da dove parto?
• Quale sarà la mia voce unica all’interno del blog?
• Da dove vengo?
• Chi sono io?

È panico.
Dinanzi a me un foglio bianco su cui devo scrivere, in poco tempo (la deadline è ieri), il tema NCL in Wonderland.

Una vecchia ferita ricomincia a pulsare e mi fa ricordare che la costruzione del sito web NCL è stata un bel bagno di sangue per tutta l’agenzia (anche se alla fine è andato tutto bene e abbia portato a casa risultato). Il timore che avvenga lo stesso con il blog è alle stelle.

Ma sangue freddo. Dopo 1, 2, 3, 4, 5, 6 volte che si sbaglia, iniziamo ad imparare dai nostri errori.

Un respiro profondo. Lascio decantare la consegna, scruto ogni dettaglio con rinnovata attenzione… e in questo silenzio interiore, comprendo: tutti gli elementi sono già davanti a me, basta loro permettere di rivelarsi, senza sforzo.

Proprio come Michelangelo sosteneva che la statua è già dentro il blocco di marmo e che basta permetterle di liberarsi (“Ho visto un angelo nel marmo ed ho scolpito fino a liberarlo” cit.), il nostro blog è già là: noi ne agevoleremo solo la comparsa.

Ok, è un poco esagerato. Forse citare Michelangelo è un po’ troppo alto per noi della caverna. Possiamo meglio dire che da “bravi” artigiani/carpentieri del web a suon di mazzetta, scalpello, insulti e bestemmie liberemo NCL in Wonderland dai suoi pixel.

Ed ecco che tutto risulta semplice: il cadere è lieto.

Alice cade all’interno del buco ed entra in un altro mondo fantastico Tu, lettore, cadrai all’interno del mondo NCL attraverso il nostro blog. Speriamo che tu non ti faccia male.

Come meglio rappresentare questa caduta/immersione in un nuovo mondo?

La soluzione è già là, l’animazione iniziale all’interno dell’homepage, dove il cerchio si allarga fino a disvelare il video, sarà la stessa che disvelerà il blog. Sostituiremo solo il cerchio con un buco della serratura.

Lo stile grafico del blog si radica nell’identità visiva del sito già esistente, ma introduce variazioni che ne sottolineano l’autonomia:

• Un nuovo font: introduciamo un font graziato, evocativo delle atmosfere letterarie e del fascino del grande schermo, per infondere un tono narrativo distintivo.
• Una griglia che narra storie: L’impaginazione degli articoli si ispira al dinamismo visivo dei quotidiani e delle riviste, ma con un occhio strizzato all’esperienza immersiva delle piattaforme di streaming come Netflix e Prime Video.
• Un linguaggio visivo coerente: Le immagini di categoria e le anteprime degli articoli adottano uno stile coordinato e riconoscibile, sigillando ulteriormente l’unicità e la forte identità visiva del blog.

Il risultato finale si traduce in un’esperienza visiva che evoca un’atmosfera editoriale, quasi fosse sfogliare le pagine di una rivista.

Lo sviluppo del blog NCL: un’opera congiunta

Buoro a Gigi: fallo tu.
Gigi a Buoro: fallo tu.
Buoro a Gigi: fallo tu.
Gigi a Buoro: fallo tu.
Buoro a Gigi: fallo tu.

Alla fine, decidiamo che la nascita del blog sarà un’opera congiunta: Gigi ne poserà le fondamenta digitali in WordPress, e Buoro ne garantirà la connessione con il sistema attuale.

Il concetto di CMS headless: cos’è e perché lo abbiamo usato per sviluppare il blog di NCL

Frazio parla.

Si parte male: io e Alberto siamo entrambi sviluppatori, utilizziamo ambienti e tecnologie che permettono di fare la stessa cosa, ma con linguaggi diversi. Ovviamente si parla di backend del sito, perché il front-end (ossia quello che vede l’utente sullo schermo) lo gestiamo attraverso i tre pilastri dello sviluppo del web: HTML, CSS e JS.

Il sito di NCL è stato sviluppato da Alberto e la tecnologia che ha usato la conosco solo a livello teorico. Inoltre, la tecnologia che uso io non va troppo d’accordo con la sua: bisogna trovare una soluzione.

Quando parlo della mia tecnologia, parlo nello specifico di PHP che, per rendere molto più semplice il discorso per te che stai leggendo, è il linguaggio utilizzato per sviluppare in WordPress!

Da qui l’idea chiave: il concetto di CMS headless.

Un CMS headless è un sistema di gestione dei contenuti in cui il backend (l’area del sito in cui creiamo e memorizziamo i contenuti) è separato completamente dal frontend (l’area del sito in cui l’utente visualizza i contenuti).

Con un CMS headless possiamo quindi rapidamente arrivare a una soluzione: utilizzare WordPress solo per l’area backend, all’interno della quale ognuno di noi scriverà i suoi articoli. Alberto, invece, svilupperà un “meccanismo” grazie a cui il nostro sito istituzionale potrà sincronizzarsi in real-time con il CMS WordPress per estrapolarne tutti gli articoli pubblicati.

Questa cosa permette un grande vantaggio ai fini realizzativi: posso occuparmi io dell’implementazione del front-end del blog (cioè quello che state visualizzando proprio in questo momento) e passarlo già pronto ad Alberto. Lui lo collegherà alla sua piattaforma, rendendolo dinamico e popolato dai contenuti estrapolati dal CMS WordPress.

Altro vantaggio fondamentale è che posso sfruttare tutte le potenzialità del backend di WordPress: estenderne le funzionalità in base a nuove esigenze, tenerlo sempre aggiornato e sicuro con in pochi click, programmare i post, gestire più utenti, rendere più semplici le revisioni e molto altro.

Se quello che abbiamo fatto, però, non ti è ancora chiaro, allora provo a riassumertelo con video esempio. Ecco, è andata così:

Morale/conclusioni

1. È possibile cadere in un buco e godersi la caduta
2. Il mostro ama il suo labirinto
3. Perché deve esserci per forza un terzo punto?