Design
4 min di lettura

Atomic Design: cos'è e perché è importante nella UI

Scritto da Talent Garden Talent Garden
Non ti va di leggere? Prova ad ascoltare l'articolo in modalità audio 🎧
Con la definizione design system si indica un insieme di specifiche che permettono di realizzare interfacce utente (UI) coerenti in termini di stile, colori, caratteri tipografici, brand di riferimento e qualsiasi altra componente possa garantire una user experience (UX) ottimizzata. Con un design system si definiscono linee guida, pattern e regole per la progettazione di UI che gli sviluppatori front-end possono sfruttare indipendentemente dal dispositivo scelto per la fruizione di un contenuto o di un servizio. Ma quanto potrebbe pesare la soggettività nella scelta degli elementi che partecipano alla composizione dell'interfaccia di un sito Web o di un'applicazione? A porsi questa domanda è stato il Web designer Brad Frost la cui risposta si riassume in una nuova metodologia chiamata Atomic Design e ispirata alla Chimica.

Cos'è l'Atomic Design

Gli atomi sono le strutture che rendono possibile l'organizzazione della materia e ne rappresentano la frazione più piccola. La materia può assumere diversi stati (solido, liquido, gassoso) in cui gli atomi si aggregano nelle molecole che sono l'unità di base degli elementi chimici. La combinazione di più molecole porta infine alla formazione di organismi che possono essere più o meno complessi. L'Atomic Design ricalca in parte questa dinamica identificando 5 fasi (o livelli) gerarchicamente disposte che permettono di realizzare un design system completo. Parliamo infatti di una metodologia modulare in cui gli elementi che costituiscono una UI sono pensati innanzitutto come atomi aggregabili in molecole a loro volta combinabili sotto forma di organismi.

Le cinque fasi dell'Atomic Design

Rispettando una parziale analogia con i processi chimici Frost ha distinto le prime tre fasi dell'Atomic Design in atomi, molecole e organismi. A queste ultime se ne aggiungono altre due, template e pagine. Ognuna delle fasi precedentemente indicate assume un significato specifico nel percorso che porta alla formazione di un’interfaccia.

Atomi

Nel contesto di una UI gli atomi rappresentano degli elementi non ulteriormente suddivisibili e inseparabili, li si può descrivere come dei mattoni che utilizzati insieme permettono di costruire una casa. Dal punto di vista della progettazione di UI per Internet gli atomi possono essere assimilati ai tag HTML, ai pulsanti di un form o ad un campo di testo. Una delle caratteristiche peculiari degli atomi riguarda il loro elevato livello di astrazione, motivo per il quale possono essere considerati come tali anche le animazioni o i font.

Molecole

A differenza di quanto accade con gli atomi, che per loro natura sono delle monadi, le molecole si presentano come degli insiemi. Una molecola è sostanzialmente un gruppo di atomi che possono essere combinati con lo scopo di svolgere una funzione. L'etichetta di un form, un campo di input e un pulsante di invio sono degli atomi inutilizzabili se presi singolarmente, se uniti diventano invece un modulo per l'invio di feedback o per la formulazione di una query ad un motore di ricerca. Esistono molecole più o meno complesse e, come nel caso degli atomi, possono essere unite tra loro per ottenere strutture articolate.

Organismi

Nell'Atomic Design un organismo è il risultato della combinazione di più molecole. Si pensi ad esempio al caso dell'header di una pagina Web che è stato scelto proprio da Frost per descrivere questa fase. Essa può contenere un motore di ricerca interno, un menu, il logo di un brand e le icone per il collegamento ai social network. Ognuna di queste molecole partecipa quindi alla formazione di un organismo che è appunto l'header, ma esistono diverse tipologie di organismi e la loro natura dipende dal tipo di molecole in essi aggregate. Per questo motivo possono essere considerati organismi anche componenti di una UI come per esempio un footer o la sezione di una pagina Web destinata ad ospitare i contenuti.

Template

Con la fase relativa ai template l'Atomic Design supera in parte il modello ispirato alla Chimica iniziando a proporre quello che dovrebbe essere il risultato finale della progettazione di una UI. Un template è infatti un insieme di organismi che quando uniti portano alla formazione di uno schema (layout) per le pagine. Grazie ai template è possibile proporre una collocazione per tutti gli elementi che compongono un layout, in questo modo le componenti che partecipano alla formazione di un'interfaccia dispongono finalmente di una struttura. Volendo proporre una definizione dei template, possiamo affermare che essi sono raffigurabili come degli aggregatori in grado di offrire un contesto ad atomi, molecole e organismi.

