Design System per le interfacce web

Da figura con formazione mista, tra comunicazione, design e sviluppo front-end, credo che il miglior modo per approcciarsi ad un lavoro ben congegnato e manutenibile sia avere un metodo (oltre alle competenze, ovviamente).

Come per il codice, anche per il design delle interfacce web possiamo avvalerci di strumenti che ci aiutino a progettare in maniera coerente con il brand, il suo target ed i suoi valori, ma anche a creare un prodotto che sia comprensibile e, di fatto, rinnovabile, da chi in futuro lavorerà a quello stesso progetto. 

Per questo, e per una serie di vantaggi che vedremo meglio avanti, quando si disegna una interfaccia web si parte dal progettarne il Design System.

Di cosa parliamo?

Citando  Nathan Curtis: 

“Quasi sempre, un design system offre una libreria di stili visivi e componenti documentati e rilasciati come codice riutilizzabile per gli sviluppatori e/o strumenti per i progettisti. Può anche offrire indicazioni su accessibilità, layout e meno spesso branding, visualizzazione dei dati, modelli UX e altri strumenti.”

Potremmo dire che si tratti, dunque, di un insieme coerente di principi guida, regole, e strutture modulari riusabili che definiscono l'architettura e l’aspetto visivo di un prodotto digitale. 

Vediamo nel dettaglio gli elementi che un Design System ben strutturato dovrebbe avere.tinymce

1. Styleguide

• Colori: la palette di colori del brand, che include colori primari, secondari, e quelli per feedback come errori, successo, ecc. 
• Tipografia: un sistema di tipografia scalabile, con dimensioni, pesi e stili dei caratteri. 
• Griglie e Spaziatura: griglie e ingombri della spaziatura, per mantenere la coerenza nel layout. 

2. Componenti 

• Componenti Atomici: un set di elementi di interfaccia utente riutilizzabili e standardizzati come pulsanti, input, moduli, ecc.
• Composizione: componenti più complessi, costruiti a partire da quelli atomici, come ad esempio form, card, header, ecc.
• Naming Conventions: una nomenclatura chiara e consistente per i componenti e le loro varianti facilita la ricerca e l'utilizzo.

3. Icone e Asset

• Iconografia: quali set di icone usare e come inglobarle nel progetto.
• Asset Grafici:  immagini o illustrazioni organizzati in modo da essere esportabili o facilmente accessibili agli sviluppatori

4. Guidelines e Documentazione

• Guidelines: una sezione per guidare i designer e gli sviluppatori, dedicata all'uso dei componenti, delle loro varianti e le best practices nel Design System. A questo proposito ci sono poi degli strumenti, come ad esempio Storybook, che vanno oltre il mero design, creando così una libreria dei componenti del progetto, dove di ogni elemento è possibile visionare l’aspetto grafico, il codice per la realizzazione del suo frontend e la sua funzionalità. 
  
  
• Pagina di Overview: una pagina che fornisca un'overview del Design System, includendo link rapidi ai componenti principali e alle guidelines.

5. Prototipazione e Interazioni

• Flussi Utente: i flussi prototipati per mostrare la user journey del progetto.
• Interazioni: interazioni e transizioni per simulare il comportamento dell'UI e rendere più chiaro il lavoro da effettuare lato sviluppo del codice o lato cliente

Quali vantaggi?

Come dicevo all’inizio dell’articolo, le motivazioni che spingono un designer/organizzazione ad adottare questo approccio (o perlomeno quelle che dovrebbero spingere a farlo) sono svariate. 

1. Completezza delle informazioni: si tratta di un ottimo modo per avere una visione più completa e lungimirante di progettazione. Disegnare i singoli elementi permette di avere un sistema modulare che evidenzia subito delle mancanze e che può essere d'aiuto in caso di upgrade di funzionalità o nuove richieste progettuali
2. Ordine ed Ottimizzazione: è uno strumento che facilita la comunicazione tra designer e developers (cosa da non sottovalutare). Il fatto che si possano creare componenti facilmente individuabili e che ci siano varie funzionalità pensate per facilitare il lavoro dello sviluppatore nella scrittura, ad esempio, del css e nell’esportazione degli assets, riduce i tempi di gestione progettuale.
3. Collaborazione: un design system in genere viene realizzato tramite un tool collaborativo. Questo fa sì che si possa suddividere il progetto in task e lavorare in contemporanea sullo stesso file, ma in maniera sicura e coerente. Come per il codice, anche questi tool consentono di creare dei branch di lavoro e quindi di fare versioning, che protegge il flusso e consente uno sviluppo a più mani.
4. Riuso: avere un buon design system consente, ovviamente un ottima manutenibilità e anche il riuso per progetti appartenenti ad esempio alla stessa azienda, per cui un flusso più veloce ed efficace, in quanto gli attori coinvolti, designer e developer, sono già a conoscenza dei vari pezzi che lo compongono.
5. Inclusività: L'attenzione all'accessibilità, all'adattabilità e ai principi di design centrati sull'utente rendono le esperienze digitali inclusive ed efficaci. Inoltre, l'integrazione dell'IA nei sistemi di design, vista come un'evoluzione naturale, aiuterà ad automatizzare compiti di routine, garantire la coerenza e accelerare il processo di design, permettendo ai designer umani di concentrarsi su problemi più complessi e innovativi.

Qualche esempio

1. Google Material Design si distingue per il suo principio di imitare le proprietà del mondo fisico, fornendo un vasto sistema open source per il design di prodotti digitali.
2. IBM Carbon Design System è notevole per il suo ampio framework, per lo più open source, che si estende oltre i prodotti IBM, enfatizzando l'estensibilità e l'adattabilità per varie esperienze digitali.
3. Mailchimp Pattern Library semplifica il design con un approccio diretto, concentrato su elementi di design fondamentali come colore, sistemi di griglia, tipografia e visualizzazione dei dati.
4. Atlassian Design System funge da robusto framework che riflette il marchio e i principi di design di Atlassian, soddisfacendo una vasta gamma di esigenze di design e sviluppo.
5. Airbnb Design System si concentra sulla coerenza nelle sue proprietà digitali, riflettendo sul suo importante restyling e sull'approccio all'innovazione e alla collaborazione.
6. Design system .italia, il pacchetto per la PA italiana, che è chiaramente specifico per la pubblica amministrazione, ma da utilizzatrice posso affermare che ha dritte sull'accessibilità che tutti dovrebbero seguire.
7. Resin (ultimo della lista ma solo perché più nuovo rispetto agli altri), design system di Telepass, che ha già avuto grande risonanza tra i designers italiani e disponibile su Figma, per cui tutto da scoprire!

Strumenti e Risorse Utili

• Figma: per il design e la prototipazione, con la sua Community propone template e componenti per ispirazione o come punto di partenza. Inoltre sono disponibili numerosi plugin per automatizzare e migliorare il flusso di lavoro, come quelli per la gestione dei colori, tipografia, e spaziatura.
• Coolors o Adobe Color: per la creazione della palette di colori.
• Google Fonts: per la selezione di font accessibili e variati.
• WCAG Guidelines: per riferimenti sull'accessibilità.