Vamos a ir al grano y vamos a comenzar definiendo el Atomic Design como una metodología utilizada para construir sistemas de diseño orientados al medio web / digital.
Seguramente os habréis quedado un poco igual, bien si tienes unos minutos, algo de curiosidad y recuerdas un poco la química que dabas en la escuela, continúa leyendo y verás cómo todo se ilumina…
Y es que a Brad Frost, el genio que creó todo este sistema, se le ocurrió utilizar el modelo atómico, para transmitir la idea de que tanto en el diseño como en el desarrollo web se debe trabajar desde los elementos particulares hacia los generales.
Así crea todo un universo de átomos, moléculas, organismos, plantillas y páginas que a continuación iremos desgranando.
Á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, las imágenes, los campos de formulario y hablando a nivel de código entrarían las etiquetas html de img, p, headings, button, input…
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 para 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 en la interfaz web. 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, jerarquizarlas, 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 o con 20 elementos. Representan el paso de testeo 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: es 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.
Espero que en este viaje entre lo atómico y lo digital, hayáis podido entender un poco mejor en qué consiste esta metodología; que hayáis podido detectar sus ventajas y que las podáis utilizar en futuros proyectos.
Si aún así no lo acabáis de ver claro, y os habéis quedado con ganas de más, os recomendamos que visitéis la web de Brad Frost en la que desarrolla con más detalle los concepto antes explicados sobre Atomic Design.
Si te ha parecido interesante este artículo, te invitamos a suscribirte a nuestra newsletter y te mantendremos informad@ de todas nuestras publicaciones. Saludos!!