Pagine

Le pagine rappresentano i template, ciò significa che permettono di visualizzare le UI nella loro forma definitiva, compresi i contenuti che sono destinate ad ospitare. Frost definisce le pagine come delle istanze dei template in quanto mettono a disposizione una raffigurazione completa di ciò che viene visualizzato dall'utenza. Oltre che essere la fase culminante dell'Atomic Design, le pagine permettono di mettere alla prova l'efficacia del Design System adottato, se i test dovessero far emergere delle criticità sarà necessario intervenire su molecole, organismi e template per applicare le modifiche necessarie ad una resa più performante della UI progettata.

I Vantaggi della progettazione per atomi

Frost sottolinea che l'Atomic Design non deve essere considerato una regola ma uno stato mentale basato sul principio "do one thing and do it well", cioè concentrarsi sui singoli elementi di un progetto e svilupparli al meglio. Su queste basi è possibile riprendere il discorso iniziale riguardante la a volte eccessiva rilevanza della soggettività nei Design System, con il rischio di privilegiare l'estetica a favore dell'usabilità. L'Atomic Design rappresenta invece una metodologia scalabile e fortemente orientata al problem solving con cui ottenere interfacce coerenti che tengano conto innanzitutto di quelli che potrebbero essere i comportamenti degli utenti durante il loro utilizzo. Trattandosi di una metodologia modulare, essa consente di operare tramite componenti riutilizzabili con indubbi vantaggi anche dal punto di vista della produttività.

L'UI Design Master di Talent Garden

Chi fosse interessato ad affrontare un percorso formativo con il quale approfondire le potenzialità dell'Atomic Design e dei design system, ha l'opportunità di frequentare il prossimo UI Design Master di Talent Garden che si svolgerà dal 6 maggio al 16 luglio 2022 giungendo alla sua decima edizione. Il Master, accessibile tramite selezione, è riservato a professionisti come per esempio Graphic Designer, sviluppatori front-end, Web e mobile, Art Director, Web Designer e Digital Project Manager con almeno 3 anni di esperienza lavorativa che vogliano essere sempre aggiornati sulle ultime novità dell'User Interface Design. La durata complessiva del Master è pari a 120 ore complessive in formato blended distribuite tra contenuti on demand, learning live session online e lezioni in presenza nel Campus Calabiana di Talent Garden a Milano. Per maggiori informazioni sull'iniziativa è possibile consultare la pagina ufficiale del UI Design Master sul sito Web di Talent Garden.

Conclusioni

L'Atomic Design è una metodologia che rivoluziona la concezione di design system per la realizzazione di Interfacce utente. Prendendo spunto dalla Chimica, essa suddivide ogni elemento di una UI nelle sue componenti essenziali e aggregate, permettendone il raggruppamento in forme differenti e via via sempre più articolate, fino all'ottenimento di un risultato ottimale in termini di usabilità.
Articolo aggiornato il: 30 agosto 2023
Talent Garden
Scritto da
Talent Garden, Digital Skills Academy

Continua a leggere

4 min di lettura

UI Apple: cosa conta davvero?

Il design dell'interfaccia utente (UI) è spesso una delle ultime cose che i team considerano quando creano applicazioni ...
Talent Garden 25/10/2021
5 min di lettura

Cos'è una Customer Journey Map, a che cosa serve e come crearla

Alcune delle domande fondamentali che tutte le aziende dovrebbero porsi sono: come gli utenti utilizzano il nostro ...
Talent Garden 04/03/2022
5 min di lettura

Figma & UX/UI Design: cos’è, come funziona e perché sceglierlo

Progettare l’esperienza dell’utente, facilitandolo e rendendogli la navigazione più soddisfacente, è di vitale ...
Talent Garden 31/01/2023
3 min di lettura

Introduzione all’Interaction Design: cos’è e a cosa serve

Lavorare nell’ambito della User Experience significa dedicarsi non solo all’esperienza finale dell’utente — curando il ...
Talent Garden 13/02/2023