Cos’è un Design System?
Il Design System è il cuore di tutti i prodotti digitali ed è molto più di una collezione di regole sui colori e tipografia, di linee guida e componenti di UI. All’interno di un Design System, per esempio, possiamo trovare anche i pattern per l’usabilità e regole di UX Writing (quindi copy e microcopy). Costituisce quindi un vero e proprio punto di riferimento per i nostri flussi di progettazione, in quanto ci permette di garantire la consistenza all’interno dei nostri prodotti digitali.
Negli ultimi anni in Italia se ne parla sempre di più, e a livello internazionale ci sono realtà come IBM e Google che hanno fatto un lavoro eccellente per quanto riguarda il Design System rendendolo disponibile per chiunque.
Perché e come implementare un Design System?
Implementare un design system all’interno del proprio team di lavoro può portare numerosi benefici, tra i quali possiamo trovare:
- scalabilità, perché permette di evolvere un prodotto digitale, partendo da basi già consolidate, sia a livello di design che a livello di infrastruttura tecnologica;
- consistenza, in quanto avendo delle linee guida e dei componenti standardizzati possiamo rendere i nostri prodotti digitali coerenti dal punto di vista funzionale e visuale;
- collaborazione, soprattutto tra il team di design e di sviluppo, ma anche con gli stakeholder. Ne ho parlato in modo approfondito in questo articolo.
Dobbiamo immaginare il nostro Design System come una scatola dei Lego, in cui ogni componente corrisponde a un mattoncino. Ognuno di essi è un tassello importante per la nostra progettazione e per questo dobbiamo curare molto bene la parte della documentazione.
Come possiamo iniziare?
Iniziare un’attività enorme come può essere quella di costruire un Design System da zero può sembrare uno scoglio insormontabile.
Quando ci troviamo di fronte a queste tipologie di “imprese” quello che può aiutare è porsi un obiettivo e chiedersi: quali problemi vogliamo risolvere? Come vogliamo, o abbiamo bisogno, di strutturare il nostro lavoro in modo che sia di facile mantenimento?
Dopodiché si parte facendo un’analisi di ciò che attualmente abbiamo all’interno dei nostri file di progetto e quindi:
- effettuare un primo audit di ciò che è in produzione e che non è stato disegnato; in questo modo avremo traccia anche di possibili casistiche da implementare nei nostri componenti;
- individuare i colori, icone, shadow, spacing, grid/column system che sono attualmente presenti nei nostri prodotti digitali. Questi sopra citati nello specifico sono i più importanti in quanto costituiscono le fondamenta di tutto il nostro Design System;
- individuare la tipografia utilizzata su tutti i nostri touchpoint (quindi dalla schermate mobile, a quelle Web, alla tipografia utilizzata per mandare le email, ecc);
- individuare pattern ricorrenti, in modo da rintracciare anche eventuali disallineamenti o possibili comportamenti da adeguare;
- creare la documentazione scritta che dovrà servire come enciclopedia di riferimento per tutti i membri del team e dove saranno racchiuse tutte le regole di utilizzo dei componenti, pattern e altri componenti di UI.
Ora che abbiamo fatto tutti questi passaggi, una buona pratica è fare ricerca su come altre società o aziende hanno implementato il Design System e come lo usano all’interno dei propri flussi di lavoro.
Consigli per l’implementazione
A mio avviso bisognerebbe spendere una buona parte del tempo lavorativo per delimitare il perimetro di componenti, colori, pattern, content e via di seguito.
Investendo il giusto tempo per scrivere un esaustiva documentazione può salvarci in tantissime occasioni e, di conseguenza, farci risparmiare molto tempo durante la fase di progettazione.
Per quanto riguarda la parte della documentazione, invece, sarebbe opportuno farla a quattro mani con il team di sviluppo in modo da collaborare insieme per costruire quali sono le “regole della progettazione”.
Il Design System non è una cosa solo ad appannaggio dei designer, al contrario, diventa uno strumento anche per gli sviluppatori che, attraverso la programmazione, rendono più veri e reali i componenti che abbiamo progettato su Figma (o su altri software di prototipazione).
Conclusioni e Risorse
Nel mondo digitale di oggi, implementare un Design System non è solo una scelta, ma una strategia per i team nella ricerca della consistenza e della coesione della user experience.
Abbracciando i principi di collaborazione e scalabilità, i team possono creare flussi di lavoro fluidi che permettono di creare migliori esperienze user-centered e prodotti digitali.
Invito tutte le persone, nel loro piccolo, a generare sensibilità attorno a questo tema e iniziare a crearne uno proprio: i risultati saranno sorprendenti!
In seguito ho raccolto alcune risorse per approfondire il mondo del design system:
- Design Systems vi può aiutare a muovere i primi passi, quindi capire come strutturare le linee guida
- Resin, design system di Telepass al quale ho lavorato personalmente
- Base, design system di Uber
- Polaris, design system di Shopify
