Image for post
Image for post

Atomic Design.

Nicolas Ciotti
Apr 3, 2018 · 5 min read

Nel mio articolo precedente, Crea Design System, non Pagine, ho parlato di come il concetto di pagina risulti incoerente se usato in un contesto digitale e di come creare un Design System porti dei grossi vantaggi per la progettazione di un prodotto.

Nella creazione di un sistema di progettazione ci viene in aiuto l’Atomic Design.

l’Atomic Design permette, non di progettare una singola istanza o una pagina, ma di progettare pensando al quadro completo: si tratta di progettare il nucleo del sistema.

“Non stiamo progettando pagine, stiamo progettando sistemi di componenti.”

–Stephen Hay

Come in chimica ogni materia è scomponibile in atomi e queste unità atomiche si uniscono per formare molecole, che a loro volta si combinano in organismi più complessi. Allo stesso modo, le interfacce sono composte da componenti più piccoli, atomici, che possiamo utilizzare per creare componenti più complessi.

Ciò significa che possiamo scomporre intere interfacce in blocchi e componenti fondamentali.

Cos’è l’Atomic Design?

“Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.”

–Brad Frost

L’Atomic Design è una metodologia, composta da cinque fasi distinte, che implica la rottura di un layout di un prodotto digitale nei suoi componenti di base, che vengono poi riutilizzati in tutto il sito.

Questo ci consente di capire cosa stiamo creando e soprattutto come lo creeremo.

Le cinque fasi della progettazione atomica sono:

  1. Atomi
  2. Molecole
  3. Organismi
  4. Template
  5. Pagine
Image for post
Image for post
L’atomic design è costituito da atomi, molecole, organismi, template e pagine che concorrono insieme per creare design system di interfacce efficaci.

Andiamo e vederli nello specifico.

Gli atomi sono i componenti più piccoli di un’interfaccia, come label, input, bottoni, icone e includono anche gli elementi più astratti come palette colori, caratteri, singoli elementi, come ad esempio i paragrafi e anche quegli aspetti più nascosti di un’interfaccia come le animazioni.

Image for post
Image for post
label, input e bottini sono un esempio di atomi

Le molecole sono gruppi relativamente semplici di elementi dell’interfaccia utente (atomi) che funzionano insieme come un’unità.

“Una label, un input e un bottone possono unirsi per creare un form di ricerca, creando una molecola.”

Image for post
Image for post
Un form di ricerca, una molecola composta da tre atomi, una label, un input e un bottone.

Il risultato è un componente semplice e riutilizzabile che possiamo inserire in un contesto più ampio, all’interno della nostra interfaccia, ovunque sia necessaria tale funzionalità.

Gli organismi sono gruppi di molecole unite insieme per formare una sezione relativamente complessa e distinta di un’interfaccia.

“Ci stiamo avvicinando sempre di più al concetto di concreto.”

Un cliente potrebbe non essere interessato alle molecole, ma con gli organismi possiamo vedere l’interfaccia finale che inizia a prendere forma.

Image for post
Image for post
organismo costituito da logo, navigazione primaria e modulo di ricerca

Possono essere costituiti da molecole simili e/o diverse. In questo esempio, l’organismo è costituito da componenti diversi come logo, navigazione primaria e modulo di ricerca. Ma un organismo di “griglia di prodotto” potrebbe essere costituito dalla stessa molecola ripetuta più e più volte.

“Costruire dalle molecole agli organismi incoraggia la creazione di componenti autonomi, portatili e riutilizzabili.”

I Template consistono principalmente in gruppi di organismi legati insieme per formare pagine. Sono molto concreti e forniscono un contesto a tutte queste molecole e organismi relativamente astratti.

“È qui che iniziamo a vedere il design che si unisce e cominciamo a vedere cose come il layout in azione.”

Image for post
Image for post

Le pagine sono esempi specifici dei Template. Il placeholder viene sostituito con contenuti reali per fornire una rappresentazione accurata di ciò che un utente vedrà in definitiva.

Image for post
Image for post

Le pagine sono il livello più elevato di fedeltà perché rappresentano il piano più tangibile. È qui che avviene la maggior parte delle revisioni che poi troviamo nel prodotto finale.

“La pagina è essenziale in quanto è dove testiamo l’efficacia del sistema di progettazione.”

Visualizzare tutto nel contesto ci consente di tornare indietro per modificare le nostre molecole, organismi e modelli per affrontare al meglio il contesto reale del design.

Le pagine sono anche il posto dove testare tutte le variazioni e i comportamenti dei nostri elementi.

“Che aspetto avrà la pagina quando nel carrello acquisti ho un articolo rispetto a quando ho 10 articoli con un codice sconto applicato?”

“Come si comporta una card se il numero di caratteri consentito viene superato?”

“Come si comporta lo slider hero su mobile?”

Queste specifiche istanze influenzano il modo in cui costruiamo il nostro sistema.


Perché il Design Atomico?

“One of the biggest advantages atomic design provides is the ability to quickly shift between abstract and concrete.”

–Brad Frost

Ci sono molti vantaggi nell’usare l’Atomic Design. Come la possibilità di mescolare i nostri componenti, spezzandoli in atomi, è facile vedere quali parti di un sito possono essere riutilizzate, mescolate o abbinate per formare altri componenti.

Un altro vantaggio, in ambito sviluppo, è la possibilità di avere un codice più coerente. Utilizzando atomi predefiniti per creare il nostro layout è facile accorgersi di quali componenti vengono utilizzati in diverse parti del sito. Questo riduce la probabilità di scrivere codice duplicato.


Questo è il modo in cui abbiamo sempre fatto le cose, anche se non ce ne rendiamo conto.

Il design atomico fornisce una chiara metodologia per la realizzazione di sistemi di progettazione. Membri del team e clienti sono in grado di apprezzare meglio il concetto di design system vedendo effettivamente i passaggi disposti davanti a loro.

L’atomic design ci permette di passare da un concetto astratto ad uno concreto. Per questo motivo siamo in grado di creare sistemi che promuovono la coerenza e la scalabilità, mostrando contemporaneamente le cose nel loro contesto finale.

“E assemblando piuttosto che decostruendo stiamo costruendo un sistema nuovo invece che dei modelli costruiti ad artefatto concluso.” _ Brad Frost


Se vi è piaciuta la mia Story non dimenticatevi di. 👏👏👏.


Ringrazio Viola Sgarbi, Mario Bello e Arianna Marchetti per il loro aiuto.



Mi chiamo Nicolas Ciotti, sono un Digital & Interaction Designer.
Amo tutto ciò che ha a che fare con il mondo del digital design e ho un particolare interesse per la fotografia.

Seguimi su Twitter e LinkedIn

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store