Italiano EN English

Sapienza Un design system per il più grande ateneo europeo, a partire dalla sua homepage.

Foundations documentate: palette, tipografia, spaziature, griglie, tono di voce. Prima le fondamenta, poi la prima pagina, poi le linee guida per il sito del futuro.

La homepage di uniroma1.it su mobile
Cliente
Sapienza Università di Roma
Servizi
Strategy & Design · Design System · Sviluppo Drupal
Piattaforma
Figma · Drupal · Paragraphs · Next & React
La nuova homepage di uniroma1.it

La nuova homepage di uniroma1.it

01 · Il cliente

Un ateneo complesso, una sola porta d’ingresso.

Sapienza Università di Roma è il più grande ateneo europeo per numero di iscritti: 11 facoltà, 58 dipartimenti, oltre ai centri di ricerca e alle sedi sul territorio. Il sito uniroma1.it è il suo principale punto di contatto digitale.

Dall’altra parte dello schermo c’è un pubblico vasto e diversificato: studenti italiani e internazionali, famiglie, personale docente e tecnico-amministrativo, media e comunità scientifica.

125.000+studenti, l’ateneo più grande in Europa
11facoltà, ciascuna con la sua identità e la sua comunità studentesca
58dipartimenti, oltre ai centri di ricerca e alle sedi sul territorio
02 · La sfida

Da tutto in evidenza, a una gerarchia chiara.

L’homepage precedente, in uso da anni su Drupal 7, faticava a comunicare l’identità di Sapienza. Al centro c’era uno schema a mosaico di notizie e box, che metteva tutto sullo stesso piano. Gli utenti finivano per affidarsi ai motori di ricerca esterni più che alla navigazione del sito.

La progettazione della pagina principale e del menù doveva però tenere conto di un vincolo più profondo: la doppia anima del sito. Due bisogni diversi, spesso in competizione per lo stesso spazio: il primo schermo della homepage.

  • Un pubblico studentesco con esigenze molto concrete: iscrizioni, frequenza ai corsi, servizi del campus.
  • Un pubblico esterno di comunità scientifica, istituzioni, scuole, media, che al sito chiede autorevolezza, visibilità dell’offerta formativa, della ricerca e dell’impatto sociale.
uniroma1.it
La nuova homepage di uniroma1.it, organizzata per fasce
La homepage precedente di uniroma1.it, a mosaico
Prima · il mosaico Dopo · la gerarchia
⇤⇥

Trascina per confrontare · dal mosaico alle fasce

03 · Il pubblico

Prima di disegnare, capire per chi.

Il punto di partenza è stata un’analisi qualitativa del pubblico del sito: distinguere i target primari da quelli secondari, ciascuno con bisogni e linguaggi propri.

È da questa mappa che nasce la gerarchia della homepage: cosa merita il primo schermo, e cosa può aspettare.

01
Studenti prospectitaliani e internazionali
02
Famiglieorientamento alla scelta
03
Personale internodocente e tecnico-amministrativo
04
Media e istituzionicomunicazione esterna
05
Comunità scientificaricerca e pubblicazioni
04 · Il sistema

Non una homepage. Un design system.

Il deliverable del progetto non è la homepage: sono le foundations del design system che la rendono possibile. Palette, tipografia, spaziature, griglie, tono di voce e accessibilità definite una volta, in un punto solo, e valide per tutto quello che verrà dopo.

La homepage è la prima cosa costruita con quel sistema, non il suo scopo.

Foundations · Sapienza

color
scala a 8 gradi
type
Aa Bb CcCormorant Garamond · DM Sans
serif · sans
space
mobile-first
grid
a fasce
Guida ai corsi Didattica Ricerca Ateneo
uniroma1.it

Una base sola, pagine diverse

Per un ateneo di questa ampiezza la differenza è sostanziale. Senza fondamenta condivise, ogni pagina successiva ricomincia da zero: nuove decisioni sui colori, nuove misure, nuovo tono, e una coerenza che si sfilaccia man mano che il futuro sito cresce.

Con le fondamenta, chi progetterà le prossime sezioni parte da un vocabolario già definito e discute il contenuto, non i pixel. È il motivo per cui il lavoro sulla prima pagina è stato impostato come lavoro sul sistema, e non come restyling di una schermata.

05 · Le foundations

Le fondamenta di tutto il futuro sito di ateneo.

Le foundations del design system sono definite e documentate come base condivisa per tutto il futuro sito di ateneo, non solo per la pagina che le ha fatte nascere.

