Il Design System come linguaggio condiviso

Ci sono due termini che spesso vengono impropriamente scambiati e utilizzati come sinonimi di Design System ma che, in realtà, non lo sono:

1. UI Library: è una raccolta di componenti di design che formano un prodotto digitale. In pratica quella pagina di Sketch che spesso ci troviamo a creare con tutti i nostri bellissimi pulsantini, iconcine, ecc. quando progettiamo un’interfaccia digitale;
2. Style Guide: è la documentazione statica che descrive e accompagna il Design System. Definisce a parole – ma non solo – come dovrebbe apparire un prodotto digitale;

Quindi? Arriviamo al punto? Lo so, è come quando i tuoi genitori ti dicevano “finché non hai 18 anni segui le nostre regole” e, una volta raggiunti i 18 anni, diventava “finché stai sotto il nostro tetto segui le nostre regole” e, alla fine, ti trovi a 30 anni a chiedere alla mamma se puoi uscire con i tuoi amici, ma solo se hai finito tutte le verdure. Ok, mi sto dilungando, vediamo quindi cos’è un Design System.

Il Design System è l’insieme di regole e princìpi che funge da guida per la progettazione di un ecosistema di prodotti digitali coerente su qualsiasi supporto. Contiene le UI Libraries e le Style Guides viste in precedenza, ma anche molti altri elementi guida.  Lo scopo principale e imprescindibile di un Design System è quello di fungere da linguaggio condiviso e condivisibile tra chiunque lavori ad un determinato progetto (Designers, Developers, Social Media Managers, Content Designers, ecc.). In altre parole, chiunque si trovi a dover lavorare nella progettazione di un qualsiasi tipo di comunicazione digitale di un determinato brand, non deve avere nessuna possibilità di uscire dai “binari” stilistici prestabiliti. Nel Design System, infatti, vengono raccolte indicazioni di ogni sorta: caratteri tipografici, colori, spaziature tra gli elementi, border-radius, shadows e chi più ne ha più ne metta.

Insomma, con questo strumento tra le mani nulla viene lasciato al caso.

Vediamo di capirci qualcosa in più

Ormai per i grandi brand il Design System è un must. Tra i tanti, Google è un perfetto esempio da prendere in considerazione grazie al Design System del suo Material Design che puoi consultare a questo link.

https://www.youtube.com/embed/m1diVY4Uzjc

Passiamo ai fatti. Come si fa?

In sintesi, il processo per progettare un Design System come si deve può essere riassunto in tre punti:

1. Definisci: innanzitutto devi pensare alle linee guida teoriche e visive che il brand dovrà seguire, a prescindere dal dispositivo su cui il prodotto digitale sarà visualizzato.
2. Scomponi: riduci al minimo non divisibile qualsiasi elemento. Ciò che andremo a definire non saranno gli elementi complessi – o meglio, non solo – ma tutti quei componenti che non possono essere ulteriormente scomposti. Tranquilli, su questo concetto ci torneremo dopo in modo più approfondito;
3. Comunica: tutto deve essere chiaro. Non lasciare spazio all’immaginazione di chiunque metta le mani sul tuo Design System.

Alcuni esempi pratici

Iniziamo con la proprietà probabilmente più scontata: il colore. Definendo i colori del brand potremmo scegliere l’azzurro come colore primario e, come secondario, il suo complementare: l’arancione. Procediamo definendo i colori che andranno a comunicare uno stato di successo o di errore (in questo caso, rispettivamente, il verde e il rosso). Infine avremo bisogno di alcune tonalità di grigio, quelli che solitamente chiamiamo colori neutri.

Di solito nei nostri progetti utilizziamo almeno 4 tonalità di grigio:

• Un grigio molto chiaro da utilizzare come background;
• Un grigio medio-chiaro per linee, bordi o simili;
• Un grigio medio-scuro per sottotitoli, didascalie, ecc.;
• Un grigio scuro per titoli principali, paragrafi, ecc.

Ovviamente, la quantità e tipologia di colori dipenderà dalle scelte del designer e dalle necessità del progetto specifico. Il punto è che dovremo predefinire qualsiasi stile che ci potrà tornare utile in modo da poter essere riutilizzato in tutto il nostro ecosistema digitale in futuro. Infine, per ognuno dei colori individuati, è buona norma aggiungere alcune delle loro sfumature che ci potranno tornare utili come varianti in diverse occasioni.

