Parlem d’Atomic Design…

A Digital Hamster utilitzem la metodologia de disseny atòmic per dissenyar les nostres interfícies, crear dissenys consistents i agilitzar el treball. Però què és atòmic design?

La metodologia de l'Atomic Design o disseny atòmic sorgeix d'una teoria ideada pel dissenyador Brad Frost, qui la defineix com un "sistema de treball que es basa en la creació d'elements modulars senzills per crear estructures d'informació molt més complexes". És a dir, a Frost se li va ocórrer utilitzar el model atòmic per transmetre la idea que, tant en el disseny com en el desenvolupament web, s'ha de treballar des dels elements particulars cap als generals.

Segons la seva teoria, un sistema de disseny es compon d'elements de cinc nivells: Àtoms> Molècules> Organismes> Plantilles> Pàgines.

Nivell 1: Àtoms

Un àtom és la unitat de partícules més petita que pot existir. Aplicat al disseny, parlem d'àtoms quan parlem d'elements UI que per si sols tenen alguna funcionalitat. És aquell element que necessita estar acompanyat d’altres àtoms per a què tingui coherència. Un exemple clar d'àtoms podrien ser botons, cards, avatars, inputs de formulari..., però també tipografies, paleta de colors, espaiats, paràgrafs, etc.

Nivell 2: Molècules

Com en química, les molècules sorgeixen de la unió de dos o més àtoms. De la mateixa manera, una molècula en Atomic Design és la unió de diferents àtoms per formar un element UI més complex. Una molècula és aquell element que pot utilitzar-se de forma autònoma, atès que ja ofereix informació suficient i pot funcionar com una unitat. Si portem l'exemple a una interfície, una molècula podria representar un header, 1 footer, un post o un camp de formulari amb un botó d'enviar i un label.

Nivell 3: Organismes

En aquest tercer nivell ja parlem d'elements que són més complexos, perquè són el resultat de sumar els nivells anteriors. Els organismes estan formats per 2 o més molècules que, a la vegada, estan formats per dos o més àtoms. Un exemple d'això seria un llistat en el qual cada ítem de la llista està composat per un avatar i un text.

Nivell 4: Plantilles

Les plantilles dins de l'Atomic Design serien els wireframes: una unió de diferents organismes que formen un web o una app. Es tracta d'un lliurable d'alta fidelitat, però que no acaba de ser el disseny final. Les plantilles organitzen els organismes i s'enfoquen en l'estructura del contingut en lloc del contingut final de la pàgina.

Nivell 5: Pàgines

Les pàgines són l'última instància, es conformen amb el conjunt d'organismes. Les pàgines, serien la suma de tot l'anterior i el resultat final: el web, l'aplicació, el software o qualsevol producte digital que estiguem desenvolupant.

Resumint ... Per què hem d'utilitzar aquesta metodologia?

Utilitzem Atomic Design perquè ens ajuda a plantejar els elements d'UI bàsics amb els quals després els desenvolupadors hauran de treballar. Amb aquesta base, després podem anar creant fàcilment les molècules, organismes i, finalment, el disseny final. Ens obliga a plantejar bé d'inici el "sistema de disseny", amb les tipografies, jerarquies, paleta de colors, etc., que necessitarem.

A més, ajuda a planificar i ens permet crear un sistema que en un futur podrem actualitzar fàcilment, ja que tindrem els àtoms creats i només haurem de combinar-los d'una altra manera per crear molècules i organismes diferents. Utilitzar components reutilitzables fa que la tasca de generar una pàgina sigui un procés molt més àgil i col·laboratiu, evitant errors de codi i repeticions innecessàries, i creant un sistema consistent.