Utilizzo del design atomico nello sviluppo Web moderno
Se c'è qualcosa che ho imparato a lavorare per un'azienda tecnologica, è che per costruire un sito Web - un sito Web davvero stupendo, bello e funzionante - una moltitudine di talenti e elementi diversi devono riunirsi e lavorare in armonia. A volte può sembrare di lavorare sulla Torre di Babele: una persona sta setacciando una tavolozza di codici esadecimali, i ragazzi dall'altra parte della stanza fanno tintinnare una zuppa alfabetica di vari acronimi di codifica e l'account manager è accanto a me al telefono spiegare come utilizzare un sistema di gestione dei contenuti per un cliente, tutto mentre sto cercando di scrivere questo articolo in inglese semplice.
Tutti questi elementi hanno bisogno di un modo per riunirsi senza che nulla si perda nella cacofonia, e c'è un concetto relativamente nuovo che ci ha davvero aiutato a lavorare meglio come una squadra: designer, sviluppatori, tester ... tutti.
È chiamato Disegno atomico .
Cos'è il design atomico?
I componenti di Atomic Design sono derivati dal designer Brad Frost È il fascino della chimica; gli atomi sono l'unità più piccola, si uniscono in molecole, che a loro volta formano organismi più complessi, creando infine tutta la materia nell'universo.
Quindi, se siamo nella Stazione Spaziale Internazionale, osservando l'intero progetto nel suo insieme, ecco l'arte della home page completa per un recente progetto a cui abbiamo applicato Atomic Design, Route 93 Pizza Mill :
La homepage di Route 93 Pizza è composta da tutti i nostri elementi come un sito web unificato e funzionale. Ora, se posizioniamo il sito sotto un microscopio, possiamo vedere i suoi componenti granulari:
Atomi: qui sotto ci sono gli atomi per il sito web di Route 93 Pizza Mill. Gli atomi sono i mattoni di base, come tag, etichette dei moduli, pulsanti, tavolozza dei colori e caratteri. Sebbene non siano molto utili da soli, gli atomi sono il tuo punto di riferimento preliminare: l'inizio della tua creazione.
Molecole: le molecole sono il luogo in cui gli atomi vengono messi al lavoro, dove il design del sito web completato inizia a sentirsi tangibile. Nelle molecole di Route 93, puoi vedere la tavolozza dei colori, i caratteri e l'iconografia riunirsi in campi modulo, sovrapposizioni di immagini e pulsanti. Sono, come dice Frost, il tuo strumento per "fare una cosa e farlo bene".
Organismi: quando arriviamo agli organismi, possiamo creare l'intero piè di pagina per Route 93. Combina tutti i suddetti componenti in un sito web funzionale ed estetico.
The Interface Inventory: ora che abbiamo tutti gli ingredienti, abbiamo bisogno di un menu tangibile su cui sistemarli in qualcosa di digeribile; un documento che contiene tutti gli elementi di cui sopra come risorsa leggibile e utilizzabile, un inventario di interfaccia.
Mentre alcune organizzazioni chiamano questa una libreria di modelli o una guida di stile e usano Interface Inventory in modo specifico per riferirsi a un audit che hanno fatto su un sito web esistente, usiamo il termine Interface Inventory per i nostri progetti (oltre a audit di altri siti) come parte di un processo di valutazione continua.
Poiché il flusso di lavoro di Atomic Design riproduce un dilemma simile a un uovo o una gallina, l'inventario delle interfacce di solito assume una forma organica dopo la creazione della home page e di un'altra pagina del sito Web, ma non troppo dopo. Quando queste due pagine iniziali prendono forma, il progettista assicura che gli elementi su entrambi siano coerenti. Per tutte le pagine successive, hanno quindi la possibilità di trarre dall'inventario. Questo produce una fonte canonica per come gli stili visivi dovrebbero essere applicati in tutto il progetto, un linguaggio comune letterale, in inglese semplice, di codici esadecimali, stili di pulsanti, larghezze di riempimento, ecc. A cui gli sviluppatori e l'intero team possono fare riferimento.
Progettando un Inventario di interfacce con il processo di Atomic Design, possiamo iniziare con moduli primitivi e assemblarli in elementi completati. Questo processo migliora l'efficienza, la comunicazione tra i membri del team e produce un sito Web più bello in generale.
Cosa fa per noi Atomic Design
Atomic Design ci aiuta a scoprire solide "verità" sul design del progetto su cui stiamo lavorando, oltre a creare un vocabolario comune tra i suoi aspetti artistici e tecnici. Incoraggia un sistema più robusto nel complesso che migliora UX e fornisce una metodologia in modo che i progettisti possano aderire alle linee guida basate sui componenti degli sviluppatori mantenendo al contempo la creatività.
Naturalmente, gli sviluppatori codificano da zero mentre l'approccio di un artista di solito inizia in una forma più nebulosa, che poi si solidifica in una pagina web funzionale dopo un po 'di stampaggio. Atomic Design incoraggia, e richiede anche ai progettisti di lavorare da zero, per rendere coerenti e mirate tutte le componenti dell'interfaccia al livello più basso possibile.
L'istituzione di questo linguaggio comune, rappresentato da Interface Inventory, assicura che i progettisti e gli sviluppatori non stiano inventando nuove soluzioni ai problemi che sono già stati risolti. Ad esempio, se un nuovo modulo di contatto viene aggiunto a un progetto, gli stili necessari per creare tale modulo esistono già e possono essere facilmente utilizzati per creare la pagina, ritenendolo inutile per il progettista di dedicare ulteriore impegno. Non elimina necessariamente il lavoro dal progettista, ma rende invece più semplice per gli sviluppatori la creazione rapida di soluzioni piuttosto che richiedere al progettista di prendere in giro ogni pagina o organismo per prima. Il ruolo del designer è quindi spostato su qualcosa di più simile alla direzione artistica dopo che le pagine sono state costruite. Queste "verità" tangibili eliminano anche la necessità di utilizzare il designer come arbitro. Domande come "questa scelta progettuale è intenzionale?" O "quale colore dovremmo usare su questo particolare elemento?" Così come le modifiche dell'ultimo minuto o aggiunte a una pagina vengono fornite dall'inventario dell'interfaccia.
Il linguaggio comune continua anche con l'assicurazione della qualità. Quando eseguo il test di una pagina Web sia per il contenuto che per la funzionalità, estro l'Inventario di interfacce sullo schermo come guida. Sebbene sia soprattutto uno strumento di progettazione e in secondo luogo uno strumento di sviluppo, consente a tutti i membri del team di partecipare con fiducia a conversazioni su design e coerenza, in quanto ci assicuriamo che i nostri siti siano impeccabili e pronti da consegnare al cliente.
Conclusione
Al fine di garantire la corretta esecuzione di un progetto, in particolare alcuni di quelli più grandi che spesso ci troviamo ad affrontare, la comunicazione è fondamentale; se stai urlando una serie di idee diverse nella stanza l'una dall'altra, non sarà mai possibile che ne scaturisca nulla. Atomic Design aiuta a fare da traduttore per questi diversi dipartimenti e le "lingue" che li accompagnano per mantenere coerenza nel design. Stabilisce una risorsa modulare per il team, consentendo coerenza e risultati in efficienti turnaround, meno errori e un prodotto finito più lucido.