We’re not designing pages, we’re designing systems of components. 

- Stephen Hay 

 

Coerenza è la parola chiave che deve guidare lo sviluppo di un qualsiasi servizio o prodotto web.

Un’interfaccia coerente è intuitiva e semplice da utilizzare e, soprattutto, costituisce un elemento fondamentale per garantire una buona esperienza di navigazione in quanto permette all’utente di arrivare velocemente e senza intoppi a trovare quello che sta cercando.

Per capire quanto l’aspetto della scalabilità sia diventato importante è sufficiente pensare alla differenza che c’è tra i dispositivi (desktop, mobile e tablet) da cui è possibile accedere a uno stesso contenuto. 

Un servizio web per funzionare deve essere fruibile in maniera veloce e chiara sia da telefono che da desktop ed è possibile fondamentale offrire un servizio ottimale per poter garantire la stessa qualità di navigazione nonostante la differenza dei dispositivi.

Vediamo come e perché. 

Che cos’è l’atomic design 

Siamo fatti della stessa sostanza...

Siamo circondati da sistemi. Noi siamo dei sistemi.

Gli atomi costituiscono le unità più piccole di questi sistemi che, legandosi tra loro, compongono la materia.

È proprio ripensando alla composizione della materia che nasce l’atomic design, ovvero un metodo di progettazione delineato da 5 fasi che facilita la costruzione di un sistema coerente di interfacce attraverso una logica fatta di gerarchie. 

1.Atomi 

Gli atomi sono gli elementi costitutivi di base della materia. Nel mondo delle interfacce gli atomi sono le componenti più piccole di un sistema, quelle parti che non possono essere ulteriormente scomposte e che solitamente non hanno molto senso se prese singolarmente, come per esempio i bottoni, gli input, i tag html e le icone. 

<h3data-children-count="0">2.Molecole </h3data-children-count="0">

Le cose iniziano a cambiare e diventare più concrete quando gli atomi iniziano a combinarsi e a formare le molecole. Le molecole, in questo contesto, saranno la base dei nostri sistemi di progettazione. Un bottone e un input da soli non saranno molto utili, ma se combinati insieme la questione cambia. 

Una stessa molecola potrà essere riutilizzata più volte all’interno di un progetto e contribuirà a rendere più coerente tutto il sistema.

3.Organismi 

Gli organismi sono gruppi di molecole che rappresentano delle sezioni. Con gli organismi il sistema diventa ancora più "tangibile" poiché in questa fase l’interfaccia inizia a prendere forma. Uno stesso organismo può essere costituito da componenti diversi. 

Pensiamo per esempio all’header di un sito: può esserci un logo, le voci di menù e un campo di testo per la ricerca oppure pensiamo alla scheda prodotto di un e-commerce che può essere costituita da un titolo, un’immagine e il prezzo e che sarà utilizzata più volte in base al numero dei prodotti presenti.

4.Template

In questa fase viene introdotto, non casualmente, un nuovo linguaggio. Si passa dal vocabolario scientifico a quello informatico; in effetti stiamo entrando nella fase più interessante dell’atomic design.  

Il template a tutti gli effetti è il risultato di un insieme di atomi, molecole e organismi che vanno a costituire la base della pagina web e il layout inizia a prendere forma. 

5.Pagine

Le pagine sono template, ma con i contenuti effettivi: in questa fase i segnaposto vengono sostituiti con una rappresentazione reale che riproduce il risultato finale. È in questa fase che viene testata l’efficacia del sistema di progettazione che permette di avere una visione d’insieme ed eventualmente, di tornare indietro e apportare modifiche a modelli e organismi senza sconvolgere la struttura del progetto. Sulle pagine vengono testate le variabili: cosa visualizza un utente loggato rispetto a un utente che non lo è? Cosa succede quando il titolo di un articolo è più lungo e occupa 2 righe?

Quali sono i vantaggi del design atomico? 

In parte questo è un procedimento che, anche se inconsapevolmente, veniva seguito da molte design agency anche in passato, ma la definizione del concetto di design atomico ha fornito una metodologia chiara e unitaria per lo sviluppo di sistemi di informazione che facilita e ottimizza il lavoro sia all'interno del team che con il cliente che, osservando gli step che hanno portato alla realizzazione del progetto, riesce ad avere una visione d’insieme più consapevole e chiara. 

Applicando il design atomico fondamentalmente è possibile passare dall’astratto al concreto in maniera logica e con metodo gerarchico. Possiamo sempre tenere d’occhio tutte le interfacce scomposte nello stesso tempo avere una visione d’insieme. Se qualcosa non funziona si può tornare indietro di un piccolo passo, senza grandi sconvolgimenti e perdite di tempo. 

Un caso pratico: ecco come abbiamo utilizzato l’atomic design in un nostro progetto

Per rendere ancora più chiari questi concetti, ecco un esempio del percorso di progettazione che abbiamo seguito per realizzare il sito di una scuola di lingue seguendo i principi dell’atomic design.

Da dove siamo partiti?

Fase 1

Abbiamo iniziato il percorso di progettazione partendo dalle unità più piccole. In questo caso, dalla composizione delle parti di una call-to-action. 

Siamo poi passati definizione dei nostri atomi. Abbiamo scelto font, dimensioni, caratteristiche dei testi e dei titoli e lo stile delle cta. Questo modello è stato poi applicato per tutte le sezioni del sito. 

FASE 2

Successivamente abbiamo strutturato le molecole, composte dall’aggregazione degli atomi.

In questo caso specifico si tratta dell’immagine, del titolo, del testo, della la-call-to-action e del numero delle lezioni.

Abbiamo utilizzato le stesso molecole in più sezioni del sito, rispettando sempre il principio di coerenza.  

FASE 3

L’insieme delle molecole ci ha permesso di strutturare gli organismi.

Visualizzazione organismo desktop

Visualizzazione organismo mobile

 

La versione mobile si adatta al dispositivo, ma gli elementi inseriti sono esattamente gli stessi. 

FASE 4

La pagina web inizia a prendere forma e arriviamo alla realizzazione del layout composto dall'aggregazione di molecole e organismi. 

FASE 5

Queste procedure ci hanno portato al risultato finale, la nostra pagina web. 

Conclusioni

La progettazione delle interfacce è un universo in continuo movimento: in quest'ottica il nostro compito come agenzia web è quello riuscire a costruire sistemi gerarchici e chiari, ma flessibili e sempre pronti al cambiamento. Per fare questo, la soluzione migliore per approcciarsi a un progetto  seguendo la logica dell'atomic design è quella di partire dalle unità più piccole per creare sistemi sempre più evoluti e coerenti.