Conoce cómo los átomos, moléculas y organismos se combinan para crear interfaces coherentes y escalables con la metodología del atomic design.

¿Alguna vez pensaste en que las clases de química se relacionarían con el diseño web? Pues aunque no lo creas, ambos se pueden comparar y relacionar dentro del mundo del diseño UX/UI. 

Con la creciente evolución y complejidad de las apps y sitios web, ha surgido un enfoque sistemático y escalable para la creación de estas interfaces, que se ha hecho bastante popular en los últimos años, por su enfoque modular y su capacidad para generar diseños coherentes y eficientes.

En este artículo te explicaremos qué es el Atomic Design, cómo se utiliza, sus componentes clave y los beneficios de adoptar este sistema de diseño. ¡Sigue leyendo!

Orígenes del atomic design 

El Atomic Design fue creado por Brad Frost en 2013 y es un sistema de diseño que aborda el proceso de diseño de una interfaz de usuario descomponiéndolo en elementos más pequeños y escalables.

Frost hace referencia a la analogía con la estructura de la materia, donde los elementos más pequeños y básicos se combinan para formar estructuras más complejas. Aquí entran esas clases de química, pues si recuerdas, el mundo natural está compuesto, en primer lugar, por pequeñas partículas indivisibles llamadas átomos. Cuando dos o más átomos se unen, se forman las moléculas, que a su vez pueden conformar organismos, y así sucesivamente. 

Tomando en cuenta esto, el Atomic Design se basa en la misma idea, donde una interfaz puede construirse a partir de bloques de construcción modulares que se ensamblan para formar componentes, y estos, a su vez, se combinan para crear páginas y flujos de usuario completos.

Según su propia descripción, el sistema de diseño se compone de elementos en cinco niveles: Átomos > Moléculas > Organismos > Plantillas > Páginas.

Componentes del Atomic Design

Para que terminemos de entender la definición del Atomic Design, conoceremos cada uno de los niveles o etapas. En este punto, debemos recordar que, así como en la química, cada etapa se construye sobre la anterior, en un ciclo o proceso, así que todas son esenciales.

1. Átomos

Un átomo es la unidad de partículas más pequeña que puede existir. Aplicados a las interfaces web, los átomos son nuestras etiquetas HTML, como una etiqueta de formulario, una entrada o un botón. También pueden ser más abstractos como paletas de colores, fuentes e incluso aspectos más invisibles de una interfaz como animaciones.

Hablamos de átomos para referirnos a elementos UI que por sí solos quizá no tienen mucha funcionalidad pero que trabajan como bloques de construcción fundamentales para seguir creando componentes más grandes.

2. Moléculas

Las moléculas son grupos de átomos unidos entre sí y son las unidades fundamentales más pequeñas de un compuesto. Estas moléculas adquieren sus propias propiedades y sirven como la columna vertebral de nuestros sistemas de diseño.

Por ejemplo, una etiqueta de formulario, una entrada o un botón no son muy útiles por sí mismos, pero al combinarlos pueden hacer algo juntos, como un formulario.

En esta etapa del proceso se debe poner especial atención a que la unión de estos elementos tenga sentido visual para los usuarios. Por eso, deben crear secciones en el sitio web respetando los principios básicos de diseño de interfaces y algunos de sus conceptos importantes, como los siguientes:

3. Organismos

En este tercer nivel ya hablamos de elementos que son más complejos, porque son el resultado de sumar los niveles anteriores. Los organismos son conjuntos de moléculas y átomos que forman secciones más grandes y completas de la interfaz, como encabezados, barras laterales o tarjetas de contenido.

Es necesario que veas estas agrupaciones más complejas como módulos en sí mismo que, bajo la definición de atomic design, funcionan como piezas flexibles que pueden moverse a lo largo de la página sin modificar el concepto del diseño de interfaz web. Así se mantiene la consistencia visual del estilo.

4. Templates

En estas últimas fases, a diferencia de las primeras tres, son meramente sobre diseño. Cuando los “organismos” de una página web ya están preparados, se componen los templates. Estas plantillas son diseños de páginas que definen la estructura general y el posicionamiento de los diferentes organismos y componentes. Representan una versión más detallada de la interfaz.

Hablamos sobre el “esqueleto” de la página o del producto de diseño. Por eso, aquí cobran más importancia conceptos como arquitectura de la información y jerarquía visual.

5. Páginas

Llegamos al último nivel del Atomic Design. Luego de haber diseñado todas las plantillas necesarias, es momento de “rellenar” los espacios vacíos con contenido real para que analices el resultado del proceso de diseño y se ajusten los detalles visuales según las necesidades.

Esta etapa es esencial ya que es donde probamos la efectividad del sistema de diseño. Ver todo en contexto nos permite retroceder para modificar nuestras moléculas, organismos y plantillas para abordar mejor el contexto real del diseño.

Beneficios del Atomic Design

Como explica su autor, el Atomic Design no es un proceso secuencial, sino un marco conceptual que nos ayuda a pensar en la interfaz de usuario como un todo cohesivo y holístico y una colección de partes, simultáneamente.

El diseño atómico nos da la capacidad de pasar de lo abstracto a lo concreto. Debido a esto, podemos crear sistemas que promuevan la consistencia y la escalabilidad al mismo tiempo que muestran las cosas en su contexto final. Y al ensamblar en lugar de deconstruir, estamos creando un sistema desde el principio en lugar de elegir patrones después del hecho.

En concreto, aplicar esta metodología nos brinda:

• Consistencia y coherencia
• Reutilización eficiente
• Facilita la colaboración
• Escalabilidad
• Facilita la adaptación a múltiples dispositivos
• Entre mucho más…

En resumen, el Atomic Design es una metodología poderosa y flexible que ofrece un enfoque modular para el diseño de interfaces UX/UI. Nos da la capacidad de pasar de lo abstracto a lo concreto. Podemos crear sistemas que promuevan la consistencia y la escalabilidad al mismo tiempo que muestran las cosas en su contexto final. Y al ensamblar en lugar de deconstruir, estamos creando un sistema desde el principio en lugar de elegir patrones después del hecho.

Si deseas llevar tus proyectos de diseño UX/UI al siguiente nivel, no tienes que hacerlo solo. En Virket Agency contamos con un equipo especializado en diseño de interfaces que puede ayudarte a alcanzar tus objetivos. Agenda una auditoría y ofrece a tus usuarios la mejor experiencia en tu sitio web.