Como os prometimos en el post “¿Qué son los sistemas de diseño?” hoy os traemos los principios básicos para aprender un poco más sobre los Atomic Design, una herramienta muy potente para crear sistemas de diseño en tus proyectos.
Pero empecemos por el principio, ¿qué es Atomic Design?
Atomic Design es una metodología ideada por Brad Frost que tiene como objetivo principal crear un Design System de forma eficiente para agilizar el proceso de diseño, del desarrollo de los productos digitales y acabar con las inconsistencias de los diseños.
Se trata de una metodología compuesta por cinco niveles que unidas crean interfaces y sistemas (átomos, moléculas, organismos, templates y páginas).
El objetivo es crear una librería de pequeños elementos reutilizables y combinables entre ellos para tener un sistema de diseño rápido, uniforme, modular y escalable.
Átomos
Los átomos son elementos que no pueden desglosarse en otros sin dejar de ser funcionales, son las piezas más pequeñas que podemos encontrar. Por ejemplo; un texto, un radiobutton, un check, un icono.
Moléculas
Las ‘moléculas’ están compuestas de dos o más átomos, son elementos relativamente sencillos. Por ejemplo; un botón que está compuesto de un texto, un buscador compuesto por una etiqueta o un icono, un campo de entrada y un botón.
Organismos
Los organismos son componentes UI más complejos, formados por grupos de moléculas y átomos. Estos forman distintas secciones de una interfaz. Podría ser un header, compuesto por un logo, un menú y un buscador, o una tabla con filtros y selectores.
Templates
Las plantillas son estructuras compuestas de componentes basados en átomos, moléculas y organismos, de forma que su distribución hacen una estructura general de contenido. Se centran más en la estructura de la página que en el contenido final.
Pages
Las páginas son instancias específicas de un template. Muestran cómo sería la UI final con el contenido real. Es la fase más concreta de Atomic Design, ya que es lo que deberían ver los usuarios finales cuando interactúen con el sistema.
Si quieres aprender más sobre esta metodología te recomendamos echarle un vistazo a la web de su creador, Brad Frost, donde podrás encontrar información más detallada sobre el Atomic Design.
Autor: Mar Puig
