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

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

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
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.

Atomi

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.

label, input e bottini sono un esempio di atomi

Molecole

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.”

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à.

Organismi

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.

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.”

Template

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.”

Pagine

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.

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

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, un Designer Freelance e co-fondatore di dandan Studio. Amo tutto ciò che riguarda il digital design e sono specializzato in UI Design e Web Design.

Seguimi su Twitter e LinkedIn

I’m Nicolas Ciotti an Italian Freelance Designer and co-founder of dandan studio. I love everything related to digital design. | nicolasciotti.com

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