Cos'è un design system e perché serve ai piccoli team
Perché un design system fa risparmiare più tempo a un piccolo team che a uno grande, e da dove partire con poche componenti riutilizzabili.
Team rabbitclipPubblicato: 6 min di lettura
In breve
Un design system è un'unica fonte che raccoglie gli elementi ricorrenti di un marchio, colore, tipografia, pulsanti, moduli, schede, così che una pagina o una funzione nuova nasca da questi elementi già pronti invece di essere disegnata da zero ogni volta. Per un piccolo team significa non doversi più chiedere ogni volta 'come doveva essere questo pulsante'.
Un design system può sembrare un lusso riservato alle grandi aziende, ma è vero piuttosto il contrario: un team piccolo con risorse limitate è proprio quello che meno può permettersi di perdere tempo a correggere incoerenze.
Questo articolo spiega cos'è davvero un design system e cosa porta concretamente a un piccolo team. Per quanto ridotta sia la sua portata, il beneficio agisce nella stessa direzione.
Cos'è davvero un design system
Un design system documenta il linguaggio visivo di un marchio, palette di colori, tipografia, regole di spaziatura, insieme ai componenti riutilizzabili costruiti a partire da quel linguaggio: pulsanti, campi modulo, schede, notifiche, tutto in un unico posto.
Può essere un documento, una libreria di codice o entrambe le cose insieme. Ciò che conta è che un designer o uno sviluppatore che costruisce una nuova pagina possa attingere a un componente già pronto invece di chiedersi ogni volta di che colore debba essere quel pulsante.
Se il pulsante di prenotazione di una catena di centri benessere compare in una sfumatura di verde leggermente diversa su ogni pagina, è un segno concreto che manca un design system.
Un designer non deve costruire questo sistema da solo; accordarsi presto con lo sviluppatore su come chiamare ogni componente nel codice riduce parecchia confusione in seguito.
Perché conta soprattutto per un piccolo team
In un team grande l'incoerenza è un problema di distrazione; in uno piccolo è un problema di tempo. Se un team di due o tre persone ridiscute colore, spaziatura e dimensione del testo a ogni nuova pagina, quel tempo non va al lavoro vero, al contenuto o alla nuova funzione.
Quando si aggiunge una nuova categoria di prodotto al sito di un produttore di abbigliamento da lavoro, un design system già esistente porta a termine il lavoro in poche ore; senza, servono giorni. La differenza sta nel fatto che ogni elemento venga disegnato da una pagina vuota oppure no.
Il risparmio di tempo non si vede solo nella progettazione, ma anche nello sviluppo; con una libreria di componenti pronta, uno sviluppatore riprende un elemento esistente invece di codificare un nuovo modulo da zero, il che riduce anche il rischio di errori.
Cosa succede senza un design system
Con il tempo, un sito accumula decine di stili di pulsanti, campi modulo e dimensioni di titolo che non si intonano più del tutto tra loro. Questo diventa un'esperienza confusa per il visitatore e, per il team, un peso di verifica a ogni modifica: 'è così anche nelle altre pagine?'
Un esempio ricorrente è il sito decennale di un produttore, le cui pagine aggiunte in epoche diverse non hanno più nulla in comune visivamente; ogni pagina porta il gusto di chi l'ha progettata in quel momento.
Da dove parte un piccolo team
Non serve costruire un design system aziendale completo; basta partire da una manciata di elementi di base: una palette di colori principale, due o tre dimensioni di testo, stili coerenti per pulsanti e campi modulo.
Se questi elementi di base vivono in una libreria di codice, un file di componenti condiviso, ad esempio, una nuova pagina si costruisce richiamandoli; una modifica di colore o dimensione avviene in un solo punto e si riflette su tutto il sito.
Un buon punto di partenza è verificare le tre pagine più visitate del sito esistente ed elencare gli elementi che vi si ripetono; questa lista offre un avvio più rapido rispetto a progettare un sistema da zero.
- Una palette principale e i colori secondari vengono definiti in un solo punto
- Vengono fissate due o tre dimensioni di testo (titolo, corpo, testo piccolo)
- I componenti pulsante, campo modulo e scheda diventano riutilizzabili nel codice
- Una nuova pagina viene costruita a partire da questi componenti invece che disegnata da zero
Cosa porta un design system man mano che l'azienda cresce
Man mano che un'azienda cresce, aggiungere una nuova pagina di filiale, una nuova categoria di prodotto o una nuova pagina di campagna richiede giorni su un sito con design system; senza, richiede settimane.
Offre inoltre a un nuovo designer o sviluppatore che entra nel team un unico punto di riferimento; impara il linguaggio visivo del marchio da un'unica fonte, invece di ricostruirlo pagina per pagina.
Di chi è la responsabilità di mantenere il design system
Un design system non resta aggiornato da solo una volta costruito; qualcuno deve seguire i cambiamenti di colore, componente o regola. In un piccolo team questa responsabilità di solito ricade sul designer o sullo sviluppatore più esperto, senza bisogno di creare un ruolo a parte.
Senza una responsabilità chiara, l'incoerenza torna ad accumularsi nel tempo: qualcuno aggiunge un nuovo stile di pulsante, nessuno verifica se corrisponde al sistema esistente, e il sistema si guasta da solo. Per questo vale la pena trasformare in abitudine semplice il rivedere il sistema esistente prima di aggiungere un nuovo componente.
Se il team marketing di un produttore affida una nuova pagina di campagna a un'agenzia che ignora il design system esistente, quella pagina si stacca visivamente dal resto del sito; questo dimostra che un design system ha bisogno di manutenzione, non solo di essere costruito.
Questa responsabilità può sembrare un peso, ma in pratica è piccola; un'ora di revisione al mese basta per la maggior parte dei piccoli team.
Un design system non è il lusso di una grande azienda, è il modo in cui un piccolo team protegge il proprio tempo. In una prima chiamata conoscitiva con rabbitclip si individuano insieme i punti di incoerenza del sito esistente e diventa chiaro da dove far partire un design system di base. Anche un inizio piccolo è sempre meglio di nessun inizio. Le piccole incoerenze accumulate nel tempo finiscono per costare più di un unico grande errore.
Domande frequenti
Un design system serve solo alle grandi aziende?
No, al contrario, è un piccolo team a proteggere di più il proprio tempo con questo sistema; la portata può restare proporzionalmente ridotta. La portata cresce insieme all'azienda.
Quanto tempo serve per costruire un design system?
Uno di base, colore, tipografia, qualche componente, si costruisce in pochi giorni; uno più completo dipende dalla dimensione del progetto.
Si può aggiungere un design system a un sito già esistente?
Sì, le pagine esistenti vengono esaminate per individuare gli elementi ricorrenti, che poi diventano parte del sistema.
Un design system è solo una questione visiva?
No, riguarda anche il riuso dei componenti nel codice; per questo interessa sia il designer sia lo sviluppatore.
Un design system deve vivere in un solo strumento di progettazione?
No, deve esistere sia nel file di design sia nel codice; se i due si disallineano, il sistema perde coerenza nel tempo. Può essere semplice come aprire un unico file di componenti condiviso nel codice.
