Atomic Design: Basi di progettazione modulare

Home | Blog | Atomic Design: Basi di progettazione modulare

Il termine “pagina” fa parte del nostro vocabolario ormai da moltissimo tempo. Le prime pagine erano realizzate tramite grosse lastre di argilla, successivamente sostituite da rotoli e infine dalla carta stampata.

Con il passaggio all’era digitale, la parola “pagine” fu mantenuta per identificare, come per i libri, la singola interfaccia presente in un sito.

Negli ultimi anni però il concetto di pagina si è trasformato radicalmente, divenendo un elemento non più isolato e quantificabile come lo era inizialmente, ma parte di un sistema fluido e interattivo.

Inoltre, con l’avanzare della tecnologia, aumentano anche gli elementi da tenere in considerazione durante la fase di progettazione.
Se pochi anni fa il problema più grande era quello di far visualizzare lo stesso contenuto su più browser, oggi, nell’era del multidevice, la sfida diventa quella di garantire un’esperienza utente su numerosi dispositivi diversi e con risoluzioni, tempi e modalità di utilizzo completamente differenti.

Per ovviare a queste problematiche, i designer hanno dovuto abbracciare il concetto di modularità nella fase di progettazione.
In un sistema in cui la “pagina” non è più un elemento circoscritto e isolato ma parte di un insieme, anche gli elementi di cui essa è composta devono essere ben distinti, indipendenti, ma soprattutto in grado di coesistere tra di loro.

Una delle teorie che si sposa perfettamente con questa nuova metodologia di progettazione, è il design atomico introdotto da Brad Frost.

Il design atomico prende spunto, come si intuisce dal nome, dalla chimica. Utilizza, quindi, la gerarchia base utilizzata nella classificazione chimica per progettare ed utilizzare elementi nella progettazione di un sistema.
Il concetto chiave quindi è quello di scomporre nella più piccola unità gli elementi presenti in un design e di assemblarli in modo bilanciato ed armonico in macroelementi definiti template, che successivamente diventeranno pagine.

Questo approccio è composto da cinque livelli distinti, ovvero:

Atomic Design

  • Atomi: Gli atomi dell’interfaccia, come in chimica, sono tutti quegli elementi che non possono essere suddivisi a loro volta e che utilizzeremo come base per la progettazione dell’interfaccia;
  • Molecole: Le molecole sono elementi costituiti dalla combinazione di 2 o più atomi e all’interno dell’interfaccia sono rappresentati da componenti semplici;
  • Organismi: Gli organismi sono il primo elemento complesso che troviamo all’interno delle interfacce e sono costituiti da combinazioni di più atomi e molecole;
  • Template: I template definiscono la struttura e la gerarchia dei contenuti all’interno delle interfacce e sono costituiti da numerosi organismi, molecole e atomi;
  • Pagine: Le pagine rappresentano la trasformazione dei template in un prodotto finale. Si tratta quindi della sostituzione dei contenuti riempitivi con i contenuti finali della pagina.

Avendo un’influenza biologica nel mio percorso di studi, ho realizzato la mia versione personale, alla quale ho aggiunto un livello in più rispetto al processo iniziale ideato da Frost e nella quale attribuisco l’appartenenza di alcuni elementi a determinate categorie in maniera differente.

Il modello che utilizzo è il seguente:

Atomic Design Ecosistemi

Quali sono gli elementi dell'atomic design?

Analizziamo quindi ogni livello all’interno della progettazione di un’interfaccia grafica.

Atomi

Se gli atomi nella chimica rappresentano le più piccole unità funzionali, all’interno della nostra progettazione dovranno rappresentare gli elementi costitutivi di base di un sistema.

Mi riferisco quindi ad elementi come colori, tipografia, cta, input di testo, icone, etc.
Insomma tutti quegli elementi che non possono essere a loro volta scomposti in elementi più piccoli e che quindi rappresentano la più piccola unità funzionale della progettazione.

Ogni atomo presente all’interno di una progettazione ha le sue caratteristiche intrinseche, come ad esempio la dimensione, la spaziatura, la composizione ecc. Queste caratteristiche influenzano l’utilizzo degli atomi e la relazione che essi possono avere con il resto.

Colori Tipografia Media Spaziature Icone

Molecole

Facendo anche in questo caso il paragone con la chimica, le molecole rappresentano insiemi di atomi. Questa struttura acquisisce quindi proprietà e caratteristiche nuove rispetto ai suoi componenti.

Nella progettazione possiamo ritrovare queste caratteristiche in elementi come gli input text (composti da tipografia, spaziature e colori), le cta (tipografia e colori), paginazioni (tipografia, colori e spaziature). Le molecole sono quindi composti da atomi che, una volta combinati, acquisiscono uno scopo all’interno del layout.

Rappresentano i primi elementi che consentono all’utente di avere un’interazione con il layout stesso.

Un esempio pratico può essere un input text, dove l’utente, attraverso il click sul campo, riesce ad interagire con il campo stesso, oppure una CTA, dove al click viene generata un’azione.

Input Text CTA Paginazione

