Spazio Poi: la ex Pescheria di Caltagirone

Un edificio chiuso da anni, e otto cose da farci dentro

Spazio Poi è la ex Pescheria di Caltagirone, rimasta inutilizzata per anni e riaperta come casa del quartiere da Extopia APS, con il cofinanziamento del Dipartimento per le Politiche Giovanili e il Servizio Civile Universale della Presidenza del Consiglio dei Ministri. Dentro ci stanno un coworking, una caffetteria sociale, uno spazio per le mostre, i talk, i laboratori, le feste, le cene sociali. Non è una cosa sola, ed è questo che rende difficile raccontarlo.

L’identità visiva l’ha disegnata Barbara Scerbo, e a noi è arrivata già approvata, con una richiesta semplice: il sito. Il pubblico che voleva raggiungere sono gli under 35 della zona, quelli che un posto così lo useranno o non lo useranno a seconda di quanto in fretta capiscono se li riguarda.

Un marchio fatto di punti di sospensione

Il concept di Barbara racconta l’attesa e la proiezione al futuro: punti di sospensione e spaziature innaturali, come il vuoto largo fra “Spazio” e “Poi”, che cambiano e dialogano con i materiali intorno.

Il carattere dei titoli è Biscottini, fatto a pallini, e quello dei testi è Evans Narrow. Li ha disegnati Zetafonts, che li ha concessi in omaggio all’associazione.

Per il sito quel sistema era già metà del lavoro. I pallini del logo diventano i fori della hero, le icone delle otto aree sono fatte degli stessi punti, e le frecce della segnaletica sono quelle che accompagnano link e card. Il nostro compito è stato portare in una pagina che scorre, e in movimento, un’identità pensata anche per muri, manifesti e borse.

Il problema: otto porte, una casa sola

Uno spazio multifunzionale ha un problema di comunicazione che si vede subito. Se elenchi le funzioni sembri un centro servizi, e nessuno si affeziona a un centro servizi. Se le tieni insieme con una frase sola resti così vago che il lettore non sa cosa può andarci a fare davvero.

La struttura tiene le due cose separate. La home racconta il posto, con una sola idea per schermata, e chi vuole i dettagli entra in una delle otto aree, che hanno ciascuna la sua pagina: coworking, caffetteria, mostre, talk, workshop, mangiare sociale, casa del quartiere, feste. Titolo e riassunto di ogni card in home si cambiano dalla pagina della sua area, così tutto quello che riguarda un’area sta in un posto solo.

Una home che si attraversa

La home è un percorso di quattordici sezioni, cinque delle quali sono fotografie a tutta larghezza: il marchio sulla foto della ex Pescheria, la frase che dice cosa genera lo spazio, il claim, le ragioni, le otto aree, i prossimi eventi, gli articoli del magazine, la mappa, l’invito a scrivere.

Il fondo cambia colore tre volte in tutta la pagina; nella prima versione erano sette. Inchiostro per aprire, crema per la parte che spiega il progetto, arancio per quello che è vivo adesso, cioè gli eventi e gli articoli, poi di nuovo inchiostro per chiudere. La regola è scritta in testa al file del template, così chi aggiunge una sezione la trova prima di cominciare.

Anche le misure seguono una scala. A un certo punto la home aveva ventidue corpi di testo diversi, e fra uno e il successivo lo scarto andava dall’1,7 al 112 per cento: nessuno di quei salti si leggeva come una gerarchia. Ora i corpi sono quattordici, presi da una scala a proporzione aurea, e la riga di testo è scesa da centosessantadue caratteri a sessantadue. Se serve una misura che non c’è, non si aggiunge: vuol dire che manca un passo della scala.

Due aperture, una per motore

All’ingresso il marchio è fatto di pallini forati in una lastra scura, con dietro la foto della ex Pescheria, e il passaggio alla pagina avviene dentro uno di quei pallini. Su Chrome, da computer, la lastra si ingrandisce trecentottanta volte puntando su un pallino della O. Su Safari l’apertura è un’altra: prima sfuma il fondo chiaro dietro i fori, così per un tratto si legge “Spazio Poi” fatto di fotografia, poi sfuma anche la lastra e resta la foto intera.

Il ramo si sceglie dal motore del browser e non dal suo nome, così copre anche Chrome su iPhone, che di Chrome ha solo l’etichetta. Per chi ha disattivato le animazioni nel sistema abbiamo trovato una soluzione a parte: la pagina arriva senza zoom né scorrimento morbido, con il movimento ridotto al minimo, e si legge tutta lo stesso.

La mappa senza servizi di terzi

Serviva una mappa per dire dove si trova la Pescheria. Quelle dei fornitori soliti hanno smesso di andare bene: CARTO ha iniziato a chiedere una chiave e a stampare la scritta sopra le tessere, la versione scura di Esri si ferma al livello di zoom 16 e per trovare una via del centro storico serviva il 18, e MapLibre, la libreria che le alternative vettoriali richiedevano, pesa duecentoquarantotto kilobyte compressi contro i quarantasei di Leaflet.

La mappa adesso è un estratto vettoriale della zona di Caltagirone, un file da 1,4 MB che sta sul sito e da cui il browser scarica solo i pezzi che gli servono, qualche decina di kilobyte in tutto. E c’è un vantaggio oltre al peso: per vedere la mappa nessuno manda il proprio indirizzo IP a un servizio di terzi.

Prenotare una scrivania

Il coworking aveva bisogno di prenotazioni, e le prenotazioni sono il punto in cui i siti diventano moduli. Qui il flusso è a passi: giorno, fascia, posto sulla pianta della sala, dati. Una barra numerata dice sempre a che punto sei e si torna indietro con un clic. Su telefono la pianta diventa un elenco di tasti per isola, perché venti posti su uno schermo da trecentonovanta pixel non si toccano.

Il codice sta in un plugin nostro, separato dal tema, che gestisce sale, posti, regole di preavviso e chiusure, e Spazio Poi è la sua prima installazione. Quando il fondo scuro del tema ha reso illeggibili i testi del modulo, la correzione è finita nel plugin in forma generale: il colore del testo ora si calcola dal fondo, su qualunque sito lo installi.

Il sito lo tiene in mano il cliente

Il tema è scritto su misura, senza page builder, e ogni testo del sito si cambia dal pannello senza toccare il codice: quelli della home e delle pagine, i riassunti delle card, gli eventi con data, luogo e tipo, perfino le etichette e i messaggi del modulo contatti.

Gli articoli Spazio Poi li scrive su Substack, dove ha anche la newsletter. Per portarli sul sito senza copiarli a mano abbiamo realizzato un plugin, Stackpress: legge la pubblicazione, mostra gli ultimi articoli in home e l’archivio nella pagina del magazine, e dal pannello si sceglie se aprire il pezzo su Substack, in un popup o in un pannello. Quando esce un articolo nuovo, entro un’ora compare anche sul sito. Il campo della newsletter nel footer porta alla pagina di iscrizione di Substack con l’indirizzo già scritto, e il sito non lo salva.

Cosa portiamo in progetti come questo

Con un posto che fa otto cose, il lavoro vero è deciderne l’ordine. Quali stanno in prima pagina, quali si raggiungono in un clic, quali possono aspettare. È una conversazione più che un progetto grafico, e va fatta prima di aprire il programma di disegno.

L’altra metà è consegnare qualcosa che il committente possa portare avanti da solo. In un’associazione il sito lo aggiorna chi trova il tempo fra un evento e l’altro, e ogni modifica che richiede noi è una modifica che non verrà fatta.