Atomic design

Il processo di realizzazione e mantenimento di siti web si è via via fatto sempre più complesso: se agli albori del web era sufficiente conoscere alcuni costrutti del linguaggio HTML per andare quasi subito online con qualche pagina di contenuti, oggi le esigenze sono aumentate a tal punto da rendere il processo difficilmente gestibile da una persona sola qualora si tratti di siti complessi.

Per riuscire a pianificare, sviluppare, mettere online e mantenere un sito web con funzionalità avanzate, oggi non solo è necessario metter su una squadra di professionisti ma anche adottare un efficace sistema di progettazione e aggiornamento.

Brad Frost - giovane professionista dal curriculum prestigioso - ha creato il cosiddetto atomic design, un sistema basato sulla creazione di una raccolta di componenti facilmente riutilizzabili e configurabili a seconda delle esigenze specifiche e su un metodo di sviluppo che prevede un contributo più informato e continuo del cliente.

Consiglio l'adozione di questo sistema di progettazione, soprattutto in presenza di progetti complessi, non solo mirati alla realizzazione di siti web ma anche di applicazioni in generale.

Il modello (superato) della pagina

Abituati da molti secoli, grazie ai libri prima manoscritti e poi stampati, a immaginare contenuti scritti e visuali rigidamente inseriti in una struttura fissa come la pagina, pensiamo ancora al web in termini di pagine cioè di contenitori di informazioni di forme differenti ma comunque predefinite.

Non è più così: oggi un sito web è un'entità che, accanto a contenuti statici, offre interattività e contenuti dinamici.

Il concetto di pagina è servito egregiamente per addolcire il passaggio dal supporto cartaceo a quello digitale ma oggi ha perduto la sua connotazione originaria: adesso una pagina web, capace com'è di offrire interazione e fluidità di forma, è l'opposto di una classica pagina di un libro.

I mattoncini Lego e l'IKEA

Per usare una metafora di facile comprensione, adesso è più opportuno considerare una pagina web come un contenitore costruito coi mattoncini Lego, dove a ogni mattoncino corrisponde una funzionalità ben precisa, come, per esempio, contenere del testo, rimandare mediante un link, accettare una singola informazione inserita dall'utente, mostrare una foto o un video.

Gruppi di mattoncini, a loro volta, costituiscono dei blocchi riutilizzabili: più paragrafi costituiscono un articolo, più campi di inserimento di dati formano un modulo per, ad esempio, iscriversi a un servizio, più immagini formano un album fotografico.

Infine, più blocchi insieme, adeguatamente posizionati, vanno a costituire la struttura di presentazione all'utente delle funzioni e dei contenuti offerti.

Un concetto fondamentale dell'atomic design è questo: la riduzione della struttura di un sito web ai suoi elementi fondamentali - un po' come se fossero atomi - per poi ricomporli in gruppi e blocchi riutilizzabili, scalabili e riconfigurabili a seconda delle esigenze rende assai più gestibile la realizzazione e manutenzione di un sito web mediante un sistema di progettazione lineare.

I mobili IKEA da assemblare sono un esempio di atomic design: lo stesso tipo di vite serve per fissare componenti simili; un unico meccanismo di bloccaggio è usato, mediante pezzi concettualmente uguali ma differenti in dimensioni, per tenere insieme intere parti di mobili e pensili; lo stesso pomello può aprire un cassetto o un'anta, a scelta del cliente.

Linee guida: obiettivi e linguaggio a braccetto

L'adozione di un sistema di progettazione ben definito permette di stilare una serie di direttive, raccolte in un documento di linee guida, destinato a sviluppatori e personale addetto alle successive modifiche e manutenzioni.

Le direttive riguarderanno il modo di comporre i singolo elementi, l'utilizzo dei colori (quasi sicuramente quelli dell'entità cui il sito web si riferisce), il modo di organizzare il codice e come scegliere i nomi da assegnare a elementi, blocchi e strutture.

La cassetta degli attrezzi e il magazzino dei pezzi

