logo-monade

Sviluppo

Impariamo, insegnamo, condividiamo

Impara le ultime tendenze del digitale

Eventi, conferenze e incontri speciali

Blog

Atomic Design System

atomic-design-system

Negli ultimi anni si sente parlare sempre più spesso di design system: un insieme di standard che definiscono le regole visive e funzionali di un prodotto digitale che servono ad assicurarne la coerenza su diversi supporti e tra prodotti appartenenti allo stesso brand.

L’articolo si pone l’obiettivo di approfondire l’atomic design system, una delle metodologie che si possono seguire per creare un design system coerente e funzionale. Nei prossimi paragrafi esploreremo l’origine di questo framework, il cui nome deriva dalla chimica, e come i componenti di design si suddividono al suo interno.


Una metodologia modulare

L’origine della metodologia atomica si deve a Brad Frost, scrittore e consulente di design system. Nell’accezione con cui Frost ha definito il framework, questo identifica un metodo modulare per la progettazione interfacce attraverso la definizione di 5 fasi che lavorano in sinergia per creare un design system coerente e gerarchico:

  1. Atomi
  2. Molecole
  3. Organismi
  4. Template
  5. Pagine

Prima di addentrarci nel vivo di ogni fase è necessario fare un passo indietro e rispolverare le nozioni di chimica utilizzate da Frost per esplicare la metodologia atomica.

Nel mondo naturale, la materia si organizza in strutture sempre più complesse, iniziando dagli atomi, le unità più semplici e indivisibili, che si combinano per formare molecole.

Queste molecole, composte da due o più atomi legati chimicamente, mantengono le proprietà degli atomi ma sono più tangibili operativamente. Ad esempio, l’acqua è formata da due atomi di idrogeno e uno di ossigeno.

Queste molecole, a loro volta, si aggregano per creare organismi, che possono essere semplici come i batteri unicellulari o complessi come gli esseri pluricellulari.



Le definizioni sopra riportate semplificano di molto la complessità del mondo che ci circonda, ma sono utili per spiegare il senso con cui nasce l’atomic design system. Prendendo a prestito le parole del suo ideatore:

Tutta la materia che compone l’universo può essere suddivisa in un set finito di atomi e, similmente, un’interfaccia può essere suddivisa in un insieme limitato di elementi più piccoli (cfr. Frost, B. nd).

Per rendere più tangibile il parallelismo design-chimica, ecco un’immagine che illustra una tavola periodica in cui agli elementi chimici sono stati sostituiti gli strumenti propri della progettazione di interfacce.



Dopo questa breve digressione, utile a spiegare la modularità dei design system atomici, è arrivato il momento di spiegare nello specifico le parti che lo compongono.


Atomi

L’atomo, dal greco “ἄτομος” ‘indivisibile’, secondo la teoria atomica concepita da Leucippo, Democrito ed Epicuro, rappresenta la più piccola e indivisibile entità in cui la materia può essere suddivisa. Sebbene la scoperta dell’elettrone a fine del IXX secolo abbia dimostrato l’esistenza di particelle subatomiche invalidando la dottrina atomica, l’idea di indivisibilità rimane un concetto chiave per capire la trasposizione in ambito di design.

In questo senso, gli atomi costituiscono gli elementi più basici di un’interfaccia, ovvero quelli che perderebbero ogni funzionalità se venissero divisi. Facciamo un esempio per essere più chiari: se si dovesse dividere il testo di un bottone dal suo contenitore, quest’ultimo risulterebbe completamente privo di significato e il testo potrebbe essere scambiato per una label, un link o un altro componente del design system.

Come nel mondo naturale gli atomi hanno delle caratteristiche chimiche specifiche che producono effetti diversi nelle loro applicazioni, gli atomi di un’interfaccia hanno delle proprietà uniche che influenzano il modo in cui ogni atomo viene utilizzato all’interno del sistema (come ad esempio la dimensione del font o il colore dei titoli).



