In questo articolo voglio parlarti del Metodo Atomico in 5 step per creare un sito web e del processo di azioni che ho applicato (e che applico ancora oggi) su tutti i miei progetti.
Andremo nel vivo di ogni singola fase del processo di creazione di un sito web con semplicità ed efficacia.
L’efficacia è quello che conta di più per un sito web
Se non mi conosci, mi chiamo Andrea Gullo, mi occupo di creazione di identità aziendali ed esperienza utente per progetti online.
Ti confesso una cosa
Non mi piace perdere tempo
E a te?
Bene, allora è il momento giusto per leggere quest’articolo!
Da quando ho scoperto questo Metodo Atomico, la mia visione di progettazione è cambiata positivamente.
Nel tempo ho maturato sempre di più l’idea che noi designer o creatori di pagine web siamo affini a chi costruisce puzzle.
Eh? Cosa? Un puzzle?
Pensaci bene..
Nel puzzle si inseriscono i pezzi uno per volta e, allo stesso modo, per la creazione di un sito web si eseguono gli step uno alla volta al fine di aggiustare il tiro e sviluppare progetti ottimali.
Ho sempre voluto conoscere un metodo da seguire per ogni singolo lavoro.
E l’ho trovato!
L’ho conosciuto per caso leggendo un articolo molto interessante proprio del creatore di questo modello.
Dopo aver conosciuto la metodologia di questa composizione del puzzle, ho rivoluzionato completamente il mio modo di ideare e progettare tutti i lavori che svolgo.
Siamo sinceri..
Per ogni nuovo progetto su cui ci mettiamo a lavorare facciamo sempre le stesse azioni.
Vero?
Cambia solamente una cosa fondamentale, la creatività.
La creatività si aggiunge ai 5 step che scopriremo insieme in questo articolo
Passeremo dalla teoria alla pratica del Metodo Atomico di Frost.
Il mio consiglio è quello di leggere questo articolo fino in fondo perché scoprirai la “chiave magica” che sta dietro al Modello Atomico.
Non è solo un modello di lavoro, ma anche un processo mentale che potrai adattare ed utilizzare immediatamente su ogni tuo progetto.
Questo processo è stato creato, nel 2013, da un web designer americano, Brad Frost.
Frost spiega in 3 semplici frasi cos’è l’Atomic Design
“Atomic Design è una metodologia, composta da 5 fasi distinte, che implica la rottura di un layout di un prodotto digitale nei suoi componenti di base, che vengono poi riutilizzati in tutto il sito”
Quindi questo metodo consente di seguire un processo per creare ogni singolo pezzetto dell’intero puzzle del tuo progetto di sito web.
Gli step della metodologia di Frost sono:
- atomi
- molecole
- organismi
- templates
- pages
Ma prima di passare alla prima fase della progettazione ti svelo il mio metodo.
Il processo che ho ideato è strutturato in un ordine un po’ diverso dal sistema tradizionale di Frost è formulato così:
- templates
- atomi
- molecole
- organismi
- pages
Vedi le differenze?
Ovviamente il metodo di pensiero è identico, ma ho apportato cambiamenti al processo dopo averlo testato nei miei progetti.
Prima di procedere con il processo, ti anticipo che nominerò alcuni tool di design (e non solo) che magari non conosci. Ecco dove puoi trovarli.
Non è finita qui..
Se ti interessa creare un sito web, ti consiglio di dare una lettura alla mia guida completa: Come ho creato il mio sito web andreagullo.net nel 2022.
Pronto per conoscere come costruire il tuo puzzle?
Primo step: template
Ogni volta che inizio a progettare le diverse interfacce web parto sempre da una matita e da una pagina bianca del mio insostituibile Moleskine e disegno l’idea che ho visualizzato nella mia mente comunemente detto wireframe.
Il wireframe in poche parole è la rappresentazione grafica in bianco e nero, in cui si struttura lo scheletro delle pagine del progetto e solo successivamente di passa alla costruzione del template, ovvero, alla comunicazione testuale ed i contenuti delle sezioni che compongono l’intero sito web.
Svolgo questa azione per ultima al fine di avere chiaro di quanto spazio ho bisogno per il testo prima di mettermi completamente a progettare sul tool di design come Figma oppure Adobe XD.
Il wireframe serve proprio come una mappa mentale iniziale.
Non è necessario creare le posizioni o le spaziature reali di ogni elemento ma, principalmente, come una bussola per il progressivo sviluppo del progetto.
Secondo step: atomi
Se stai leggendo quest’articolo sul tuo laptop o desktop, riduci questo schermo e poi apri Figma in modo da creare insieme il tuo progetto.
Se non conosci Figma, ti consiglio di provarlo!
È un ottimo strumento per creare interfacce in modo semplice e senza costi di utilizzo.
Non c’è solo questo tool ma c’è anche Adobe XD.
Ho dedicato molto tempo alla raccolta, divisi per categoria, dei migliori tool presenti sul mercato, li ho testati e li utilizzo tutt’ora personalmente durante le giornate lavorative.
In questo momento, arriva la fase per essere realmente creativi.
Dobbiamo inserire ogni piccolo elemento necessario sulla tavola di lavoro, cioè, tutti gli atomi, come per esempio, i font da utilizzare, i diversi colori identitari del brand, le icone, lo stile dei pulsanti, le immagini e molto altro
Inserisci tutto ciò che vuoi, basandoti sempre sul wireframe che hai creato in precedenza.
In sostanza, gli atomi sono la più piccola parte che compone una qualsiasi interfaccia sito web che andrai a creare.
Terzo step: molecole
Non basta avere tutti i diversi atomi distanti tra di loro ma dobbiamo fare una cosa fondamentale, unire gli atomi in base all’idea progettuale iniziale cioè il wireframe.
Daremo vita, così, ad un gruppo di elementi funzionante e riconoscibile in cui l’utente dovrà compiere una determinata azione.
Mi spiego meglio!
Pensa ad una semplice barra di ricerca di un ecommerce o di un qualsiasi altro sito web, in cui può ricercare quello di cui ha bisogno.
Di solito quando l’utente cerca un prodotto specifico ha bisogno di 2 atomi.
Quali sono i due atomi?
Pensaci un paio di secondi
Si deve inserire una casella di digitazione delle parole e un pulsante per avviare la ricerca.
La costruzione delle molecole vale anche per altri scopi, come per esempio, il modulo per il login, il modulo per il checkout, il testo con un pulsante, paragrafo di titolo e testo, ecc.
In poche parole le molecole sono tutti quegli elementi (atomi) che, uniti tra di loro, permettono di ottenere una parte della sezione dell’interfaccia.
Quarto step: organismi
Questa fase è cruciale perché, arrivati a questo punto, le diverse sezioni iniziano a prendere forma ed è il momento di unire quanto costruito finora, cioè, atomi e molecole seguendo l’idea originaria del wireframe.
Ormai, spero, sia chiaro che il wireframe si utilizza come bussola per l’intero progetto.
Come vedi, in questo caso, l’organismo, cioè la sezione della pagina, è composta da atomi e molecole rappresentate da headline, il testo e l’immagine di sfondo.
Ma ovviamente ogni organismo può variare in base a ciò che si vuole comunicare.
Quinto step: pages
Siamo arrivati a quest’ultimo step, lo step più importante della creazione del nuovo sito web e si dovrebbero avere davanti, nella tavola di lavoro di Figma, tutti gli organismi divisi tra di loro con i relativi stili e colori decisi all’inizio.
Ora uniremo tutte le sezioni create, seguendo l’ordine stabilito dalla bussola progettuale (wireframe).
Il risultato che otterrai sarà un’interfaccia pronta per essere implementata passando dalla fase di progettazione alla fase di programmazione.
Ecco la “Chiave magica” per il tuo sito web.
Hai scoperto qual è la “chiave magica” che si trova all’ombra di questo Modello Atomico?
Probabilmente sì!
La chiave magica è quell’elemento che ho capito dopo aver applicato questi 5 step più e più volte nel tempo nei miei progetti.
L’elemento di cui parlo è il focus, cioè quell’elemento che fa risparmiare tempo focalizzandosi solamente su un determinato tassello del puzzle.
Pensaci un’attimo!
All’inizio cosa abbiamo fatto?
- Abbiamo iniziato a buttare su carta l’idea che avevamo in testa
- Siamo passati alla costruzione del testo di ogni singola sezione delle pagine del sito
- Abbiamo creato ogni piccolo atomo
- Abbiamo unito gli atomi per ottenere le molecole
- Abbiamo unito le molecole per ottenere l’organismo per dar vita alla sezione
- Infine, abbiamo unito i tasselli (le sezioni) per dar vita alla nuova pagina.
Conclusione
Ottimo, siamo arrivati davvero alla fine!
Con questa metodologia, rivisitata da me, otterrai un progetto realizzato con pochi semplici passi senza perdite di tempo raggiungendo il miglior risultato.
Ovviamente potrai ordinare ogni singolo step del Metodo Atomico di Frost come più preferisci perché è importante avere un metodo personalizzato in base alle proprie attitudini ma le fasi restano sempre le stesse.
Ci vediamo presto con un altro articolo!