Dopo la stesura delle linee guida, il passo successivo consiste nell'adozione di strumenti di sviluppo comuni e nella creazione di una libreria di componenti condivisi: i primi daranno una solida omogeneità a quanto via via prodotto, la seconda costituirà una preziosa risorsa dalla quale attingere durante il processo di sviluppo del sito (o dei siti) web.

Entrambi rafforzano il sistema di progettazione, confermandone la struttura e mostrandone in modo tangibile l'utilizzo.

Le linee guida supportano nella scelta degli strumenti di sviluppo e nella produzione dei primi risultati tangibili

Convincere le persone: a parole...

Accade di affrontare lo sviluppo di un sito web in qualità di consulente esterno. Se da una parte questo porta a soddisfazioni non solo economiche ma anche personali, dall'altra parte a volte può diventare un incubo, a causa di resistenze da parte degli esperti interni all'azienda, rigidità dei tecnici ("Si è sempre fatto così! Perché dovremmo cambiare tutto?"), mancanza di visione dei manager e svariati altri motivi.

Per convincere della validità del sistema di progettazione basato sui principi dell'atomic design, una prima carta da giocare consiste nel parlare dei vantaggi a medio e lungo termine che il sistema porterà a tutti, non solo dal punto di vista del risparmio di denaro ma anche in termini di consistenza, di maggior semplicità nello sviluppo anche di funzioni fruibili su piattaforme differenti, migliore manutenibilità, diminuzione dei tempi di sviluppo, coerenza della documentazione.

... e coi fatti

Accanto alle parole, a loro sostegno è bene presentare immediatamente degli esempi, meglio se addirittura sviluppati al volo, in presenza del cliente, per mostrare in modo inequivocabile di cosa si sta parlando.

Un utile esercizio: stampare su carta una homepage di un sito a scelta e ritagliarne i singoli componenti, per poi esaminarli singolarmente e riprodurli al volo, secondo le indicazioni date dal personale dell'azienda, illustrandone brevemente le caratteristiche principali.

La progettazione come processo iterativo

Il modello di sviluppo cosiddetto a cascata, largamente utilizzato nel secolo scorso ma oggetto, da ormai più di tre decenni, di numerose e ragionate critiche, ha ceduto il posto a un paradigma più adatto alla mutevolezza delle condizioni in cui si trova a operare un sito web: in altre parole, prevedere un documento di requisiti da seguire rigidamente, per arrivare a sviluppare un prototipo da cui poi ricavare il sito da mandare in produzione, non lascia troppi spazi per aggiustamenti che si dovessero rendere necessari col passare del tempo, dovuti magari a modifiche allo standard HTML, all'introduzione di nuovi costrutti CSS o alla diffusione di dispositivi di visualizzazione dei quali neanche possiamo immaginare adesso le caratteristiche.

Meglio, invece, un processo di adattamento continuo: simile a quello adottato da Michelangelo per scolpire le sue opere, l'idea è di partire da un blocco iniziale e procedere per raffinamenti successivi, fino all'ottenimento di un sito con le funzionalità previste.

È importante quindi creare le condizioni affinché tutti possano tranquillamente comunicare le loro indicazioni e chi sviluppa possa lavorare costantemente e con la dovuta serenità al sito in via di realizzazione.

L'educazione del cliente

Brad Frost suggerisce alcuni metodi per educare il cliente, per traghettarlo dal vecchio modello di sviluppo che ne prevedeva il coinvolgimento solo a inizio e fine progetto al nuovo sistema di progettazione, che ne richiede l'attenzione più frequente durante lo sviluppo del sito desiderato, evitando, al contempo, che il committente intralci il team di sviluppo o stravolga i piani iniziali.

In conclusione

Il metodo Atomic design ideato da Brad Frost è un nuovo, efficace sistema di progettazione, che velocizza la fase di creazione e test e permette di mantenere e gradualmente aggiornare con semplicità qualsiasi tipo di sito web.

Vale sottolineare un aspetto di rilievo: il sistema di progettazione proposto elimina la necessità di dover ricreare una nuova versione di un sito partendo da zero. Questo evita inutile stress sia agli sviluppatori, che possono procedere per piccoli passi, sia agli utenti, che non saranno più costretti a doversi adattare, da un giorno all'altro, a uno strumento completamente nuovo ma potranno farlo gradualmente.