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.

A continuación, explicaremos a detalle Atomic Design, también derribaremos algunos de los mitos que lo envuelven y cómo en iCrossing nos valemos de él para transformar las experiencias de nuestros clientes.

Empezaremos por definir Atomic Design para que podamos partir de un punto en común: 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. Si bien, esta es una analogía que aclara la esencia del concepto, la implementación del Atomic Design en productos y servicios digitales va más allá de crear nuevas formas, también produce una serie de ventajas que no podemos dejar pasar.

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.

Atomic design no es un proceso lineal, se requieren iteraciones y trabajo en equipo para lograr resultados efectivos. Es por esta razón que contamos con talento interdisciplinario que nos permite abordar los proyectos no sólo desde la parte creativa, sino también desde la parte estructural, estratégica y de planeación de procesos. Ya que tener bases sólidas nos permite ser efectivos y afrontar los retos desde distintos ángulos para entregar soluciones funcionales y creativas.

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.

En iCrossing nos involucramos en cada uno de los proyectos, desde su concepción hasta el monitoreo constante posterior al lanzamiento. Bajo el objetivo de crear soluciones exitosas, trabajamos siempre de la mano con nuestros clientes, lo cual nos ha permitido generar eficiencias. Para algunos de nuestros clientes hemos logrado obtener hasta un 93% en disminución de costos basado en escalabilidad en proyectos multi-país y multi región, así como disminuido en un 89% el tiempo para desarrollo de proyectos.

¿Estás interesado en obtener más información sobre cómo Atomic Design puede ofrecer resultados de negocio superiores?

Ponte en contacto con nosotros, compártenos tus datos aquí para que te contactemos.