- Cliente
- New Generation Foundation
- Anno
- 2026
- Ruolo
- Web design
- Disciplina
- Siti web
- Settore
- arte
Il sito di Vox Medicea, l'ensemble che riporta alla luce la musica sacra della Firenze dei Medici. Prima una landing in pochi giorni, poi il sito intero: online il 6 novembre.
Obiettivo
Affiancare la comunicazione del debut album, in tempi strettissimi: a luglio una landing che dicesse che Vox non è nato ieri, a novembre il sito, per raccontare davvero la sua storia.
Sistema
Un progetto bespoke sulla struttura comune della fondazione: un unico database e un CMS su Payload, da cui il team aggiorna eventi, news e programmi.
Pronto prima
Ogni fase del sito è preparata in anticipo: quando arriva una data, il team della fondazione ha già tutto il materiale e va online in maniera molto facile.
Gli altri siti della fondazione04
Raffinatezza di secoli fa, forza di oggi
Una tipografia fuori dai canoni del web contemporaneo, cornici e glifi presi dalla Firenze del Rinascimento, dentro una struttura chiara che regge l'uso di tutti i giorni.
Bodoni sparato grande
I titoli grandi in Bodoni, maiuscoli e sottili: la forza dei caratteri grandi di oggi, con una raffinatezza che parla di secoli fa.
Segni fiorentini
Cornice ad arco, glifo a petali, freccia: disegnati sulle forme dei dipinti e delle decorazioni del Rinascimento fiorentino.
Leggibile ogni giorno
Optima per l'interfaccia e i titoli minori, Brother 1816 per il testo: il Bodoni resta dove fa effetto.
Segni vivi
I segni che ho disegnato per il sito, con le loro durate vere: girano qui come sul sito.
La storia
15 tappe · morphOgni tappa della storia di Vox ha il suo disegno: il manoscritto, il soffitto del Salone dei Cinquecento, la sagrestia di Santo Spirito, l'organo. Le illustrazioni riprendono le architetture e i simboli di ciò di cui la storia parla, né più né meno, e si trasformano l'una nell'altra.
La cornice che si disegna
1,4 sArco 1 + 5 + 1 e doppia cornice 1 + 4 + 1: un filetto d'oro traccia la forma, quello interno parte 150 ms dopo. Foto © Marco Borrelli.
Il glifo che scende
passaggio · 250 msA riposo si vedono i petali; al passaggio il bottone si riempie di blu, il testo diventa oro e il glifo scende di 11 px.
Il binario con la freccia
trascina · 1 pxNelle file di eventi e foto la freccia fa da maniglia su un filetto da 1 px. Foto © Marco Borrelli.
Un design system dal brand book
Il branding è di Duccio Melosi, Rifugio Studio. Dal suo brand book ho scritto un design system per il web, adattando quello che serviva: token, componenti con i loro stati, schemi di pagina.
Colori
Brand
- Blu Lapislazzuli
#00157F - Rosso
#720325 - Oro
#F8CC75
Nel sito
- Avorio della storia
#FBF7EF - Oro dei filetti
#C2973A - Oro per il testo
#7F5D02
Movimento
- Una cornice
Una sola cornice ad arco per vista, un solo bottone principale.
- Una curva
Entrate e uscite con la stessa curva: parte svelta, si posa piano. Interfaccia in 150-250 ms.
- Meno movimento
Con "riduci movimento" restano le dissolvenze.
Dai pannelli alle pagine
La landing di luglio era una pagina sola con i pannelli laterali; il sito si apre in pagine vere, ognuna col suo indirizzo. Qualche sezione, sullo schermo grande e sul telefono.
Musica che non si ascolta da secoli
Vox Medicea nasce da un progetto di ricerca fantastico e strano, sicuramente strano: quello di Mark Spyropoulos, direttore del progetto, sulla musica sacra al tempo dei Medici. Non le cose famose, ma vita vera fiorentina, mottetti che non ascoltiamo da secoli, di un periodo storico che ha tanto, tanto da offrire. Oggi Vox è uno dei progetti della New Generation Foundation e sta per pubblicare il suo debut album, Sacred Masterpieces of the Medici.
Prima la landing, poi il sito
A fine luglio serve qualcosa online, in tempi strettissimi: una landing fatta in pochi giorni, appoggiata su Webflow, che dica che Vox Medicea non è nato ieri ma ha già una storia. Mancava però il modo di spiegarla, quella storia, e mancava l'album. Il sito chiedeva più tempo.
Dal brand book ho scritto un design system per il web, preso quello che serviva e adattato allo schermo. Poi il wireframe: la pagina unica con i pannelli laterali si apre in pagine vere, ognuna col suo indirizzo. Una scelta di espansione.
Un Bodoni sparato grande
Il branding è di Duccio Melosi, Rifugio Studio, e anche questo è un branding particolare: una tipografia raffinata, fuori dai canoni del web design contemporaneo. Niente lineare bold: un Bodoni sparato grande, che tiene la forza dei caratteri grandi di oggi con una raffinatezza che parla di secoli fa, e porta verso altri mondi, perché il Bodoni naturalmente è moda. Un linguaggio tanto strano quanto forte.
Il Bodoni sul web ha i suoi problemi, a partire dalla leggibilità: resta solo nei titoli grandi. Optima prende i titoli minori e l'interfaccia, Brother 1816 il testo: lineare, essenziale ma con carattere.
Segni dalla Firenze del Rinascimento
La cornice ad arco, il glifo a petali sotto i bottoni, la freccia del binario: segni che vengono dallo studio delle forme nei dipinti del Rinascimento fiorentino, da Pontormo a Leonardo, e dalle decorazioni dell'architettura di Firenze. Li ho disegnati io, perché mi servivano nel web.
Lo stesso per le illustrazioni della storia: dopo diverse prove, con le date in verticale, le animazioni, un morph, riprendono le architetture e i simboli di ciò di cui ogni tappa parla. Né più né meno.
Il sito più bello che un coro abbia mai visto
Online il 6 novembre. Se dovessi dire cos'è Vox: potenzialmente il sito web più bello che un coro di musica sacra abbia mai visto.
Crediti
- Web design
- Andrea Piroli, Terralism
- Branding
- Duccio Melosi, Rifugio Studio
- Foto
- Marco Borrelli
- Riferimenti
- Pontormo, Leonardo da Vinci, l'architettura fiorentina del Rinascimento
- Strumenti
- Carta e penna, Figma, Claude, Webflow per la landing, GitHub, Payload, Cloudflare