Atomic Design: metodología para crear sistemas de diseño
Por Pamela Treviño, Sr Design director en iCrossing Latam.
Seguramente has escuchado hablar del término Atomic Design ya que ha ganado popularidad, y a pesar de que hemos visto este concepto expandirse y difundirse rápidamente en el mundo del marketing, la información y el uso de esta metodología ha quedado asignada al desarrollo de sitios web, cuando la realidad es que sus ventajas son imprescindibles como parte central en el desarrollo de proyectos de estrategia integral de marca.
Atomic Design es una metodología que consiste en identificar los elementos más pequeños e indivisibles de una interfaz para poder combinarlos y crear nuevos elementos más complejos y con diferentes funcionalidades, lo que da pie a la creación de un sistema de diseño. Brad Frost, su creador, divide el diseño atómico en cinco niveles diferentes:
Átomos:
Es la estructura más pequeña e indivisible de un sistema de diseño, por ejemplo: iconos, estilos de texto, paleta de colores, campos de texto, avatares, etiquetas.
Moléculas:
Están formadas por dos o más átomos y crean un elemento más complejo, por ejemplo, el campo de texto con su etiqueta, un botón formado por un icono y un texto, el conjunto de un avatar con la información de la persona.
Organismos:
Es la unión de dos o más moléculas, lo que resulta en elementos con un mayor nivel de complejidad que las moléculas, por ejemplo, un listado de usuarios (dos o más avatares con su información), un formulario (varios campos de texto con su etiqueta y un botón de enviar), un menú de navegación (dos o más botones iconográficos con el CTA correspondiente).
Plantillas:
Es lo que conocemos como wireframes o templates. Es el uso y combinación de varios organismos que forman una sección en un sitio web o aplicación, o el esqueleto de un template.
Páginas:
Es el último nivel de esta metodología y se logra aplicando el User Interface (UI) a las plantillas, es decir, es el diseño final.
¿Pero cómo podemos entender esto de forma más sencilla?
Podemos comparar esta metodología con los legos, en donde tienes muchas piezas individuales, que, al combinarlas con otras formas y colores, crean una figura nueva y más compleja.
Algunas de las ventajas de implementar Atomic Design:
1. Disminución en tiempo de desarrollo de proyectos:
Crear un sistema de diseño usando la metodología de Atomic Design permite automatizar y escalar los elementos de un producto o servicio digital más rápidamente, lo que resultará en una notable disminución de tiempo al momento de hacer actualizaciones y/o implementar los brand guidelines a las plantillas.
2. Consistencia en elementos de marca
Otra ventaja destacable es la efectividad con la que cada uno de los elementos del producto o servicio digital se pueden adaptar tanto a diferentes dispositivos como canales digitales manteniendo el look and feel de la marca intacto, lo que facilita que los consumidores puedan identificar y reconocer la marca a través de distintos medios.
3. Reducción de costos:
La disminución del tiempo en relación a la implementación de la imagen de marca en el producto o servicio digital, así como en la efectiva implementación a diferentes canales digitales, se traduce en una notable reducción de costos.
4. Metodología future-friendly:
Una de las principales metas de construir sistemas de diseño usando Atomic Design es anticiparse al futuro tanto de las marcas como de las necesidades de los usuarios. Al establecer estructuras claras y organizadas en las bases del mismo, podemos crear elementos adaptables y fácilmente modificables que nos permitan movernos a la par de la evolución digital.
De igual manera, es importante mencionar que pasar de la lectura a la práctica implica un gran paso y en este tránsito pueden surgir mitos y tabúes respecto al tema. El más temido es que la creatividad se pierde, cuando en realidad, solo cambia de forma; se concentra en crear proyectos escalables, automatizados y en otorgar soluciones enfocadas en el usuario final.
Ventajas de usar Atomic Design para tu marca
La implementación de Atomic Design es pensar en el futuro, es crear soluciones preventivas en vez de reactivas, es considerar todos los escenarios posibles para lograr los mejores resultados, es trabajar de dentro hacia afuera y reconocer que el proceso interno al desarrollar un proyecto es un gran porcentaje del éxito del mismo.
