--- title: "Sapienza: il design system d'ateneo, dalla homepage" url: "https://www.sparkfabrik.com/it/case-studies/sapienza/" lang: "it" type: "case" date: "2026-08-17" lastmod: "2026-10-26" description: "Un design system per il più grande ateneo europeo, dalla homepage: analisi del pubblico, foundations documentate e front end Next e React per uniroma1.it." keywords: ["Sapienza","case study","design system","foundations","homepage","Drupal","Next","React","università","SparkFabrik"] image: "https://www.sparkfabrik.com/images/og/case-studies-sapienza.webp" translations: en: "https://www.sparkfabrik.com/en/success-stories/sapienza/index.md" schema: {"@context":"https://schema.org","@id":"https://www.sparkfabrik.com/it/case-studies/sapienza/#article","@type":"Article","about":{"@type":"Organization","name":"Sapienza Università di Roma","url":"https://www.uniroma1.it/"},"articleSection":"Case Study","author":{"@id":"https://www.sparkfabrik.com/#organization"},"dateModified":"2026-10-26T10:36:30+01:00","datePublished":"2026-08-17","description":"Un design system per il più grande ateneo europeo, dalla homepage: analisi del pubblico, foundations documentate e front end Next e React per uniroma1.it.","headline":"Sapienza Università di Roma","image":"https://www.sparkfabrik.com/images/case-studies/sapienza/showcase-apertura.webp","mainEntityOfPage":{"@id":"https://www.sparkfabrik.com/it/case-studies/sapienza/#webpage"},"publisher":{"@id":"https://www.sparkfabrik.com/#organization"}} --- # 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.** - Cliente: Sapienza Università di Roma - [Settore](https://www.sparkfabrik.com/it/servizi/by-industry/education/): Università e ricerca - 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](https://www.sparkfabrik.com/images/case-studies/sapienza/showcase-apertura.webp) 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 - **11** **facoltà**, ciascuna con la sua identità e la sua comunità studentesca - **58** **dipartimenti**, 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**. 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. 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. 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. 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. > 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](https://www.uniroma1.it/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. 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. Risultati ## Una base su cui costruire, **non un punto d'arrivo.** Il progetto è nato dal **lavoro integrato tra l'ateneo e SparkFabrik**, senza intermediazioni: dall'analisi del pubblico alla consegna delle foundations. - **5** **foundations documentate**: palette, tipografia, spaziature, griglie, tono di voce - **4** **breakpoint progettati**, dai 393px ai 1512px - **3** **livelli di menù** definiti ed esposti dalla pagina iniziale - Design system avviato, foundations condivise per tutto il futuro sito di ateneo - Homepage approvata, nella composizione visiva e funzionale - Doppia utenza servita, studenti e pubblico esterno con un'unica identità - Accessibilità digitale, criterio di progetto di ogni componente - **[Sapienza Università di Roma](https://www.uniroma1.it/it/)**: committente e proprietaria del progetto: indirizzo strategico, contenuti, validazione delle scelte di identità e navigazione. Il rinnovo della homepage è stato coordinato dal Comitato editoriale web dell'ateneo. - **[SparkFabrik](https://www.sparkfabrik.com/it/)**: analisi qualitativa del pubblico, direzione visiva e di contenuto, foundations del design system, progettazione della homepage e dei primi livelli di menù, sviluppo del front end. 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. [Parlaci del tuo progetto](https://www.sparkfabrik.com/it/contatti/) [Visita uniroma1.it](https://www.uniroma1.it/it/) Success Stories ## Altri progetti simili - [Luiss: Luiss ricostruisce la sua presenza digitale come un ecosistema: design system multibrand, Drupal e ricerca con agentic AI.](https://www.sparkfabrik.com/it/case-studies/luiss/) - Università - **−70%** nel tempo di pubblicazione dei contenuti - [La Scuola: Il Gruppo Editoriale La Scuola modernizza tutto lo stack, dall'identità digitale all'infrastruttura cloud native.](https://www.sparkfabrik.com/it/case-studies/la-scuola-sei/) - Editoria - [Caleffi: Caleffi rifà il portale enterprise: migrazione a Drupal 10, nuova architettura informativa, nuova interfaccia.](https://www.sparkfabrik.com/it/case-studies/caleffi-new-website/) - Industria - **30** paesi e una ventina di lingue su un solo impianto [Tutte le success stories](https://www.sparkfabrik.com/it/case-studies/) --- *Questa è la versione in Markdown della pagina, per facilitare la lettura da parte di AI e crawler. Visita [https://www.sparkfabrik.com/it/case-studies/sapienza/](https://www.sparkfabrik.com/it/case-studies/sapienza/) per la versione completa con immagini e interazioni.*