Si no ves el video, puedes refrescar el navegador, presionando (Ctrl+Shift+R | Ctrl+F5 o Shift+F5), o abrirlo directamente desde el Canal de Youtube... HAZ CLIC AQUI
En el desarrollo de páginas web, existen múltiples escenarios y posibilidades, que nos permiten especializarnos en determinadas herramientas o procedimientos, de acuerdo con nuestras destrezas y/o formación. De ahí que, es cada vez más habitual, encontrar algunos profesionales, que aunque inicialmente se habían formado o especializado en el Diseño Gráfico, hayan decidido experimentar o reinventarse, dedicándose a la maquetación web o Diseño Frontend, como se conoce hoy en día.
Uno de los problemas más frecuentes, al inicio de esta nueva experiencia, es la rapidez con la que puede cambiar, todo lo relacionado con la apariencia y funcionalidades de la web, ya que intervienen factores como la experiencia de usuiaro (UX), la velocidad de respuesta de la web al conectarse al servidor, o la posilidad de adaptarse a múltiples dispositivos.
De ahí que resulte casi imposible, mantenerse al día en una herramienta específica o procedimiento, pensado para facilitar o mejorar el diseño Frontend, ya que constantemente se efectúan cambios y mejoras, que nos pueden crear una sensación de frustración, a pesar de que hayan pasado a penas, un par de años desde que aprendimos, por ejemplo, un framework como angular, react, vue.js, next, nuxt o cualquier otro.
Por suerte, hace ya varios años, a un señor de nombre Brad Frost, se le ocurrió una idea revolucionaria, que todavía se aplica a día de hoy, y que nos facilitará mantener el ritmo de evolución, acorde con cualquier herramienta o procedimiento relacionado con la maquetación o Frontend. Se trata de la metodología llamada Diseño Atómico o Atomic Design, cuyo propósito fundamental es, según sus propias palabras:
"Atomic Design detalla todo lo que se necesita para crear y mantener sistemas de diseño sólidos, lo que le permite implementar interfaces de usuario más consistentes y de mayor calidad más rápido que nunca. "
¿Qué es el Diseño Atómico?
En resumen, el objetivo de esta metodología es establecer una jerarquía, que nos permita analizar y dividir, nuestros proyectos web, en varios elementos y/o estructuras, comenzando por el más sencillo, al que llamaremos átomo, ejemplo un icono, hasta ir al más complejo que sería la unión de todos en un Sistema, ejemplo una página completa.
La siguiente imagen muestra de forma más gráfica el conjunto de fases, o elementos que forman esta metodología:
Nuestro proyecto web es un proyecto de piezas Lego
Todos conocemos el famoso juego para niños, conocido como Lego, formado por varias piezas que permiten crear, prácticamente toda clase de estructuras complejas, a partir de la unión de éstas. Si comparamos el juego con un proyecto web en este caso, podríamos entender, más fácilmente, de qué se trata esta metodología y lo mucho que puede aportarnos ante cualquier reto de desarrollo.
A continuación te cuento en qué consiste cada una de las "Piezas" con las que deberíamos trabajar a partir de ahora, para sacar el mayor provecho de este nuevo enfoque.
Recuerda que esto es sólo una guía, para simplificar la categorización de tu proyecto, no obstante, puedes añadir tanto como necesites de acuerdo a tus propias necesidades de análisis y estructura.
Atomo
Son aquellos elementos más pequeños o con una jerarquía menor. Un átomo es aquel elemento que por sí mismo no significa nada y necesitará ser acompañado por otros átomos para tener sentido. Un ejemplo de un átomo podría ser un título, un texto, un área, un icono, una línea. El átomo debe ser nombrado, definido y acotado con márgenes para conocer cómo se comporta al ser juntado con otros átomos y no crear una lucha entre ellos.
Moléculas
Cuando dos o más átomos se juntan, crean moléculas. Las moléculas es el mínimo elemento que empieza a poder ser usado de manera aislada. Una molécula ofrece información suficiente como para guiar una acción dentro de la interfaz. Se debe evitar sobrecargar la molécula de átomos. Éstas son secciones en nuestra interfaz una cabecera, un footer, un post, etcétera. Como ocurre con los átomos, la molécula debe ser definida y acotada de nuevo para poder saber como se comporta en convivencia con sus semejantes.
Organismos
Formados por dos o mas moléculas, los organismos forman una sección o parte de nuestro producto. Los organismos ofrecen una experiencia completa al usuario. En productos digitales sencillos como una web, organismos serían todas aquellas páginas (home, contact, about, etc.) que la forman.
Sistema
El sistema, por lo tanto, sería el todo. La web, aplicación, software o cualquier producto digital que estemos construyendo.
Aplicado a un entorno web, en la siguiente imagen podrás ver la diferencia entre átomo y molécula, en el caso de un carrusel de imágenes, que a su vez, forma parte de un organismo mayor, que sería la página Home o principal del proyecto.
El diseño atómico es una metodología compuesta por cinco etapas distintas que trabajan juntas para crear sistemas de diseño de interfaces de una manera más deliberada y jerárquica. Las cinco etapas del diseño atómico son:
- Átomos
- Moléculas
- Organismos
- Plantillas
- Paginas
El diseño atómico no es un proceso lineal , sino un modelo mental que nos ayuda a pensar en nuestras interfaces de usuario como un todo cohesivo y una colección de partes al mismo tiempo . Cada una de las cinco etapas juega un papel clave en la jerarquía de nuestros sistemas de diseño de interfaces. Vamos a sumergirnos en cada etapa con un poco más de detalle.
Si a partir de ahora, en cada nuevo proyecto o renovación de algún proyecto existene, aplicamos y manteneos este tipo de organización de elementos en nuestro trabajo de diseño, ahorraremos esfuerzo y malentendidos entre nuestro diseño y el departamento de programación. Además, facilitará su trabajo, haciendo que puedan visualizar y traducir el diseño a código de una manera más directa.
Si quieres aprende más sobre el Diseño Atómico visita la Web Oficial de su creador