Molecole

Nel mondo della UI, le molecole sono gruppi di atomi che funzionano come un unico elemento.

Ad esempio una card può essere creata dall’unione di un’immagine, una label, del testo, delle icone e dei bottoni; oppure si può progettare un date picker a partire dalla combinazione di label, input, bottoni e calendari.

La creazione di componenti all’interno di un sistema di conoscenze condivise può essere utile per evitare di creare pattern troppo complessi che possono risultare in esperienze poco gratificanti per l’utente sia dal punto di vista funzionale sia da quello visivo. La progettazione di molecole consente infatti il loro riutilizzo, che, a sua volta, assicura la progettazione di un’interfaccia coerente.



Organismi

In questo campo specifico gli organismi sono dei componenti complessi formati da un insieme di molecole e/o atomi.

Questi organismi (esattamente come quelli viventi) possono funzionare da soli e come nel mondo naturale, anche nelle interfacce possono essere costituiti da molecole diverse o dalla ripetizione della stessa.

Ad esempio un header può essere composto da molecole e atomi diversi come un logo, dei bottoni e una search bar; viceversa, le griglie di Spotify che mostrano le raccolte dei brani sono composte dalla stessa molecola – una card – ripetuta e personalizzata in base al contenuto.


Template

I template sono oggetti il cui focus è sulla struttura piuttosto che sul contenuto finale.

Si tratta di wireframe tramite cui si progetta la disposizione dei contenuti (e non lo stile) che andranno a comporre la pagina, lo scopo è infatti quello di mostrare come le molecole e gli atomi funzionano quando calati nello stesso contesto.

La definizione dei template permette di tenere conto della dinamicità dei contenuti che andranno a popolare la pagina, ad esempio la lunghezza del testo e le dimensioni delle immagini.



Pagine

La pagina mostra il risultato finale dell’interfaccia attraverso l’uso di contenuti reali (ad esempio immagini contestuali e non dei segnaposto raffiguranti gattini).

La pagina non è solo il touchpoint con l’utente finale, ma anche un ottimo ambiente per testare la funzionalità dei componenti presenti. Rispetto ai template nelle pagine vanno previste delle varianti in funzione dei contesti e dei casi d’uso.

Ad esempio, se si pensa a un e-commerce, un utente può avere nel carrello un solo oggetto mentre un’altro può averne 27; un titolo può essere lungo 30 caratteri e un altro può averne 80; un utente con privilegi di amministratore all’interno della stessa pagina può vedere più funzionalità rispetto agli altri utenti.

Le varianti influenzano in modo diretto il modo in cui i componenti sono progettati e proprio per questo sono utili per creare design system più duraturi.



Atomic Design: i Diversi Stage

L’Atomic Design System Methodology di Brad Frost offre una prospettiva modulare e gerarchica per la progettazione di interfacce digitali. L’analogia con il mondo naturale, in cui gli atomi si combinano per formare molecole e organismi complessi, fornisce una visione chiara della modularità e della coerenza che caratterizzano i design system atomici.

Riprendendo in sintesi quanto detto:

  • gli ‘atomi‘ rappresentano gli elementi di base;
  • le ‘molecole‘ sono gruppi di atomi che lavorano insieme;
  • gli ‘organismi‘ sono componenti complessi formati da molecole e atomi;
  • i ‘template‘ definiscono la struttura della pagina;
  • le ‘pagine‘ mostrano il risultato finale dell’interfaccia.

Questa metodologia consente una progettazione coerente e flessibile, promuovendo il riutilizzo dei componenti e la creazione di un sistema di conoscenze condivise. Inoltre, la considerazione della dinamicità dei contenuti, con la creazione di varianti nelle pagine, contribuisce a progettare design system più duraturi e adattabili alle esigenze in evoluzione.

In definitiva, l’approccio atomico al design system si presenta come un metodo efficace per garantire coerenza, efficienza e scalabilità nella progettazione di esperienze digitali.