ATOMIC DESIGN

img
blog

23 Luglio 2020 - Michela Pezza

ATOMIC DESIGN: dalla fisica al web design

Il concetto di Atomic Design prende spunto dalla fisica. Come la materia è scomponibile in tanti sub elementi, fino all’arrivo dello stadio base composto dagli atomi, nell’Atomic Design si parte dagli elementi basilari che formano un’interfaccia, come i colori, fino ad arrivare all’output definitivo.

Oggi esistono moltissimi dispositivi diversi, il compito dell’Atomic Design è quello di cercare di progettare le varie interfacce mantenendo una coerenza tra i diversi dispositivi e allo stesso tempo una chiarezza che renda l’esperienza utente facile e piacevole.

Brad Frost, nel 2013, è stato il primo a descrivere questo procedimento:

“Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.[1]

                                                                                                                            

LE 5 FASI DELL’ATOMIC DESIGN

La progettazione di un’interfaccia efficiente è realizzabile solo se ne vengono compresi e stabiliti alla base gli elementi chiave. Per farlo, l’Atomic Design prevede cinque fasi:

  • Gli Atomi: la prima fase della progettazione con il metodo dell’Atomic Design (chiamata come l’elemento base della fisica) prevede la progettazione degli elementi basilari, come i colori, gli input e i bottoni;
  • Le Molecole: secondo step che mostra l’evoluzione degli elementi base in elementi più complessi e maggiormente funzionali, come il form;
  • Gli Organismi: terza fase in cui si cominciano a ottenere elementi completi, composti da più molecole. L’interfaccia, a questo punto, presenta un header che contiene informazioni necessarie per il controllo del funzionamento della rete. Sono presenti, oltre ai colori, ai bottoni, alla possibilità di search, anche la sezione del logo e la barra menu, ancora però a livello base;
  • Il Template: quarto step, dedicato al layout. Il template raffigura un primo scheletro completo della pagina finale;
  • Le Pagine: la fase finale dell’Atomic Design prevede la costruzione dell’interfaccia utente composta dal template e dai contenuti reali. È importante avere padronanza della nostra pagina per avere un’idea chiara della struttura.

È importante che vengano coinvolti nella creazione più elementi del team, dagli sviluppatori, agli art director, fino ai copywriter, per costruire una struttura solida e garantirne il monitoraggio dell’usabilità.

L’Atomic Design, infatti, è la realizzazione fisica e tangibile di un’idea intangibile e astratta.

Il grande vantaggio dell’Atomic Design è quello di garantire un profondo controllo e una più semplice gestione dell’inserimento dei contenuti, non solo delle interfacce web, ma anche di siti, newsletter e app.

Pensi che questo metodo possa fare al caso tuo e sei curioso di saperne di più? Contattaci per una consulenza!

[1] “L’Atomic Design è un metodo di lavoro composto da cinque fasi distinte che lavorano insieme per creare sistemi di progettazione di interfacce in modo più mirato e gerarchico”