Atomic Design, la fórmula para crear interfaces flexibles

POR ABRIL TAPIA / FRONTEND SOFTWARE ENGINEER EN HTECH
Hacer uso de la metodología Atomic Design para el diseño de nuestras interfaces digitales permite tener una mejor estructura, una jerarquía adecuada y un mayor control de los elementos.

Esta manera de trabajar es muy útil, debido a que actualmente nuestros sistemas son más que una sola página web, pues poseen varios niveles. Como consecuencia, muchas veces terminamos teniendo uno o varios elementos que se reutilizan entre las diferentes secciones.

Ante esta problemática, Atomic Design ayuda a desglosar muy bien cada parte de los elementos, desde lo más pequeño, en este caso los átomos, hasta un conjunto de todos ellos, llegando así a páginas completas, lo que es de mucha utilidad a la hora de usarlos de nuevo en otros proyectos.

Las cinco etapas del diseño atómico

Atomic Design fue creado por Brad Frost, un consultor de sistemas de diseño, diseñador web, conferencista, escritor y músico avecindado en la ciudad de Pittsburgh, Estados Unidos.

Como característica, su metodología está compuesta por cinco etapas distintas que trabajan en conjunto para crear sistemas de diseño de una manera más jerárquica.

Átomos / Nivel 1: Aplica al diseño. Hablamos de átomos cuando mencionamos los elementos de interfaz de usuario (UI) que por sí solos tienen alguna funcionalidad, como los elementos HTML básicos, entre los que se encuentran: botones, labels, avatares, inputs de formularios, iconos, entre otros.

Moléculas / Nivel 2: Son grupos relativamente simples de elementos de la UI que funcionan juntos como una unidad. Éstos pueden ser la unión de dos o más átomos. Por ejemplo, un label, un campo de formulario y un botón de enviar.

Organismos / Nivel 3: Los organismos son componentes de la UI relativamente complejos y compuestos de grupos de moléculas, átomos u otros organismos. Estos organismos forman secciones distintas de una interfaz. Un ejemplo de este nivel es el header, ya que incluye menú, campo de búsqueda y, en ciertos casos, el logo y el nombre del sitio web. Algunos organismos también pueden estar integrados por la misma molécula repetida una y otra vez.

Plantillas / Nivel 4: Los wireframes se consideran como “plantillas” dentro de la metodología Atomic Design; son una unión de distintos organismos que forman una página o una aplicación, sin ser aún el diseño final. En otras palabras, las plantillas son objetos a nivel de página que colocan componentes en un diseño y enlazan la estructura de contenido del diseño.
Otra característica importante de las plantillas es que se centran en la estructura de contenido de la página en lugar de hacerlo en el contenido final de la página.

Páginas / Nivel 5: Es el diseño final que ya contiene las imágenes y otros detalles que hacen que ese archivo ya esté listo para el desarrollo. Además de demostrar la interfaz final tal como la verán sus usuarios, las páginas son esenciales para probar la efectividad del sistema de diseño.

¿Qué ventajas tiene Atomic Design?

Como podemos ver, utilizar las cinco etapas de Atomic Design permite lograr proyectos más ordenados y, por lo tanto, eficientes. Otras de sus ventajas son:

• Diseños mucho más homogéneos entre sí y adaptables a todo tipo de pantallas.
• Coherencia y facilidad en la creación del sistema de diseño.
  Velocidad a la hora de hacer los prototipos, puesto que los elementos ya existirán.
• Separación limpia entre estructura y contenido.
• Rapidez en el proceso de actualizar el diseño del producto y/o añadir nuevas funcionalidades, ya que los cambios no harán que se deba programar todo desde cero.
• Diseño y códigos más consistentes y eficientes debido a que hay menos elementos.
• Utilización de átomos para crear cualquier diseño que se requiera.
• Desarrollo y diseño un poco más ligeros, gracias a la modularidad del proceso.

Como podemos ver, Atomic Design es una gran opción para facilitar los proyectos de UI.