Altro elemento imprescindibile in un Design System è la tipografia. La prima cosa da definire sono i font da utilizzare, dopodiché dobbiamo strutturare una gerarchia nell’uso di questi caratteri. Per fare ciò il prossimo passo è decidere i font-size, letter-spacing, colori, e line-height di cui avremo bisogno. Anche sotto questo aspetto noi di PalazzinaCreativa abbiamo uno standard più o meno ricorrente:

• Title XXL: per titoli principali e H1 in generale;
• Title XL: per titoli di sezione o simili;
• Title L: per titolazioni di importanza minore;
• Title M: per esempio per titoletti di paragrafo;
• Title S: per titoli minori;
• Paragraph: per tutti i body copy principali;
• Caption: per didascalie e altre diciture.

Ovviamente questa non è una regola ferrea, potremmo aver bisogno di stili aggiuntivi (per esempio per testi di input ) come, al contrario, potrebbero servircene di meno.

Questi erano solo due esempi ma, come detto in precedenza, tutto ciò che può essere usato in un qualunque prodotto digitale del nostro ecosistema deve essere pensato e definito in anticipo, solo in questo modo il nostro Design System avrà senso di esistere.

L’Atomic Design

In nostro aiuto, come un prode cavaliere Jedi, accorre la metodologia creata da Brad Frost nel 2013 chiamata Atomic Design, che si divide in 5 fasi. Nonostante la suddivisione in fasi questo non è un processo lineare, è piuttosto un’ impostazione mentale utile per pensare alle nostre interfacce come un modello unito e coerente. Questa metodologia ci sarà d’aiuto nel creare le interfacce partendo da un concetto astratto, senza rischiare di procedere per tentativi e perdere di vista gli scopi principali: la coerenza e l’usabilità.

Vediamo nel dettaglio queste fasi:

1.Atomi: qui torniamo al concetto di “scomposizione” di cui abbiamo parlato in precedenza. Gli atomi sono gli elementi più piccoli del nostro prodotto, quei componenti che non possono essere ulteriormente divisi senza cessare di essere funzionali. Un’icona, per esempio, è un atomo in quanto, se scomposta ulteriormente, cesserebbe di essere funzionale.

Esempio di atomo

2. Molecole: sono semplici gruppi di elementi d’interfaccia che funzionano se uniti tra loro. Quando combiniamo due atomi creiamo, quindi, una molecola. La label “search the site” ora definisce l’input, cliccando il pulsante search, il form compilato dall’utente verrà inviato. Il risultato è semplice e riutilizzabile come un componente all’interno della nostra interfaccia.

Esempio di molecola

3. Organismi: sono dei componenti più o meno complessi, composti da gruppi di molecole e/o atomi e/o altri organismi. Questi organismi creano diverse sezioni all’interno della nostra interfaccia. I nostri organismi possono contenere al loro interno tipi di molecole differenti o simili. Un header, come quello riportato qui sotto, può essere composto da un logo, una navigazione primaria e un search form.

Esempio di organismo

4. Templates: sono creati dall’insieme dei nostri atomi, molecole e organismi. Creando così la prima idea di scheletro della pagina, ovvero i nostri tanto amati wireframe. Nel caso che possiamo vedere sotto, il nostro organismo header viene ripreso all’interno del nostro layout.

Esempio di template

5. Pagine: sono semplicemente dei templates popolati da contenuti reali, come immagini, testi, elementi grafici, advertising, ecc. Questo ci aiuta a capire come la pagina, a seconda del caso specifico, si comporterà quando il contenuto andrà a popolarla.

Esempio di pagina

Ma tutto questo casino? Non è tempo perso?

Assolutamente no!

Certo, strutturare un Design System ti occuperà una buona quantità di tempo, ma tutto è funzionale ad un risparmio successivo.

Non ti basta? Allora ti sottopongo alcuni dei tanti vantaggi che può portare questo “nuovo” amico:

• Velocizza i tempi di produzione;
• crea un vocabolario condiviso, facilitando la collaborazione all’interno del team;
• responsività garantita in qualunque supporto grazie alla progettazione a monte;
• future friendly. Perché adottare questo tipo di metodologia garantisce non solo la responsività sui supporti esistenti al giorno d’oggi ma, perché no, anche su eventuali dispositivi non ancora esistenti;
• diventa punto di riferimento essenziale per l’azienda e/o i prodotto/i a cui si rivolge;
• promuove la coerenza visiva per l’azienda;
• facilita il lavoro dei Developers, evitando di farli urlare in ufficio in preda ad una crisi isterica.

Possiamo dire di aver finalmente snocciolato l’argomento e sì, finalmente puoi lasciarti alle spalle le regole dei tuoi genitori e seguire quelle del tuo nuovo compagno di avventure: il Design System. 😉