CALENDARIO UX - 12 DICEMBRE - Principi di Atomic Design

Al giorno d'oggi, abbiamo una moltitudine di dispositivi che esistono. Smartphone, tablet, computer, televisione… La lista è lunga (davvero lunga). È quindi necessario creare interfacce che si adattino a tutti questi dispositivi. I designer devono quindi affrontare queste sfide.

Sul nostro bellissimo pianeta blu ci sono delle persone davvero straordinarie e Brad Frost è una di queste. Non ti dice niente? È in gran parte colui che ha inventato questo concetto e vedremo attraverso questo articolo i diversi principi di Atomic Design.

L'inizio

Da diversi anni realizziamo diverse cose (mood board, style guide), che ci permettono di facilitare la comprensione dei nostri progetti, per quanto riguarda i designer. Lo stesso vale per gli sviluppatori, che dispongono di strumenti come Bootstrap o Tailwind che facilitano il loro lavoro nello sviluppo di prodotti digitali. Tuttavia, il problema sorge quando designer e sviluppatori devono lavorare insieme (ad esempio, i designer passano i modelli allo sviluppatore). Realizza l'unione tra la parte progettuale e la parte tecnica.

Quindi che si fa? 🤔

Signore e signori, è qui che entra in gioco Atomic Design!

Illustrazione – Design atomico

Ti ricordi, prima, abbiamo parlato di Brad Frost. Infatti, quest'ultimo ha inventato questo concetto di molecole (nel design), un po' come possiamo vedere in Chimica. Quindi, non esiste una definizione scolpita nella pietra per Atomic Design, ma se possiamo dare una definizione, sarebbe la seguente:

Il design atomico si riferisce al fatto di creare un sistema di parti che possono essere assemblate tra loro per creare modelli che possiamo riutilizzare all'infinito, per il nostro progetto. Grazie a questo metodo riusciremo a creare quello che chiamiamo un design system, che riunirà quindi tutti gli elementi utilizzati nelle nostre interfacce.

Non è chiaro ? Va bene, facciamo un esempio con Lego. Sono formati da diverse parti. Hanno tutti dimensioni diverse e colori diversi. Ma quando li metti insieme, possono formare elementi che tutti conosciamo (beh, credo), come case, navi, automobili o persino robot.

Un altro esempio, le bambole russe, che sono serie di bambole decrescenti, una dentro l'altra.

L'ingenuità del nostro caro Brad è quella di riunire gli elementi in 5 categorie principali, e sono classificati in base alla loro tipologia e alla loro complessità.

Le 5 categorie principali

Le 5 principali categorie di Atomic Design

atomi

Questo è l'elemento più semplice. Gli atomi sono il fondamento di questo intero sistema. Tipografia, colori o persino icone… È un elemento che non può essere diviso (e sì 1 diviso per 1, è sempre 1, e per fortuna).

Illustrazione – Atomi

Molecole

Comincia a diventare interessante. Le molecole, infatti, rappresentano il gruppo di atomi che ci permetterà di ottenere una prima entità funzionale. Pulsanti, campi di testo o persino collegamenti sono considerati molecole.Illustrazione – Molecole

Gli organismi

Potresti iniziare a capire perché abbiamo menzionato la chimica prima. Gli organismi saranno quindi rappresentati da un gruppo di molecole. A questo punto, possiamo già vedere l'interfaccia prendere forma. Una scheda articolo o una barra di ricerca. Quindi attenzione, potrebbero esserci specificità con le organizzazioni (ovviamente, non è molto divertente se non ci sono eccezioni). In alcuni casi, un'organizzazione può essere composta da altre organizzazioni.

In alcuni casi me lo dirai?

GIF – Kermit: Cosa?

Capisco che se reagisci come Kermit, niente panico, te lo spiego. Ad esempio, se prendiamo un flusso di articoli, quest'ultimo può comprendere sia articoli che pubblicità, che quindi raggrupperanno a loro volta più molecole. So che il tuo cervello sta correndo, ma non preoccuparti, questa è un'eccezione.

Illustrazione – Organizzazioni

Modelli

E se combiniamo gli organismi... Ci fornisce dei modelli. Anzi, sono la matrice della pagina, perché includeranno un insieme di organismi. Il modello specificherà dove sono posizionati i diversi organismi, ma il loro stato dipenderà dal contesto dell'utente, vale a dire, dove si trova sulle interfacce. Il modello può quindi variare a seconda del contesto.

le pagine

Eccoci qui. L'ultima categoria sono le pagine, e rappresenta un modello in base al contesto di utilizzo. Il nostro caro Brad, parla di “template instance”. Possiamo dire che è unica. La home page di Twitter, sul tuo smartphone, sull'app mobile, sull'app mobile dopo aver ricevuto una notifica. Vedi, cambia, a seconda del contesto.

L'applicazione del principio

Lo ammetto, ho parlato di designer e sviluppatori. Ma va detto che oggi, nei progetti digitali, abbiamo un gran numero di stakeholder: UX Designer, UI Designer, Product Owner, Product Manager, Project Manager, Developer... L'idea è che Atomic Design sia vantaggioso per tutti i progetti stakeholder, perché sono loro che utilizzeranno il nostro Design System.

Pertanto, utilizzando il metodo Atomic Design, standardizzeremo le nostre interfacce e avremo componenti coerenti tra loro e, allo stesso tempo, avremo un sistema di progettazione ben costruito.

Mantieni questi 3 passaggi, illustrati nel diagramma qui sotto, dovrebbe aiutarti.

Illustrazione – I 3 passaggi

1 – Fare l'inventario: conoscere il progetto è una cosa importante. Potremo infatti osservare tutti i componenti e ordinarli per tipologia. Testi, icone, pulsanti, ingressi...
Così facendo, vedremo comparire le 5 categorie principali (Atomi, Molecole, Organismi, Template e Pagine).

2 – Standardizza: 6 livelli di dimensione per il testo scorrevole? Standardizzare! Bottoni con margini diversi? Standardizzare! Capisci, i tuoi atomi devono essere tutti uniformi, per avere molecole coerenti, e così via.

3 – Documenta/Comunica: non esitare ad ampliare la tua libreria di commenti, spiegando i diversi tipi di utilizzo. Più documenti la tua biblioteca, meglio le parti interessate del progetto capiranno. Inoltre, notifica le modifiche (ad es. Componenti che cambiano) e notifica alle parti interessate i passaggi che intraprendi nel sistema di progettazione.

Le mie ultime parole: il design atomico e il sistema di progettazione sono collegati

Complementarietà. In effetti, lo abbiamo visto attraverso l'articolo. Il design atomico e il sistema di design sono collegati. Creando elementi e modelli molecolari (e riproducibili, lo so, ci sono un sacco di "e"), acceleriamo il nostro processo di progettazione. Non solo acceleriamo il processo, ma lo rendiamo efficiente e coerente.

Come avrai capito, secondo me (e tocca a me ovviamente), dobbiamo progettare le nostre interfacce utilizzando componenti, pensando a “viventi” e “scalabili”, e il metodo di Atomic Design ci aiuta a farlo in modo efficace.

Allora, sei convinto di Atomic Design? Brad Frost ha pubblicato un libro molto interessante su questo principio: Design atomico - Brad Frost. Vi invito a leggerlo se volete saperne di più.

Dalle estremità dell'universo, ti saluto!