Design system workshop. Alla, i nomi delle cose, e le lontre

Mercoledì scorso (10 ottobre) ho fatto il workshop con Alla Kholmatova sui design system.

[Angolo formazione]

Cosa sono i design system?

Letteralmente sono dei "sistemi di design": una volta che hai una visione chiara sul design del tuo progetto (app, sito, chiamalo come ti pare), fai una sorta di inventario dei concetti che ci sono dietro le scelte progettuali che hai fatto e delle componenti che lo costituiscono.

In pratica se lavori nell'ambito del web design, direttamente o indirettamente, un design system è (dovrebbe essere) il tuo pane quotidiano.

Che te ne frega a te?

In Modo ci capita spesso di lavorare con dei design system. Noi in particolare lavoriamo a delle style guide, che sono sottoinsiemi dei design system... diciamo più pragmatici e meno teorici. Ad essere sinceri io e Giulia abbiamo le mani su design system quattro giorni su cinque.

Ma, come tutto il resto, non le progettiamo. Le realizziamo. Bene.

Essendo però dei meri manovali, ci manca tutta la parte che viene "prima" del nostro lavoro. La parte progettuale. Il workshop è stata un'ottima occasione per approfondire la parte di progettazione dei design system nella sua integrità. Con una delle più brave del settore.

Chi è Alla Kholmatova?

Alla Kholmatova è l’autrice del libro “Design systems” ed è una guru di tutto quello che riguarda i design system: dalla definizione, alla creazione, alla manutenzione. Lei è sicuramente una delle voci più rispettare in questo ambito.

[Fine angolo formazione, torniamo al workshop]

Com'era e com'è andato il workshop

Il workshop è andato bene ed è stato carino. Eravamo al Camplus Bononia nella sala grande e in totale c'erano una 70ina di persone, divise in tavoli da sei. Post-it come se non ci fosse un domani e pagine di siti stampate sul tavolo. La giornata è stata suddivisa alternando momenti di teoria (Alla parla, tu ascolti) e momenti di pratica (Alla spiega, tu ritagli pezzettini di siti, li raggruppi ben bene, e li attacchi).

Sono stati toccati molti degli aspetti che riguardano la vita di un design system così come le componenti che lo compongono. Cito a memoria:

• Bootstrap è un design system? 
  No! Bootstrap è una libreria di componenti. È volutamente generica e quindi gli mancano i principi che dovrebbero stare dietro a ogni buon progetto. Dai, questa era facile.
• Come si definiscono e come si battezzano le "cose".
  1. Identity key actions.
  2. Match actions to patterns.
  3. Define pattern.
  4. Test across product.
• Come dare un nome ai pattern.
  Insieme agli altri partecipanti abbiamo convenuto che questa attività resta la più difficile del nostro lavoro. Ci sono comunque però dei modi per facilitare questa azione, come usare delle metafore. Che comunque sono difficili da trovare.

E poi ancora come manutenere i design system, strutturarli, come chiamare i componenti (moduli? organismi? elementi? robi?), come documentarli etc etc.

Insomma, tanta roba. Alla la sa lunga.

Due cose simpatiche

Chiudo citando due cose simpatiche, che alla fine le si trova sempre.

1. Design system per cuccare facile

Parlando dei principles, dei prìncipi (ansia per questo accento) dei design system, Alla ha fatto due esempi molto carini. Abbiamo detto che un design system è fatto bene se è coerente e se rispecchia i prìncipi del prodotto che compone. Provo a fare un esempio: se valorizzi un principio di efficienza, conoscenza nel dettaglio delle informazioni, rapidità di confronto e di scelta analitica, avrai un altro tipo di design con tanto testo, tante schermate, tante informazioni. Se invece i tuoi principi come azienda sono promuovere la semplicità, l’istinto, il contatto diretto tra le persone e la semplicità dei rapporti tra le persone, avrai un tipo di design con poche componenti, colori primari, poca gestualità, poco testo. Sembra ovvio adesso, no? :-)

2. Di lumache, lontre, ippopotami e pianeti

Parlando di nomi da dare alle cose, dentro Bulb (l’azienda per la quale Alla lavora in questo momento), di comune accordo con gli sviluppatori hanno stabilito una nomenclatura originale per indicare le grandezze dei testi e le spaziature tra i componenti delle interfacce.

I pianeti del sistema solare per le spaziature tra i componenti (già li sento: "Il calendario lo facciamo distante dal bottone Venere o Terra? Venere dai, non esagerare")

Gli animali per le grandezze di carattere ("Quanto lo facciamo grande 'sto titolo? Mammut o balena? Boh, Mammut dovrebbe bastare).

I grafici saranno pure fighi, ma i programmatori sanno come farsi passare il tempo :-)

In conclusione

Il workshop è stato carino, organizzato bene e sufficientemente completo.
Il mio modo di lavorare non è stato rivoluzionato (per fortuna, direi) e sicuramente porto a casa una consapevolezza maggiore di come si progettano le "cose" che noi poveri front end materialmente creiamo.

Bravi tutti i ragazzi di Ideato e Extrategy che hanno organizzato e gestito l’evento.

ps. Chissà come considererebbero Plutone quelli di Bulb 🤓