01Palette coloriRosso Sapienza istituzionale · scala a 8 gradi
02TipografiaCormorant Garamond · DM Sans
03Spaziature e griglieimpostazione mobile-first
04Tono di vocedal lessico tecnico a quello degli utenti
05Accessibilitàcriterio di progetto di ogni componente

La palette parte dal Rosso Sapienza istituzionale e lo articola in una scala completa, così che l’accento resti riconoscibile anche dove serve contrasto, profondità o un fondo tenue. L’abbinamento tipografico tiene insieme le due anime dell’ateneo: un serif per l’autorevolezza dei titoli, un sans neutro e leggibilissimo per il corpo e l’interfaccia.

Il tono di voce è la foundation meno visibile e forse la più utile: la nuova homepage è stata l’occasione per mettere a valore la revisione dei linguaggi che l’ateneo sta portando avanti, a partire dalla riconfigurazione dei menu e dei percorsi di navigazione. E l’accessibilità digitale non è un controllo finale ma un vincolo di progetto: ogni componente è stato disegnato tenendone conto dall’inizio.

Stefano Mainardi

Progettare la homepage di un ateneo come Sapienza significa decidere cosa viene prima. Per farlo servivano fondamenta condivise: senza quelle, ogni pagina successiva ricomincerebbe da zero.

Stefano Mainardi · CEO, SparkFabrik
06 · La homepage

Un’identità riconoscibile al primo schermo.

La direzione visiva racconta Sapienza come grande università inclusiva, con un’impronta innovativa. La pagina si compone per fasce: in evidenza le eccellenze dell’ateneo e le sue quattro missioni. Nello stesso scorrimento trovano spazio inclusione e produzione scientifica, temi che nella home precedente non avevano casa.

Il risultato è un template approvato nella sua composizione visiva e funzionale, che diventa riferimento anche per i primi livelli di navigazione del menù.

Vedi il sito live
uniroma1.it
La nuova homepage di uniroma1.it
07 · Navigazione

Il menù non si nasconde.

Il menù di navigazione è esposto fino al terzo livello, così si arriva ai contenuti direttamente dalla pagina iniziale. Accanto resta in evidenza il menù dedicato ai diversi target di utenza: è lì che la doppia anima del sito trova una risposta di struttura, non un compromesso.

Mobile-first non è uno slogan. La homepage è stata progettata su quattro breakpoint (393, 1024, 1280 e 1512) e il menù mobile su tre livelli di profondità, più l’overlay di ricerca. Non adattamenti a posteriori: composizioni progettate una per una, perché la gerarchia che funziona su desktop non è la stessa che funziona su un telefono.

La homepage di uniroma1.it su mobile Il menù mobile di uniroma1.it, primo livello Il menù mobile di uniroma1.it, la voce Didattica espansa Il menù mobile di uniroma1.it, terzo livello L'overlay di ricerca di uniroma1.it su mobile

Home · menù su tre livelli · overlay di ricerca

08 · Architettura headless

Le foundations arrivano fino al codice.

Sotto la pagina, il modello dei contenuti resta in Drupal e si sfrutta l’architettura modulare già presente nel CMS: i content type e i Paragraphs dedicati alla composizione della home sono il punto da cui la redazione governa con la massima flessibilità cosa mettere in evidenza, riordinare, sostituire.

Il front end è stato ricostruito da zero come applicazione Next e React, che consuma quei contenuti e li presenta secondo le regole del design system. Le foundations non restano un documento: diventano il comportamento della pagina.

01Contenuti in Drupalil modello dei contenuti
02Paragraphsla composizione della home
03Front end Next e Reactricostruito da zero
04Foundations applicatele regole del design system
Drupal Association: Certified Partner Gold
Drupal Certified Partner Gold prima azienda italiana a ottenere la certificazione
Risultati

Una base su cui costruire, non un punto d’arrivo.

5foundations documentate: palette, tipografia, spaziature, griglie, tono di voce
4breakpoint progettati, dai 393px ai 1512px
3livelli di menù definiti ed esposti dalla pagina iniziale
Design system avviatofoundations condivise per tutto il futuro sito di ateneo
Homepage approvatanella composizione visiva e funzionale
Doppia utenza servitastudenti e pubblico esterno con un’unica identità
Accessibilità digitalecriterio di progetto di ogni componente

Il progetto è nato dal lavoro integrato tra l’ateneo e SparkFabrik, senza intermediazioni: dall’analisi del pubblico alla consegna delle foundations.

La visione

Una pagina oggi. Un sistema per tutto quello che verrà.

La homepage è la prima applicazione. Le foundations restano: documentate, condivise, pronte per ogni prossima pagina del futuro sito di ateneo.

Success Stories

Altri progetti simili

Tutte le success stories