L’Atomic Design, teorizzato da Brad Frost nel suo omonimo libro (Atomic Design, 2016), ha rivoluzionato il modo in cui pensiamo alla progettazione delle interfacce digitali. Ispirandosi alla chimica, Frost propone una struttura gerarchica composta da atomi, molecole, organismi, template e pagine, per costruire sistemi di design modulari, scalabili e coerenti. Ne ho parlato in un articolo in questo blog
Questa metodologia si è rivelata particolarmente utile per affrontare la complessità crescente del design digitale, dove l’accessibilità, la coerenza visiva e la riusabilità sono diventati requisiti fondamentali. In questo articolo, voglio condividere un’estensione personale di questo approccio, che parte da un livello ancora più fondamentale: le particelle.
Indice rapido
Dalle particelle al cosmo: un design system modulare
Il Design Particellare è un’estensione concettuale dell’Atomic Design che introduce un nuovo livello fondamentale: le particelle, e propone una visione sistemica e universale del design, capace di adattarsi alla complessità contemporanea. La principale differenza tra il mio modello e l’approccio di Frost, non è solo nella estensione concettuale della sua analogia ma nel fatto che la mia proposta tenta di superare il legame atomo-tag html.
Se immaginiamo una pagina web o un’interfaccia di un app come un “organismo“, possiamo vedere le sezioni o le fasce che li compongono come degli “organi“. Sappiamo che ogni organo è formato da “cellule“, ovvero i moduli. Infine, ogni cellula è formata da “molecole complesse“, ovvero i componenti.
Il design particellare si basa, quindi, su una progettazione a 7 livelli di profondità, raggruppabili in due macro-livelli:
- Microscopico: Questo macro-livello rappresenta la UI Design pura, ha lo scopo di predisporre gli stili e gli elementi che definiranno tutto il nostro design system.
- Macroscopico: Questo livello entra nell’ambito della UX Design e ha lo scopo di di prototipare le pagine o le interfacce del nostro prodotto digitale, definendone contenuti, comportamento e l’interazione con l’utente.
Quindi, partendo da una progettazione microscopica e andando a comporre progressivamente elementi sempre più macroscopici, si può costruire, in maniera semplice e modulare, una pagina web o un interfaccia fino ad un intero ecosistema, mantenendo coerenza visiva grazie ad un sistema di design scalabile.
Design microscopico
L’obiettivo del design microscopico è quello di definire, attraverso un UI kit, le regole fondamentali del nostro design system e progettare tutti gli elementi che comporranno le pagina o le interfacce del nostro ecosistema (Sito internet o app). Per comprendere al meglio questo modello è opportuno fare un parallelismo con la fisica quantistica.
Come in fisica, anche nel design ogni organismo è composto da cellule. Le cellule sono l’unità fondamentale di ogni essere vivente, maggiore è il numero di cellule maggiore sarà la complessità dell’organismo. Tuttavia anche la cellula è composta da elementi più piccoli: Le molecole, che a loro volta sono frutto di un legame di atomi. Gli atomi sono l’unità minima della materia ma in realtà anch’essi composti di elementi ancora più piccoli: Le particelle.
Tali particelle sono “quantizzate“, significa che le loro proprietà fisiche non possono assumere un valore qualsiasi all’interno di un intervallo continuo, ma solo valori specifici e discreti. In questo capitolo andremo ad analizzare questi elementi per vedere in che modo possiamo costruire il nostro Design system.
1. Le particelle: Stili globali
Prima ancora di definire gli atomi, è utile stabilire le particelle, ovvero le “regole” del sistema di design che caratterizzano tutti gli atomi. Queste regole rappresentano le “leggi globali” del nostro design system, allo stesso modo di come il comportamenti delle particelle influenzano le leggi universali della fisica. Al posto di fotoni, elettroni, protoni e neutroni avremo quindi elementi come:
- Colori globali
- Caratteri tipografici
- Regole tipografiche
- Stile dei tratti
- Ombre e bagliori
- Spaziature
Queste “particelle” sono quantizzate perché basate su unità digitali fisse (pixel, valori binari e/o esadecimali), e costituiscono le “leggi fisiche” del nostro universo visivo.
Per costruire il nostro design system, quindi partiamo dalla definizione dei colori, ad esempio: Cplore primario, secondario, colore del testo, colore elemento in risalto, il bianco, il nero ed eventuali fondi; Costruendo in questo modo una palette colori.
Poi andiamo a dichiarare il o i font di riferimento: Primario, secondario. Oppure: Titoli, testi. Possiamo anche determinare le nostre “Leggi” tipografiche di base, ad esempio: l’interlinea dei testi, la spaziatura tra i caratteri, eventuali rientri o se vogliamo il rapporto da applicare ai vari corpi testo.
In questa prima tavola possiamo inserire anche eventuali stili dei tratti, definendo uno spessore standard, se si prevedono tratteggi o elementi terminali. Potremmo, se necessario, anche andare a definire la presenza degli angoli smussati e un criterio univoco.
Possiamo anche definire altri aspetti del nostro design system come le ombre o i bagliori che si possono applicare agli elementi.
Infine, possiamo andare a stabilire in questa fase le spaziature tra gli elementi o tra i moduli. Una aspetto che può essere trattato a questo livello par dare uniformità dall’inizio oppure che può essere trattato a livello macroscopico, in base alle nostre esigenze.
Va ricordato sempre che tutte le regole definite al livello più microscopico hanno prevalenza su quelle definite ai livelli successivi.
2. Gli Atomi: Elementi globali
Gli atomi sono gli elementi minimi di design, indivisibili ma formati dalle particelle che ne definiscono le caratteristiche. Quindi dopo aver definito gli stili globali possiamo andare a definire:
- Forme geometriche – Caratteristiche degli elementi geometrici: Rapporto, angoli, padding o margini interrni, bordi, varianti di colore.
- Stili di testo – corpo, peso e colore e varianti dei vari: titoli, paragrafi, etichette, testo pulsante
- Set di Icone e pittogrammi – Forma, colore, varianti e rapporto delle varie icone: frecce, menù, home, preferiti etc..
Ogni atomo può essere utilizzato e combinato con altri atomi per creare varie molecole. Ad esempio, un pulsante è creato da un “atomo” di “rettangolo”, un atomo di “testo del pulsante” e un atomo di icona “freccia dx”.
3. Le Molecole: Componenti
Le molecole, quindi, sono combinazioni di atomi che iniziano a svolgere una funzione all’interno della nostra interfaccia. Una volta che abbiamo definito le regole e gli elementi globali, possiamo andare a progettare i componenti che verranno utilizzati nel nostro artefatto grafico.
All’interno del nostro design system dobbiamo andare, quindi, a definire tutte le molecole ovvero un elenco dei componenti con i vari stati, le varianti per l’accessibilità e le varianti di colore, come ad esempio:
- Pulsanti
- Checkbox e radio button
- Textbox e textarea
- Box immagine
- Didascalie
- Label
- Separatori, accordion, tooltip
Ogni “molecola” deve essere progettata per garantire usabilità, accessibilità, compatibilità cross-device con un orientamento responsivo o adattivo.
4. Le Cellule: Moduli
I moduli, come le “cellule” del nostro corpo, sono elementi formati da “molecole” più o meno complesse specializzati in una funzione specifica. Le cellule costruiscono le gli organi vitali del nostro organismo.
Nel nostro design system dovremmo riportare tutti i moduli del nostro sito o della nostra app, come ad esempio:
- Modulo form contatti – Formato da diverse textbox, checkbox e pulsanti
- Modulo accordion – formato dai singoli accordion e titolo moduli
- Modulo carosello – formato da box immagine, label, pulsante “read more”, pulsanti “frecce”ù
Questi sono solo esempi, le combinazioni sono ovviamente infinite ma possiamo sempre andare ad arricchire il nostro design system all’occorrenza grazie alla scalabilità del nostro approccio.
Una volta definiti tutti i moduli possiamo procedere con l’assemblare le nostre pagine basandoci su un architettura e un wireframe ben definiti.
Design macroscopico
Se nel design microscopico cerchiamo di predisporre gli elementi, nel design macroscopico organizziamo gli spazi assembliamo interfacce o pagine web: è la fase di prototipazione.
Progettato il nostro UI kit e definito quindi il design system del nostro ecosistema visivo, possiamo assemblare e combinare cellule e molecole tra loro per assemblare le sezioni e le fasce della nostra interfaccia.
Se immaginiamo la pagina di un sito o l’interfaccia di un app come un organismo che fa parte di una comunità allora possiamo andare a proseguire la nostra analogia del design macroscopico in questo modo:
5. Gli Organi: Fasce e sezioni
La header, il footer, la fascia newsletter di un sito la particolare finestra di un applicazione, sono tutti organi, con funzioni specifiche e che permettono il corretto funzionamento dell’organismo, che sia esso un’applicazione o un sito internet.
Le fasce possono essere composte da uno o più moduli e componenti. Ad esempio la sezione “Hero” di un sito può essere composta da: Modulo “navbar” + Componente “h1 home” (che può essere visto anche come un modulo formato da una solo componente, formato a sua volta da un solo elemento globale “Titolo h1”) + Modulo “immagine schermo intero” + Componente “Pulsante arrowdown”.
Ma anche il layout è un organo esattamente come le ossa che costituiscono il nostro sistema scheletrico. A livello macroscopico, infatti, dobbiamo andare a disegnare dei wireframe per definire “l’ossatura” delle nostre pagine, definendo la posizione delle fasce e/o le sezioni prima di andare “mettere la pelle” al nostro “organismo”.
6. Organismi: Pagine o interfacce
A questo punto seguendo il wireframe, possiamo andare a comporre ogni singola pagina o costruire l’interfaccia della nostra app posizionando le fasce e i componenti. Assemblate le nostre pagine e posizionati tutti gli organi al posto giusto, possiamo dire di aver creato il nostro organismo, non ci rimane che riempirlo e “animarlo” grazie alla definizione di:
- Contenuto: si applicano gli stili visivi al nostro layout e successivamente si “popolano” di contenuti le pagine inserendo testi e immagini.
- Comportamento: si stabiliscono le interazioni, le animazioni e le azioni del nostro prodotto
A questo livello di progettazione, il nostro compito è quindi quello di definire l’aspetto del nostro organismo e il comportamento che avrà in relazione delle azioni dell’utente e delle altre pagine
7. Ecosistema: design system, pagine e prodotti
L’insieme di interfacce o di pagine del nostro sito e il nostro ecosistema di design, fatto da organismi simili e organismi completamente diversi tra loro, più o meno complessi, da quelli monocellulari a quelli composti da diversi organi. L’analogia regge, rimane coerente e il modello è scalabile e modulabile.
Conclusione
Partire dalle particelle e seguire un percorso evolutivo fino agli organismi permette di costruire un Design System solido, accessibile e scalabile. Questo approccio non solo facilita la collaborazione tra designer e sviluppatori, ma garantisce anche una maggiore coerenza tra i prodotti digitali, migliorando l’esperienza utente in modo sistemico.
Questo articolo è una riflessione, il tentativo di evolvere l’affascinante approccio di Brad Frost, senza inventare niente di nuovo ma semplicemente cercando di espandere il modello Atomic design.
