L’Atomic Design: Descobreix tots els seus avantatges i beneficis.

Atomic-Design-Brad-Frost-2013-Book

En articles anteriors del Blog d’Itequia, hem parlat de la importància de tenir un bon disseny en les nostres webs i aplicacions, per això, avui parlem de l’Atomic Design.

El concepte Atomic Web Design apareix per primera vegada al llibre Atomic Design de Brad Frost, publicat per primera vegada el 2013. I després de la seva publicació, les seves teories s’han convertit en un referent per a la creació dels sistemes de disseny.

Brad Frost, com explica al seu llibre, concep el disseny de la interfície web com un gran tot compost per unitats més petites, que ell anomena àtoms. I reutilitzant i combinant aquests petits components, generem elements majors, que són les diferents parts del disseny d’un producte digital.

Què és l’Atomic Design?

 

Podem definir l’Atomic Design com una metodologia per dissenyar i desenvolupar llocs web o aplicacions, basada en el concepte de dividir interfícies d’usuari complexes en parts més petites i manejables.

La idea principal és crear una estructura jeràrquica de components reutilitzables, començant pels elements més petits i simples, coneguts com a “àtoms”, i construint estructures més grans i complexes, denominades “molècules”, “organismes”, “plantilles” i “pàgines”.

Brad Frost va introduir la metodologia de l’Atomic Design el 2013 com una forma d’ajudar als dissenyadors i desenvolupadors a crear sistemes de disseny més consistents, escalables i eficients.

En desglossar el disseny en les seves parts més petites, els dissenyadors i desenvolupadors poden concentrar-se en crear i provar cada component de forma independent, el que facilita el manteniment i l’actualització del sistema al llarg del temps.

Quins són els 5 nivells de l’Atomic Design?

Veurem a continuació un breu resum dels cinc nivells d’Atomic Design enumerats per Brad Frost:

 

The-five-stages-of-atomic-design-Itequia

 

Àtoms

En aquest primer nivell, podem trobar els components més petits i bàsics del sistema, com ara botons, camps de formulari, tipografia, paleta de colors i icones.

A més, cadascun d’ells compta amb les seves pròpies variacions que representen els diferents estats: seleccionats, amb focus, deshabilitats, etc.

 

Stage1-atoms-atomic-design-Itequia

Molècules 

En aquest segon nivell, ens trobem amb les Molècules, que podem definir com un grup d’àtoms que treballen junts per realitzar una funció específica amb elements més complexos, com ara un quadre de cerca o un formulari d’inici de sessió. O, per exemple, una àrea amb un avatar, nom i text informatiu. O un icona juntament amb un text que compleix una funció determinada.

 

Stage2-molecules-Itequia

 

Organismes 

En el tercer nivell ens trobem amb els Organismes, una combinació de molècules que formen una secció distintiva d’una interfície d’usuari, com un capçal o un peu de pàgina. O quan creem una llista d’usuaris o juntem els icones i text per crear la navegació d’una aplicació.

 

Stage3-organims-Itequia

 

Plantilles 

Al quart nivell trobem les Plantilles, un disseny que defineix l’estructura general, l’esquelet, d’una pàgina, incloent els marcadors de posició per a contingut específic. És a dir, una unió de diferents organismes que formen una pàgina o una aplicació.

Pàgines 

L’últim nivell de l’Atomic Design, les pàgines. Serien el resultat final del sistema, que inclou el contingut, imatges dades reals i altres detalls que componen el disseny final. 

Quines són les avantatges de l’Atomic Design?

En seguir la metodologia desenvolupada per Brad Frost de l’Atomic Design, els dissenyadors i desenvolupadors poden crear un sistema de disseny més estructurat i organitzat, que ens permetrà mantenir-lo actualitzat i escalar-lo més fàcilment amb el temps.

Per això, les avantatges de l’Atomic Design són clares:

  • Facilita la creació de la guia d’estil
  • Permet fer més ràpid els prototips ja que els elements ja estaran dissenyats
  • Fa més ràpid el procés de fer un reestyling del producte i/o afegir noves funcionalitats. Ja que els canvis no faran que es tingui que programar tot des de zero
  • Menys components farà el disseny i el codi més consistents i eficients
  • Permet reutilitzar àtoms per crear qualsevol disseny que es requereixi

 

L’Atomic Design és un model mental que ajuda a la descomposició i creació d’interfícies. No és un model lineal i únic a seguir, ja que serveix també per millorar i actualitzar interfícies ja creades.

Per això, l’ús de l’Atomic Design ens permetrà crear coherència i homogeneïtat dins d’un producte o entorn digital. Això es veurà reflectit en una millor experiència d’usuari (UX) en la interacció i ús del nostre producte.

Sigui quines siguin les necessitats del teu projecte, pots contactar amb nosaltres i t’ajudarem en el disseny del teu producte o servei.

Registra't a la nostra newsletter​

    En què et podem ajudar?