Organismi

Con gli organismi iniziamo ad entrare nella sfera degli elementi complessi. Sono tutti quegli elementi costituiti dalla combinazione di più molecole e atomi che solitamente definiscono sezioni ben distinte di un’interfaccia grafica.

Un esempio pratico può essere un menu, oppure una form di contatto o un particolare box presente all’interno dell’interfaccia.

Sono quindi elementi che consentono all’utente di interagire con il layout generando un’esperienza vera e propria.

Ad esempio in una form di contatto, dove l’utente compilando i vari campi ( molecole input text), può inviare un messaggio (molecola cta).

Form Contatto

Ecosistemi

Questo nuovo livello, nato più per esigenza che per altro, rappresenta, come nella chimica, la presenza di più organismi all’interno dello stesso sistema.

Nel metodo originale questa tipologia di elementi è intrinseca agli organismi. Possono quindi esistere organismi che all’interno, oltre alle molecole e agli atomi, presentano altri organismi.

In questa rivisitazione, invece, aggiungendo questo livello alla tassonomia, mi sono trovato con un maggiore ordine mentale e progettuale, soprattutto in caso di progetti articolati.

Gli elementi che rientrano all’interno di questo livello, sono elementi complessi ma non abbastanza da rientrare nella classificazione successiva.

Mi riferisco quindi alla progettazione di tabelle articolate o elementi compositi, contenenti numerosi organismi, molecole e atomi all’interno. Un esempio pratico possiamo visualizzarlo nell’immagine seguente dove, nella progettazione della riga di una tabella con molti dati, ho inserito numerosi elementi quali molecole, atomi e organismi. In questo caso l’elemento era molto più complesso di un singolo organismo (di cui è composto) ma non abbastanza complesso da costituire un template vero e proprio.

Tabella Articolata Ecosistemi

Template

Da questo livello in poi si abbandona il legame con la chimica per rientrare nel linguaggio più appropriato alla tipologia di output che poi verrà effettivamente realizzato. Con template si definisce una determinata struttura dei contenuti all’interno della pagina.

È diverso dalla pagina in quanto non definisce quali contenuti andranno inseriti ma solo e soltanto la gerarchia, la posizione e gli elementi grafici che la contraddistinguono.

In particolare sono elementi composti da organismi e/o ecosistemi che vanno a definire una determinata struttura.

Un esempio pratico può essere definito da una pagina contenente una form. In questo caso il template rappresenta il “modello” della pagina di registrazione, che diventerà una pagina vera e propria solo con l’inserimento dei contenuti reali al posto dei contenuti riempitivi.

Pagina Registrazione Template

Pagine

La pagina rappresenta la fase finale ed ovviamente la più importante di tutto il processo di progettazione. Oltre a rappresentare l’elemento con il quale gli utenti si interfacceranno, le pagine risultano fondamentali per testare e validare tutta la progettazione dei livelli precedenti.

Nell’istante in cui avviene la sostituzione dei contenuti riempitivi con i contenuti reali, ci si rende conto se tutto il lavoro svolto fino a questo punto è stato fatto nel giusto modo oppure se abbiamo tralasciato alcuni aspetti.

Le nostre pagine devono poter essere versatili nei confronti del contenuto. Nel caso contrario non abbiamo realizzato dei giusti template e di conseguenza, dei giusti ecosistemi, organismi, molecole e atomi.

È in questa fase che anche il più piccolo atomo progettato deve avere il suo equilibrio con l’insieme, altrimenti ci ritroveremo ad avere numerosi elementi che però non possiamo combinare tra di loro.

I modelli che andiamo a realizzare devono riprendere e abbracciare la natura del testo che andremo ad inserire al loro interno. Allo stesso tempo però, anche il contenuto che realizzeremo dovrà tenere conto del modo in cui sarà presentato.

È proprio seguendo questo equilibrio che dovremo progettare tutti i nostri elementi all’interno delle nostre esperienze.

Pagina Atomic Design

Perché utilizzare il design atomico?

Una delle caratteristiche principali del design atomico è il fatto di non essere un processo lineare.

Non esiste quindi una fase solo atomi, sole molecole e così via. Ogni elemento non deve essere progettato come elemento separato e distinto, ma come parte di un insieme che può essere utilizzato in numerose forme.

Rappresenta quindi un modello di pensiero che ci permette di creare in parallelo pagine finali e elementi di progettazione di livelli inferiori, stabilendo una gerarchia ben precisa tra gli elementi.
Torna all'indice

 


Stai cercando una martech company per approfondire gli argomenti di questo articolo?
Clicca qui per andare alla nostra pagina contatti.

Avatar

Daniele Cattaneo

Anno 1993, si occupa di Graphic Design dal 2010. La passione per la grafica e per la natura rappresenta per lui un mix perfetto per una continua ricerca di creatività. Nel 2014 ha fondato ByTek Marketing, in cui svolge il ruolo di responsabile dell'area UX/UI.

Parlaci del tuo Progetto
Condividi con noi i tuoi obiettivi e la tua idea di business