L’esperienza utente si è evoluta in un fattore distintivo cruciale nel mondo digitale, ed in tale contesto la collaborazione efficace, la sinergia tra designer e sviluppatori si pone come una sfida di primaria importanza per le organizzazioni. La frammentazione dei canali digitali, l'evoluzione continua delle aspettative degli utenti e la necessità di mantenere coerenza visiva e funzionale su diversi touchpoint, così come l’esigenza di adattarsi con tempestività tanto alle innovazioni tecnologiche quanto a nuovi requisiti normativi, hanno reso la gestione delle interfacce digitali sempre più complessa.
In questo scenario complesso, i Design System emergono come soluzione strategica, fungendo da ponte tra il mondo del design e quello dello sviluppo. Quando integrati con piattaforme flessibili e robuste come Drupal CMS, i Design System possono trasformare radicalmente il modo in cui le organizzazioni creano, gestiscono e fanno evolvere le loro esperienze digitali.
Nel nostro talk presentato a Talks on my Machine, abbiamo esplorato questo tema in profondità. In questo articolo approfondiamo ulteriormente il concetto di Design System e la sua integrazione con Drupal CMS, evidenziando come questa sinergia non solo crei un linguaggio comune tra i team, ma generi un valore reale e sostanziale per le organizzazioni.
Questo articolo fa parte della nostra serie dedicata a Drupal CMS: ti invitiamo a leggere gli articoli precedenti per altri approfondimenti, dai vantaggi, alle alternative, agli aspetti di sicurezza e architetturali.
Un Design System è molto più di una semplice libreria di componenti o di una guida di stile. È un ecosistema completo che comprende principi guida, pattern di interazione, componenti riutilizzabili e linee guida chiare. Questi elementi definiscono collettivamente il linguaggio visivo e interattivo di un brand attraverso tutti i suoi prodotti digitali, garantendo coerenza e scalabilità su larga scala.
Un Design System ben strutturato si fonda su elementi interconnessi che lavorano in sinergia per garantire coerenza e scalabilità:
Come ha evidenziato Nathan Curtis, esperto di Design System: "Un Design System non è un progetto ma un prodotto, che serve altri prodotti". Questa visione sottolinea la natura evolutiva e di servizio del Design System, che deve crescere e adattarsi costantemente alle esigenze mutevoli dell'organizzazione e del mercato.
L'implementazione di un Design System porta vantaggi significativi a diversi livelli dell'organizzazione, con un impatto diretto sul ROI e l'efficienza operativa.
Per l'organizzazione:
Per i designer:
Per gli sviluppatori:
Come osservato durante il nostro talk, le organizzazioni che hanno adottato un Design System maturo hanno registrato miglioramenti in termini di velocità di sviluppo dal 20% al 50%, con una riduzione parallela di bug relativi all'interfaccia utente. Questi risultati non sono puramente teorici, ma si traducono in un impatto diretto sui costi operativi e sulla capacità dell'azienda di innovare.
Drupal CMS, con la sua architettura flessibile e componibile, si configura come una piattaforma ideale per l'implementazione e la gestione nel tempo di un Design System. Questa integrazione può avvenire a diversi livelli, ciascuno con benefici specifici.
L'evoluzione dell'approccio al theming in Drupal ha visto un progressivo e strategico spostamento verso un modello basato sui componenti (component-based), perfettamente allineato con la filosofia dei Design System. Questo approccio garantisce una maggiore flessibilità, granularità e riusabilità nel front-end.
Questo approccio, noto come "Component-Driven Development", favorisce una corrispondenza diretta tra i componenti definiti nel Design System e la loro implementazione tecnica in Drupal, riducendo significativamente il divario tra design e codice ed ottimizzando il workflow di sviluppo.
Una delle innovazioni più significative di Drupal CMS è il Layout Builder, che può essere esteso per integrare nativamente i componenti del Design System. Questo nuovo Layout Builder abilita una maggiore autonomia per gli editor e i team di marketing.
Questa integrazione apre possibilità interessanti per favorire l'uso del Design System da parte di qualunque figura, consentendo a editor e content manager di creare esperienze coerenti senza necessità di competenze tecniche avanzate, snellendo al contempo i tempi di pubblicazione ed i flussi di lavoro.
I Design Token rappresentano un concetto fondamentale nell'implementazione moderna di Design System, agendo come una "fonte unica di verità" per tutti gli attributi visivi e stilistici del brand. La loro adozione è cruciale per garantire coerenza su tutte le piattaforme:
#EB0000, il nostro Spark Red), lo si etichetta in modo semantico (es. colore-primario-titolo-principale). Questo rende le modifiche globali rapide e senza errori, propagando automaticamente gli aggiornamenti a tutti i componenti che utilizzano quel token.L'implementazione di Design Token in Drupal può avvenire attraverso variabili Sass, CSS custom properties o sistemi più sofisticati che sincronizzano automaticamente i token tra strumenti di design e codice.
Come dimostrato nel nostro talk, questo approccio consente di gestire efficacemente il "design drift", ovvero la tendenza delle implementazioni tecniche a divergere progressivamente dal design originale, mantenendo così una coerenza perfetta design-to-code.
L'integrazione tra Design System e Drupal CMS richiede un ecosistema di strumenti e di workflow che facilitino la collaborazione tra designer e developer, superando i tradizionali silos operativi. Ecco dei must-have come spunti.
Storybook è ormai diventato uno standard de facto per lo sviluppo, la documentazione e il testing di componenti UI, fungendo da anello di congiunzione:
L'integrazione di Storybook con Drupal consente di sviluppare componenti in isolamento, testarli in modo approfondito e solo successivamente integrarli nella piattaforma CMS. Come risultato di questo approccio, è possibile migliorare significativamente la qualità del codice e ridurre il tempo di sviluppo, traducendosi in un time-to-market più rapido per nuove implementazioni e nuove funzionalità..
ZeroHeight è una soluzione eccellente e largamente utilizzata per centralizzare e condividere la documentazione del Design System, rendendola facilmente accessibile da tutti gli stakeholder dell’organizzazione:
Questo tipo di piattaforma facilita enormemente l'adozione del Design System a livello organizzativo, fornendo un punto di riferimento chiaro, sempre aggiornato ed accessibile tanto da designer e sviluppatori, quanto da content managers ed altri stakeholder di business.
L'applicazione delle pratiche di Continuous Integration/Continuous Delivery (CI/CD), tipiche del mondo DevOps, al Design System, crea un approccio noto come "DesignOps". Questo eleva il Design System a un livello operativo superiore, garantendo una continuità, coerenza e rapidità senza precedenti negli aggiornamenti.
Questo approccio "Design Ops" estende i benefici delle metodologie DevOps (come velocità, affidabilità ed automazione) nel mondo del design, garantendo qualità, rapidità e coerenza nell’evoluzione dell’esperienza digitale.
Per illustrare concretamente i benefici dell'integrazione tra Design System e Drupal CMS, esaminiamo alcuni casi reali implementati con successo dal team di SparkFabrik. Questi esempi vogliono ispirare e dimostrare come l’adozione strategica di un Design System non sia solo una best practice teorica, ma una leva strategica per raggiungere gli obiettivi di business.
Per Zambon Group, multinazionale farmaceutica con un’ampia e complessa presenza digitale, abbiamo implementato un Design System integrato con Drupal che ha permesso di:
Il Design System ha creato un linguaggio visivo unificato che riflette globalmente l'identità del brand Zambon, consentendo al contempo la flessibilità necessaria per rispondere alle esigenze specifiche di diversi mercati e linee di prodotto.
Per Caleffi, importante player multinazionale nel settore idraulico, l'implementazione di un Design System integrato con Drupal ha consentito di:
Il Design System ha definito non solo componenti visivi, ma anche pattern interattivi specifici per l'e-commerce e la gestione del catalogo, creando un'esperienza di navigazione intuitiva che valorizza sia i contenuti informativi che quelli di prodotto e contribuisce direttamente agli obiettivi di business di Caleffi.
Per l'Università Bocconi, istituzione educativa di prestigio internazionale, l'implementazione di un Design System integrato con Drupal ha consentito di:
Il Design System ha definito non solo componenti visivi, ma anche pattern interattivi specifici per il contesto educational, come navigazione dei corsi, presentazione dei docenti e modalità di iscrizione, creando un'esperienza utente intuitiva e coerente per tutti i tipi di utenti: studenti, docenti, personale amministrativo e stakeholder esterni.
Dopo anni di implementazione di Design System ed un’esperienza ultradecennale in piattaforme Drupal enterprise-grade, abbiamo maturato una prospettiva unica su ciò che realmente funziona e su come massimizzare il valore per i nostri clienti. Vorremmo condividere alcune riflessioni personali che vanno oltre le best practice teoriche.
La nostra esperienza ci ha insegnato che non tutti i progetti traggono lo stesso beneficio da un Design System. Il valore è massimo, e l’investimento più giustificato, nei seguenti contesti.
Esiste una reale complessità multi-touchpoint e multilingua. Nel caso di Zambon, con decine di siti prodotto in lingue diverse e una presenza globale che richiede una gestione coordinata, il Design System ha letteralmente trasformato il loro modo di lavorare. Prima della sua implementazione, ogni nuovo sito prodotto richiedeva diverse settimane o mesi di lavoro e portava inevitabilmente a inconsistenze visive e funzionali. Oggi, il lancio di un nuovo sito prodotto richiede giorni o un paio di settimane, e la coerenza è garantita a prescindere dal team di lavoro coinvolto.
Il cliente ha una visione di medio-lungo termine e un impegno verso l’evoluzione digitale. Abbiamo osservato che i clienti come Università Bocconi, con una visione strategica del proprio ecosistema digitale e la volontà di investire nel tempo in un asseto come il Design System, hanno tratto benefici esponenziali nel tempo. L'investimento iniziale nel Design System si sta ripagando non solo in termini di efficienza operativa, ma anche di capacità di evolvere la propria presenza digitale in modo coerente e incrementale, riducendo i costi a lungo termine ed aumentando la scalabilità.
Esistono team cross-funzionali che necessitano di collaborazione fluida. Con Caleffi, la presenza di team di marketing, comunicazione e IT coinvolti nella gestione della piattaforma ha amplificato i benefici del Design System. Questo strumento si è trasformato in un vero e proprio linguaggio comune che ha migliorato la collaborazione interna, eliminando frizioni ed incomprensioni ed accelerando decisioni ed operatività.
Ogni implementazione ci ha insegnato qualcosa di nuovo, e alcune lezioni sono particolarmente preziose per chiunque si avvicini al mondo dei Design System, sia come cliente che come professionista.
Il successo tecnico non garantisce l'adozione effettiva. Abbiamo imparato, talvolta a nostre spese, che anche il Design System tecnicamente più elegante fallisce se non viene effettivamente adottato dall'organizzazione. Per questo, oggi dedichiamo almeno il 30% del nostro impegno agli aspetti di change management, formazione e documentazione chiara ed accessibile. La facilitazione, il trasferimento di competenze ed il supporto attivo sono cruciali per la diffusione della cultura del Design System, affinché sia effettivamente adottato, compreso ed integrato nelle pratiche quotidiane.
La governance è più importante dei singoli componenti. Inizialmente, la nostra attenzione era primariamente sulla creazione di componenti UI bellissimi e funzionali. Oggi sappiamo che definire chiaramente ruoli, responsabilità, processi decisionali e workflow per l’evoluzione del Design System è ancora più importante. Un componente imperfetto ma ben governato evolverà nel tempo; un componente perfetto senza governance diventerà rapidamente obsoleto e fonte di incoerenza.
Il valore cresce nel tempo. I nostri clienti più soddisfatti sono quelli con cui collaboriamo da anni, in una logica di vera partnership. Il vero valore di un Design System non emerge solo al go-live, ma si accumula nel tempo, quando il risparmio in termini di effort si moltiplica e l'organizzazione sviluppa una vera e propria "fluenza" nell'utilizzo del sistema. Questo permette di diventare autonomi nell’innovazione, mantenendo identità e coerenza, e di ottimizzare continuamente il Total Cost of Ownership (TCO).
Quando guardiamo ai risultati concreti che i nostri clienti hanno ottenuto grazie all’adozione strategica di un Design System implementato attraverso Drupal, alcuni spiccano particolarmente per il loro impatto di business:
Riduzione drastica del time-to-market. Per Zambon, il tempo necessario per lanciare un nuovo sito prodotto è passato da 8-10 settimane a 2-3 settimane (se non addirittura giorni), un miglioramento del 70% che ha trasformato la loro capacità di rispondere alle esigenze di mercato. Un vantaggio competitivo importante e tangibile.
Autonomia operativa. I team di Caleffi hanno acquisito una capacità di azione autonoma prima impensabile. Oggi, il 60% delle modifiche e delle nuove implementazioni (come nuove landing pages o sezioni prodotto) viene gestito internamente, grazie alla chiarezza e semplicità d'uso del Design System. I team di marketing possono finalmente sperimentare con velocità ed indipendenza.
Resilienza organizzativa e continuità del brand. L'Università Bocconi ha potuto attraversare importanti cambiamenti organizzativi e strategici (come la riorganizzazione di dipartimenti e dei loro siti o l’introduzione di nuovi corsi) senza che questi impattassero sulla coerenza e qualità della loro presenza digitale, poiché il Design System ha funzionato come "memoria istituzionale" dei principi e pattern di interazione.
Ottimizzazione degli investimenti. Tutti i nostri clienti con Design System maturi riportano una riduzione media del 30-40% nei costi di implementazione di nuove funzionalità e canali, con un ROI che diventa positivo tipicamente entro 12-18 mesi dall'implementazione iniziale.
Ma forse il feedback più gratificante che riceviamo non riguarda i numeri, ma la qualità della collaborazione: designer, sviluppatori e stakeholder business che parlano finalmente la stessa lingua, con una comprensione condivisa di problemi e soluzioni. È questa trasformazione culturale che, alla fine, genera il valore più duraturo e profondo per l’organizzazione.
Basandoci sulla nostra esperienza in numerosi progetti complessi, possiamo identificare alcune best practice fondamentali per un'implementazione efficace di Design System con Drupal CMS. L'adozione di queste linee guida trasforma un progetto potenzialmente oneroso in un asset strategico e abilitante per l'intera organizzazione.
Tentare di costruire un Design System completo e “perfetto” fin dall’inizio è un approccio che non funziona: porta inevitabilmente a ritardi significativi, costi eccessivi e demotivazione del team. Inoltre, un sistema “perfetto” non esiste, ed anzi deve essere in costante evoluzione per non diventare obsoleto.
Al contrario, è molto più efficace adottare un percorso pragmatico ed incrementale, focalizzato sul valore rapido e “quick wins” che consolidano l’adozione da parte dei teams:
Questo approccio consente di ottenere valore in tempi più rapidi, validare le scelte iniziali ed evolvere il Design System in modo agile, basandosi su feedback concreti e non solo ipotesi o requisiti iniziali che potrebbero variare.
Un Design System è un “prodotto che serve altri prodotti” e come tale richiede anch’esso gestione e manutenzione continua. Senza una governance chiara, la sua efficacia può diminuire rapidamente, portando a incoerenze, frustrazioni, errori ed, infine, obsolescenza:
Come già spiegato, la governance è spesso il fattore determinante tra un Design System di successo (adottato, compreso, valorizzato) e uno che viene progressivamente abbandonato.
La documentazione e la formazione non sono aggiunte opzionali, ma parti integranti del Design System, per la sua adozione e l’efficacia a lungo termine. Davvero, un Design System è tanto utile quanto lo è la sua documentazione e la capacità del team di usarlo.
Come emerso chiaramente nel nostro talk, anche il miglior Design System dal punto di vista tecnico ha un valore limitato se l'organizzazione non sa come utilizzarlo efficacemente o non è supportata nell’adozione pratica.
Per garantire supporto continuo al Design System, è fondamentale misurare e comunicare il suo impatto a tutti i livelli dell’organizzazione:
Questo approccio data-driven e incentrato sulla comunicazione trasparente aiuta a consolidare il Design System come asset strategico nell’organizzazione e nella cultura aziendale. Configurandolo come investimento strategico e non come un semplice costo, si ne assicura la sostenibilità e l’evoluzione nel tempo.
Guardando al futuro, possiamo identificare alcune tendenze emergenti che plasmeranno ulteriormente l'integrazione tra Design System e Drupal, innovazioni che renderanno la piattaforma CMS ancora più potente, flessibile e rispondente alle esigenze di business.
Stanno diventando sempre più sofisticati gli strumenti che trasformano automaticamente componenti di design, creati in piattaforme come Figma, in implementazioni di codice funzionanti in Drupal. Questo progresso promette di ridurre ulteriormente il divario tra design e codice e si lega intrinsecamente al concetto di low-code/no-code che Drupal CMS sta abbracciando sempre di più..
L'evoluzione dei Design System si sta estendendo oltre il semplice sviluppo web e verso nuove esperienze digitali. L’inclusione di interfacce vocali (Voice UI), realtà aumentata, chatbot, dispositivi IoT ed altri canali emergenti, richiederà una maggiore flessibilità nelle implementazioni Drupal. Il Design System diventerà ancora di più il nucleo centrale per garantire coerenza estetica e funzionale su tutti i touchpoint.
L'intelligenza artificiale sta iniziando a giocare un ruolo nella creazione e manutenzione dei Design System. Le funzionalità AI avanzate offriranno suggerimenti per la combinazione ottimale di componenti, identificheranno inconsistenze e potranno generare varianti di componenti in base a specifici parametri o stili. Questo ottimizzerà ulteriormente il processo di design e sviluppo, sempre sotto la governance umana, aumentando l’efficienza e la velocità.
Con l'emergere di tecnologie standardizzate come i Web Components, l'implementazione di Design System potrà diventare sempre più indipendente dalla piattaforma specifica. Questo consente finalmente il vero riutilizzo cross-platform, non solo all’interno dell’ecosistema Drupal, ma anche su altri servizi. Questa interoperabilità massimizzerà ulteriormente l’investimento nel Design System.
Una notizia recente e di grande rilievo per l'ecosistema Drupal è la creazione del nuovo ruolo di UX Manager all'interno del core leads team di Drupal.org. Questo rappresenta un passo importante verso uno sviluppo intrinsecamente UX-driven, dove l'esperienza utente non è un'aggiunta postuma, ma è integrata fin dalla fase di ideazione e progettazione.
Questo rafforza ulteriormente l'impegno di Drupal verso la creazione di esperienze più intuitive, coese e accessibili per tutti gli utenti, un aspetto che si sposa perfettamente con l'obiettivo dei Design System di garantire coerenza e usabilità su larga scala e che dimostra la maturità e la visione a lungo termine dell'ecosistema Drupal.
L'integrazione tra Design System e Drupal CMS è molto più di una semplice evoluzione tecnica: è un cambio fondamentale nel modo in cui le organizzazioni gestiscono ed innovano le loro esperienze digitali. Questa sinergia offre un linguaggio comune che abbatte le barriere tra designer e developer, accelera lo sviluppo, garantisce coerenza attraverso tutti i touchpoint digitali.
Come abbiamo visto nei case study e nella nostra esperienza diretta, i benefici tangibili di questa integrazione vanno oltre la semplice efficienza tecnica. I Design System, quando implementati con visione strategica e supportati da una piattaforma solida come Drupal CMS, trasformano profondamente il modo in cui le organizzazioni creano, gestiscono ed evolvono la loro presenza digitale, con impatti positivi e duraturi a livello culturale, operativo e strategico.
In SparkFabrik, uniamo competenze avanzate di design strategico, sviluppo Drupal di alto livello e architetture Cloud Native all’avanguardia. Implementiamo Design System dal reale impatto strategico, che non sono solo tecnicamente solidi, ma anche perfettamente allineati con gli obiettivi di business delle organizzazioni. La nostra Suite di servizi di Design è progettata per guidare le organizzazioni in questo percorso di trasformazione digitale, dalla definizione iniziale dei principi di design fino all'implementazione tecnica e all'evoluzione continua.
Se la vostra organizzazione sta considerando l'implementazione o l’ottimizzazione di un Design System con Drupal CMS, vi invitiamo a:
Questo articolo è parte della nostra serie dedicata a Drupal CMS. Per esplorare altri aspetti della piattaforma, vi invitiamo a consultare i nostri precedenti articoli su caratteristiche e vantaggi, confronto con le alternative, strategie di migrazione, sicurezza e compliance, roadmap di innovazione dell’ecosistema, e architettura composable.