¿Qué es Atomic Design?
Atomic Design es un modo de diseñar aplicaciones y sitios web, comenzando desde lo más particular para poder cambiar de forma flexible y rápida en lo general, manteniendo la consistencia a lo largo de todo el sistema. En cierto modo, trabaja de forma parecida a frameworks como bootstrap o knockout, pero en vez de utilizar uno estándar que se adaptará mejor o peor a nuestras necesidades, nos da un marco de trabajo para crear el nuestro propio.
Origen de los componentes Web
El concepto de componente no es algo reciente, ya surgió hace unos años y los principales navegadores comenzaron a discutir acerca de ello a finales de los 90. El problema de siempre es que los navegadores han implementado sus funcionalidades de una forma totalmente distinta, hasta que poco a poco los estándares han ido moldeando estos problemas llegando hoy en día a un estándar del concepto de componente: Web Components (https://www.webcomponents.org)
Atomic Web Design
El concepto de Atomic Web Design nace de un artículo de Brad Frost (lectura muy recomendada), en el que explica el diseño de una interfaz web descomponiendo en unidades más pequeñas, como él denomina átomos, y reutilizando estos componentes a través de la composición para generar elementos más grandes y potentes que compongan todo el diseño.
En su propuesta Brad habla de 5 grados de componentes: Átomos, Moléculas, Organismos, Templates y Páginas. Brad Forst defiende que no se deben diseñar páginas, si no sistemas de componentes. Os dejo una charla donde Brad profundiza en estos puntos:
Si usas Angular, React o Vue, ¿no te suena este concepto? Componentes reutilizables con su propio estado y propiedades heredadas que trabajando en conjunto conforman una aplicación. Si durante todo el desarrollo de una aplicación tenemos este pensamiento: ¿Por qué no comenzar la componentización desde el comienzo del diseño web?
Brad defiende crear una guía de estilos usando Pattern Lab, una herramienta construida para ello. Un ejemplo donde se puede ver todos los pasos de estos componentes es: http://demo.patternlab.io/ donde se definen los elementos básicos de la marca: colores, fuentes tipo gráficas, inputs, iconos, animaciones hasta generar moléculas y organismos que componen la distintas composiciones del diseño generando páginas.
¿Qué ventajas obtenemos con la componentización?
El empleo de componentes aporta una serie de características muy potentes uses en el ámbito que los uses:
- Autocontenidos y encapsulados.
- Independientes.
- Reutilizables.
- Faciles de Testear.
- Facilitan el principio de Única responsabilidad.
Átomos
Los átomos son la unidad básica en el Atomic Design, y son las mínimas unidades indivisibles que tienen sentido por sí mismas. Ejemplo de estos serían la tipografía, el color, los botones, imágenes, tablas, campos de formulario y hablando a nivel de código entrarían las etiquetas html de img, p, headings, button, input y table.
Tener todos estos pequeños átomos nos permite tener un sistema que nos de una visión global del aspecto gráfico del mismo, además facilita el trabajo en niveles más complejos y funcionan como referentes para después construir nuevos componentes.
Moléculas
Como en química, las moléculas son las agrupaciones de átomos que al estar unidos adquieren nuevas características y significados y que funcionan como una unidad.Hablando a nivel de diseño web corresponderían a un menú de navegación, una tabla o una caja de búsqueda.
Con las moléculas nos aseguramos que existe una coherencia gráfica, estructural y conceptual en todos lo componentes que construyamos de nuestra web. Además esto implica que debemos construir elementos pensados para ser reutilizados en diferentes contextos.
Organismos
Es el conjunto de moléculas y átomos, unidos para crear una sección más compleja de la interfaz. Algunos ejemplos son las cabeceras (logo + menú + buscador) o las parrillas de productos (misma ficha para presentar diferente información repetida con un nombre, descripción, precio, foto…).
Es posible que nuestros clientes no estén interesados en lo que ven por ahora, pero a partir de aquí la interfaz comienza a cobrar sentido.
Plantillas
Estas consisten en grupos de organismos colocados de manera conjunta para formar páginas. En este momento comenzamos a ver la coherencia del contenido y el diseño,junto a temas de estructura como la retícula. La función principal de estas plantillas es dar contexto a las pequeñas unidades, jerarquizarlos, dar orden a la lectura y disponer los contenidos. En definitiva comenzar a crear lo que conocemos como wireframes
Páginas
Estas reemplazan a las estructuras o contenidos simulados con contenidos reales para dotar de significado y carácter el producto final. Son los sujetos con mayor nivel de fidelidad.
Estas también permiten simular los diferentes estados de un mismo contenido como titulares más largos o más cortos, o carritos de la compra con 1 elemento o con 20. Representan el paso de prueba y control de calidad del sistema y de su efectividad y permiten ajustar deficiencias en los componentes anteriores para mejorar el conjunto total.
Una vez visto y entendidas todas las partes que componen Atomic Design y cómo funciona, podemos resumir sus principales características en:
Escalabilidad: Se adapta a cualquier dispositivo.
Actualizable: És más fácil realizar una actualización a nivel de diseño.
Mantenimiento: Hacer un pequeño cambio es muy sencillo.
Reutilizable y re-aprovechable: Cada pequeño elemento es creado para adaptarse a diferentes contextos.
