Atomic Design: la morte programmata delle pagine web

Brand Content, Technical, User Experience

2 Nov, 2017

Con il rischio di deludervi, non parleremo di Kim Jong Un e della battaglia con Donald Trump su chi ha l’arma nucleare più potente, piuttosto parleremo di un’altra guerra, nei meandri di internet, destinata a stravolgere il design di pagine/schermate…

Prima di fare appello ai vostri vecchi (ma non per questo brutti) ricordi di fisica e chimica del liceo, facciamo un piccolo recap. Con la costante evoluzione dei canali di comunicazione digitali e degli usi quotidiani, è chiaro che anche il design dell’interfaccia si evolva alla stessa velocità. Il design responsive che era fino a ieri ancora un’idea per gli inserzionisti, oggi è diventato il punto focale della guerra digitale in cui i team tattici (composti da designer) devono progettare interfacce scalabili che possano essere consumate sia su un Apple Watch che su un wall interattivo di 4 metri per 8 presente in store e realizzato per uno specifico evento.

Questi importanti cambiamenti comportano sfide cicliche che portino nuove soluzioni a nuovi vincoli, nonché un’evoluzione dei metodi di progettazione. È proprio su questi due punti che l’eminente Brad Frost ha trovato una soluzione: l’Atomic Design.

Questo metodo di design delle interfacce parte da una semplice osservazione: il formato della pagina – che risale a tempi immemori – è stato ereditato dai libri ed è stato semplicemente trasposto sul web. Il design per pagina non è più adatto alle nostre esigenze o ai nostri usi, è tempo che i designer “facciano fuori” le pagine web.

Si tratta quindi di progettare elementi dell’interfaccia in grado di rispondere a tutte le problematiche responsive e non più alle pagine in senso stretto. Il risultato di questo modello di pensiero inverso ci porta a immaginare un sistema di elementi modulari che possono essere utilizzati in diversi ambienti e interfacce, mantenendo un’omogeneità visiva e una coerenza in termini di esperienza utente.

ATOMIC DESIGN PROCESS 1024x328 1024x328 Atomic Design: la morte programmata delle pagine web

Definizione

È tempo di andare più nel dettaglio dell’Atomic Design rispolverando qualche diagramma che raffigura elettroni, protoni e neutroni. Non preoccupatevi, non parleremo di fisica quantistica o del gatto di Schrödinger, andremo dritti al punto… promesso!
L’Atomic Design prende il suo nome dallo stesso principio della composizione della materia. Gli atomi formano le molecole, le quali a loro volta formano dei corpi che, raggruppati, formano un insieme di materia.

 

Gli atomi

L’atomo è un elemento irriducibile dell’interfaccia e non può essere diviso. Non ha uno scopo funzionale, ma compone la base di tutti gli elementi grafici dell’interfaccia. Un atomo può essere uno stile tipografico, un colore, un’icona, un insieme di input e così via.

ATOMS 1024x992 1024x992 Atomic Design: la morte programmata delle pagine web

Le molecole

La molecola è composta da un insieme finito di atomi e rappresenta una semplice componente dell’interfaccia. Poiché la molecola è un componente dell’interfaccia, deve essere progettata per funzionare in modo reattivo e deve essere accompagnata da regole di gestione specifiche che vanno a definire la visualizzazione degli elementi sui diversi media.

Le molecole possono rappresentare un gruppo di elementi insieme: un’etichetta + un campo di selezione + un’icona di una freccia.

MOLECULES 1024x963 1024x963 Atomic Design: la morte programmata delle pagine web

 

I corpi

Il corpo è un insieme di diverse molecole e rappresenta i componenti più complessi. Queste diverse parti dell’interfaccia finale devono formare un insieme coerente, funzionale e reattivo.

I corpi potrebbero essere ad esempio un modulo di registrazione alla newsletter: un campo di input + CTA + contenuto editoriale (titolo e testo).

ORGANISMS 1024x655 1024x655 Atomic Design: la morte programmata delle pagine web

I template

Lasciamo il mondo di Einstein per tornare al digitale. I template, secondo Brad Frost, rendono possibile l’organizzazione di tutti i corpi al fine di verificare che le informazioni siano ben gerarchizzate e che il comportamento responsive sia rispettato su tutti i supporti.

Le pagine

La pagina è un template nella sua versione definitiva con contenuti reali. Permette di visualizzare il template subito prima dell’integrazione da parte degli sviluppatori.

 

Atomic Page 1024x728 1024x728 Atomic Design: la morte programmata delle pagine web

Questi 5 step rappresentano il cuore della metodologia Atomic Design. Se non sono lineari e immutabili, rappresentano uno schema di riflessione diametralmente opposto ai metodi tradizionali di design più usati.

 

 

Il processo

Quando vengono applicati i metodi più tradizionali si progetta prima l’interfaccia nella sua interezza e successivamente i singoli elementi su cui è possibile capitalizzare; noi invece applichiamo l’approccio esattamente opposto: partiamo dal design degli elementi chiave per poi definire l’intera interfaccia.

È quindi possibile mantenere una certa coerenza su tutti i componenti del sito, non creare duplicati con la stessa funzionalità e soprattutto ottenere agilità in termini di Design Thinking. Si tratta quindi di iniziare costruendo la style guide dell’interfaccia e creando schermate da essa e non viceversa.

Risparmio di tempo, razionalizzazione delle interfacce, logica del design simile dalla progettazione allo sviluppo e completamente adattata per test & learn, l’Atomic Design offre infiniti vantaggi che potrete scoprire rapidamente se decidete di provare questo metodo.

L’evoluzione di strumenti di progettazione come Sketch, Studio by Invision o Adobe XD permettono di implementare facilmente il metodo di Brad lasciando creatività massima ai designer. Sacrificando le pagine web in funzione del design, l’Atomic Design offre delle prospettive praticamente illimitate in termini di progettazione delle interfacce e relative evoluzioni.

Ora convinceremo Donald e Kim che l’unica guerra che vale la pena di combattere è quella del design … BOOM!

 

 


 

Fonti:

https://atomicdesign.bradfrost.com/

https://uxdesign.cc/atomic-design-how-to-design-systems-of-components-ab41f24f260e

https://blog.link-value.fr/latomic-design-9611d51b3143

Lascia un commento.