Vi presento Brad Frost

Per agevolare la programmazione, molti sviluppatori apprezzano soluzioni come Bootstrap e strumenti simili. Questi tool (o framework) hanno lo scopo principale di semplificare lo sviluppo responsive e mobile per pagine e applicazioni web.

È partendo da qui che Brad Frost (web designer, speaker, writer, consultant and musician) ha stilato le linee guida dell’Atomic Design. Tutto ha preso forma dal suo blog e il risultato finale è l’omonimo libro.

Parla Brad

Ci impegnamo a creare interfacce per più utenti in più contesti utilizzando più browser su più dispositivi con diverse dimensioni di schermi e sempre più funzionalità. È davvero un compito scoraggiante.

Atomic Design concerne tutto ciò che riguarda la progettazione di sistemi e permette di creare soluzioni di User Interface più rapide e coerenti rispetto al passato. Il libro introduce una metodologia per ripensare alla user interface e presenta tecniche per migliorare il flusso di progettazione e sviluppo di un team.

Se è infatti vero che le interfacce sono realizzate da un insieme di piccoli componenti (o composti), è altrettanto vero che questi componenti possono essere frammentati in atomi. Atomic Design approccia infatti il design seguendo le logiche della chimica.

Non è un caso che Frost citi in primis la tavola periodica degli elementi della programmazione e progettazione realizzata da Josh Duck.

Una bella intuizione per classificare e distinguere i componenti del design sul web.

Definiamo come atomi i colori (e i codici RGB), i font (compresi di dimensioni e stili), i pulsanti (primari, secondari con i loro differenti stati), le singole icone. E poi i paragrafi, i titoli, le intestazioni con le loro impaginazioni (dipendenti quindi dai font scelti). Tutte le possibili combinazioni di questi elementi danno vita alle molecole del design.

Introdotto il concetto degli atomi, potremmo facilmente intendere come molecole i campi di compilazione di un form, di una tabella o della stessa barra di ricerca. Come esempio presente nel blog di Frost, segue l’elenco degli atomi che compongono la molecola campo di ricerca:

• Titolo del campo cerca = carattere del testo + dimensioni + colore.
• Campo testo per la chiave di ricerca = dimensioni del box + colore del box e suo comportamento prima e dopo la compilazione.
• Testo (segnaposto scrivi qui) = dimensioni del carattere + colore.
• Pulsante Cerca = testo Cerca + carattere + colore + dimensione + colore del pulsante #c26102.

Si può pensare all’interfaccia di ricerca come molecola. Ogni elemento è un atomo.

Se l’approccio chimico funziona, spingendolo oltre è altrettanto corretto pensare che l’insieme di molecole crei organismi di design.

Brad Frost definisce gli organismi come l’insieme di molecole utili per formare una sezione di interfaccia distinta e complessa. In questo senso è quindi possibile che gli organismi siano costituiti da molecole simili o diverse. Un organismo può contenere componenti diversi come un logo, la navigazione primaria, il modulo di ricerca e l’elenco dei canali multimediali. Un esempio davanti ai vostri occhi è la testata di Apogeonline, composta dalle seguenti molecole e atomi:

• Molecola logo  = atomo immagine + carattere + dimensione + colore.
• Molecola voci del menu di navigazione = carattere + dimensioni + colore + spaziatori.
• Molecola Trova nel sito = testo segnaposto trova il sito + carattere + dimensioni + colore + pulsante Vai + carattere + dimensioni + colori.
• Molecole tags = carattere del testo + dimensione + testo.

Testata di editore per il lettore, organismo composto da atomi per il designer.

Frost tiene a sottolineare che atomi, molecole e organismi possono risultare ai clienti difficili da comprendere, mentre i template sono lo strumento più utile per condividere il prodotto con un aspetto più simile a quello finale.

Con template, si intende il layout complessivo della pagina. Qualcuno si chiederà come si comunicano e condividono i template con i clienti? Risposta: attraverso wireframe (digitali o cartacei, ne abbiamo parlato un po’ di tempo fa) che rappresentino la User Experience proposta e guidino alla lettura del progetto, schermata dopo schermata, pagina dopo pagina.

Tornando un attimo al concetto di pagina secondo il modello dell’Atomic Design, si tratta di modelli fedeli al risultato finale dove il contenuto placeholder (fittizio) viene sostituito con quello rappresentativo per fornire una rappresentazione accurata di ciò che un utente potrà alla fine vedere.

Attraverso le pagine, e quindi a un livello di mock-up grafico non troppo dettagliato, è possibile mostrare al cliente gli ingombri di testi, immagini e l’effetto visivo finale del prodotto finale. In questo modo è semplice comunicare al cliente l’importanza degli ingombri, degli spazi e della giusta quantità di contenuti per una pagina.

Un esempio di pagina progettata secondo i dettami del design atomico di Brad Frost.

Lo strumento

Noi suggeriamo di usare Sketch. Come sostenuto anche da Joe Toscano, Experience Designer di Google, anche se Sketch potrebbe non essere ancora un completo sostituto di Adobe Illustrator o Photoshop, è uno strumento incredibile quando si lavora con la metodologia Atomic Design.

In questo articolo Joe Toscano condivide il proprio approccio al tema. Logiche che sembrano far parte della struttura di lavoro di Sketch stesso.

Lavoro all’interno di Sketch. Non sarà Illustrator, ma per l’Atomic Design rende.

Ma poi, perché?

Per quale motivo dovremmo essere persuasi dall’Atomica Design? Frost risponde che è il modo in cui abbiamo fatto le cose fino a oggi, anche se non lo abbiamo pensato coscientemente.

Il design atomico fornisce una chiara metodologia per la realizzazione di sistemi di progettazione. I clienti e i membri del team sono in grado di apprezzare meglio il concetto delle fasi di progettazione, vedendo effettivamente i passaggi del lavoro.

Possiamo aggiungere che Atomic Design è direttamente connesso all’approccio forse più noto di modular design: l’approccio che guida alla suddivisione di un sistema (o progetto) in parti più piccole chiamate moduli o skid che possono essere create in modo indipendente e utilizzate in diversi sistemi. Il modular design viene utilizzato anche in Interaction Design per progettare servizi e interfacce o migliorare l’esperienza utente.

Oltre alla riduzione dei costi e alla flessibilità nel design, la modularità offre altri vantaggi: l’aumento (aggiunta di nuove soluzioni semplicemente collegando un nuovo modulo) e l’esclusione di parti di interfaccia non usabili. Esempi di sistemi modulari sono le interfacce (ma non solo) delle automobili e i computer (sia la parte hardware che i diversi software a loro volta resi compatibili con il sistema operativo che a sua volta – ancora – è composto da diversi moduli) eccetera.

Ecco i dieci punti di forza dell’Atomic Design.

1. Riutilizzabile.
2. Facile per creare linee guida.
3. Facile per capire i layout.
4. Il codice è più stabile.
5. Nessun attenzione alla progettazione perfetta al pixel.
6. Processo più efficiente, prototipazione più veloce.
7. Più facile da aggiornare e per rimuovere parti del sito.
8. Struttura di file più modulare.
9. Meno componenti sovrapposti.
10. Pattern Lab. Uno strumento creato da Brad Frost e Dave Olsen per aiutare con il processo. È essenzialmente un generatore statico del sito per i modelli e un visualizzatore JavaScript per l’interattività.

Io voglio crederci e vi confido che sto già provando a indossare il camice da chimico del design.

Per concludere, ricordo le slide di Brad Frost e un video per capire ancora meglio il concetto.