El concepto de Atomic Design se emplea por primera vez en el año 2013, de la mano de Brad Frost, autor del libro Atomic Design. Este sistema de trabajo basa su funcionamiento en la creación de elementos modulares sencillos que permiten crear estructuras de información mucho más complejas.
¿Qué es Atomic Design?
Brad Frost apuesta por una perspectiva del diseño que pivote desde elementos particulares hacia proyectos de carácter general. Por lo tanto, en cada flujo de trabajo deben quedar presentes un universo de átomos, moléculas, organismo y sistemas que permiten cubrir con nuestras necesidades.
Atomic Design se utiliza para construir sistemas de diseño efectivos y orientados hacia un sitio web o un destino digital. Para ello, se inspira en los principios de la Teoría General de Sistemas. Esta teoría considera los sistemas vivos como un conjunto de sistemas abiertos.
Los componentes de Atomic Design
Átomos
Los átomos constituyen la identidad básica del sistema Atomic Design. Son los bloques elementales sobre los que se fundamentan estos sistemas. Su principal característica es que no pueden ser divididos en otras unidades.
En un sitio web, los átomos son, por ejemplo, el titular de una página o la imagen principal de un artículo. Son los elementos más simples pero, al mismo tiempo, imprescindibles.
Moléculas
Tras los átomos, llegan las moléculas. Éstas adquieren nuevas funcionalidades y características a partir de la unión de diferentes átomos. En conjunto, se encargan de formar componentes de la interfaz de una web que se caracteriza por su simplicidad. Pero con una estructura algo más compleja que en el caso anterior.
Un menú en una categoría de productos o una tabla son solamente algunos de los elementos que pueden adquirir esta perspectiva. La reutilización de moléculas nos permite eliminar la complejidad de nuestro sitio web. Asegurando una coherencia a nivel tanto gráfico como estructural.
Organismos
Los organismos son conjuntos de moléculas que nos permiten crear elementos mucho más complejos de los alcanzados hasta este momento. Un logotipo o la selección de un idioma son, por ejemplo, algunos de los organismos más habituales.
Los organismos suelen reutilizarse en forma de cabeceras o de footers. No obstante, es importante conocer que existen una gran cantidad de aplicaciones que permiten llevar a cabo su ejecución.
Las plantillas
Las plantillas permiten organizar los organismos, focalizando su utilidad en la estructura del contenido, no en el contenido final de la página. Las plantillas definen las propiedades de todos los componentes que las integran. Es decir, se centran en atributos como el tamaño del texto, la alineación del mismo o el estilo, entre otros muchos elementos.
Su aplicación en el producto digital asume la forma de la Home, la página de Contacto o el Sobre nosotros, entre muchos otros elementos.
Sistema
El sistema se encuentra conformado por un conjunto de organismos. Un conjunto de páginas de un sitio web conforman la web completa, por ejemplo.
Mediante el término de sistema se hace referencia al resultado final de una página web, una aplicación móvil o un software, entre otros productos.
Construir y crear interfaces al detalle
Inspirada en los principios de la química, esta metodología nos permite construir interfaces de manera detallada, perfectamente planificadas. De este modo, se facilita tanto el proceso de actualización como el de ejecución de cualquier proyecto web que se desee llevar a cabo. Una integración de la metodología Atomic Design nos permite, además, optimizar la gestión de sprints entre diseñador, programador y cliente.
El Atomic Design ayuda, además, a definir un sistema que en un futuro podrá asumir nuevas funcionalidades gracias a que los átomos ya estarán creados. Asegurando la máxima escalabilidad para cada proyecto que llevemos a cabo.