Atomic Design: far esplodere ciò che pensavi di sapere sul web design

È convinzione comune che la flessibilità equivalga all'essere sfrenati, che per essere creativi bisogna anche essere sfrenati. Per completare un progetto, tuttavia, specialmente uno intricato come il web design, la creazione di una struttura può effettivamente darti più flessibilità. Hai bisogno di un quadro: non è negoziabile. Flettere i tuoi muscoli artistici e creativi dove hai veramente la libertà di risulterà in design tanto ispirati quanto funzionali e realistici. Il design atomico è un approccio sensato e metodico al web design che ti dà ancora la possibilità di sperimentare all'interno del framework.

Sistemi di progettazione

I designer non creano più semplicemente pagine web; creano sistemi di progettazione. I sistemi di progettazione includono:

• Colore
• griglie
• Struttura
• Tipografia
• Eccetera.

Adoro il modo in cui Jack Strachan di UX Planet descrive i sistemi di progettazione: “In breve, un sistema di progettazione è una raccolta di componenti riutilizzabili, guidati da standard chiari, che possono essere assemblati insieme per creare un numero qualsiasi di applicazioni. I sistemi di progettazione sono un metodo per tradurre un'esperienza coerente e un linguaggio visivo in un prodotto quando si lavora su diversi punti di contatto".

Gli elementi del design possono essere soggettivi e possono diventare rapidamente travolgenti e caotici. Per classificarli, il design deve essere considerato in modo più metodico. Questo è ciò che ha fatto il web designer Brad Frost.

La nascita del design atomico

Ecco come Brad ha inventato il design atomico: “Nella ricerca di ispirazione e parallelismi, ho continuato a tornare alla chimica. Il pensiero è che tutta la materia (sia solida, liquida, gassosa, semplice, complessa, ecc.) sia composta da atomi. Quelle unità atomiche si legano insieme per formare molecole, che a loro volta si combinano in organismi più complessi per creare alla fine tutta la materia nel nostro universo”.

Prosegue spiegando che le interfacce sono costituite da componenti che possono essere classificati in blocchi costitutivi. Ecco l'ordine dal più piccolo al più grande:

• Atomi
• molecole
• organismi
• Modelli
• Pagine

Fonte: BradFrost.com

I mattoni del design atomico

L'attrazione principale del design atomico è che promuove la coerenza. Molti degli elementi che crei possono essere facilmente replicati, riutilizzati o ridimensionati. E per tenerne traccia tutti, i designer possono costruirsi una libreria in cui possono vedere tutti i loro elementi e stili in un unico posto. C'è anche un po' di spazio per la personalizzazione, ma solo quando gli elementi costitutivi diventano più complessi e più grandiosi. Entriamo nei cinque elementi costitutivi:

1. Atomi

Come gli atomi sono importanti nel mondo naturale, i tag HTML sono per le interfacce web. Significato: tutte le interfacce web iniziano con tag HTML o elementi fondamentali (animazioni, pulsanti, tavolozze di colori, caratteri, etichette dei moduli, ecc.). Sebbene questi atomi non siano utili per il web design da soli, sono necessari per costruire l'interfaccia web.

2. Molecole

Le molecole sono più complesse degli atomi, ma non sono complessi nel complesso. Quando raggruppi insieme atomi non così utili, hai molecole più utili: Etichetta modulo di ricerca + Input + Pulsante (atomi) = Modulo di ricerca completato (molecola)

3. Organismi

Quando raggruppi insieme le molecole, ottieni organismi, che sono più complessi dei loro predecessori: Logo + Navigazione + Modulo di ricerca + Icone dei social media (molecole) = Masthead completato (organismo)

Idealmente, sarai in grado di riutilizzare gli organismi sul sito Web o su diversi siti Web, mantenendo il layout generale e personalizzandolo con testi e immagini diversi. Ad esempio, puoi utilizzare lo stesso tipo di masthead su tutti i siti web che progetti, oppure puoi creare un organismo specifico del prodotto (immagine + titolo + prezzo) che ripeti nella pagina del prodotto.

Questo è il momento in cui l'interfaccia web inizia davvero a configurarsi in un modo unico e personalizzato. Prima d'ora, la tua interfaccia è solo una raccolta di semplici elementi. Durante la fase degli organismi, il sito web diventa più visivo.

Se dovessi condividere il tuo processo con un cliente, questa è la parte in cui direbbe: "Oh, ho capito". Questo è il momento di iniziare il wireframing o mettere insieme i prototipi in modo che il cliente possa darti un feedback prima che tu vada avanti.

4. Modelli

Quando raggruppi gli organismi insieme, hai dei modelli. Questo è quando il layout di pagina effettivo si riunisce. Mentre le molecole e gli organismi hanno i loro layout interni, la fase dei modelli è quando inizi a vedere come si completano e interagiscono tra loro; dove sono posti l'uno rispetto all'altro; e come fluiscono nel loro insieme. Il modello fornisce il contesto delle molecole e degli organismi. Tieni presente che i modelli hanno contenuto segnaposto, non contenuto personalizzato o originale.

Fonte: BradFrost.com

5. Pagine

Le pagine portano i modelli al livello successivo sostituendo il contenuto segnaposto con contenuto effettivo. Probabilmente non sarà il contenuto finale, ma sarà più rappresentativo del design e del contenuto finali. L'aggiunta di contenuti permanenti di alta qualità a questo punto potrebbe essere uno spreco perché il sito Web deve ancora essere testato, rivisto e ottimizzato. Detto questo, è possibile che si collega nel contenuto finalizzato - dipende da dove ci si trova in quel processo.

Questa è la fase in cui il sito web sarà sotto il maggior controllo. A seconda delle recensioni e dei feedback ricevuti, potrebbe essere necessario modificare molecole, organismi e modelli. Questo è anche un buon momento per testare le variazioni di design.

Pensieri finali

La cosa sul design atomico è che non è nuovo: la verbosità lo è, ma la teoria no. Questo è il modo in cui i siti web sono stati progettati per molto tempo ormai. Parlare in termini di progettazione atomica non ti renderà automaticamente un grande designer o sviluppatore; non è un sostituto per un lavoro solido.

Un vantaggio di parlarne in questo modo, nell'usare questo tipo di terminologia per chiarire la metodologia, è che è più facile da capire per i non sviluppatori: puoi spiegare il tuo processo ai clienti. E per lo sviluppatore organizzato, è un modo per suddividere i progetti in compartimenti. Sarai in grado di approfondire un componente o un piccolo gruppo di elementi che non funzionano. Può aiutarti a vedere la foresta per gli alberi invece di dire: "Tutta questa cosa è imperfetta".

Il design atomico ti consente di abbracciare la creatività senza perderti in essa. Gestisce gli elementi di base e i sistemi di progettazione in un modo che ti consente di iniziare un progetto più velocemente in modo che il tempo possa essere speso dove sono più necessarie la tua abilità artistica e le tue abilità: apportare adattamenti intricati, risolvere problemi, soddisfare le esigenze dei clienti e, infine, creare un sito web che vada oltre la norma.

Mantieni lo slancio del web design e dai un'occhiata a 10 regole di buona progettazione dell'interfaccia utente da seguire in ogni progetto di web design.

Immagine in primo piano tramite ShadeDesign / shutterstock.com