Por Elaine Bustos, Diseñadora UX/UI de Landscape
Como diseñadores y diseñadoras, muchas veces nos vemos enfrentados a diversas tareas y actividades que necesitan ser llevadas a cabo de forma ordenada y jerarquizada, con el fin de plasmar de forma efectiva nuestras ideas. En esa misma línea, cuando debemos generar el Sistema de Diseño de algún producto digital, una de las metodologías más utilizadas actualmente es el: Atomic Design (Diseño Atómico).
Pero ¿Qué es el Diseño Atómico? La metodología de diseño atómico creada por Brad Frost (diseñador web, orador, escritor y consultor), es utilizada para crear sistemas de diseño completos con un orden y una jerarquía específicas, usando términos químicos básicos, que probablemente recordemos desde la época escolar. Uno de los principios, es que toda la materia está formada por pequeñas partículas llamadas átomos, los cuales en su conjunto forman moléculas, que se unen para formar organismos, que a su vez crean un sistema.
Ahora, estos principios aplicados en nuestra área, indican que el diseño tiene la capacidad de descomponerse en interfaces, y cada uno de sus componentes, son parte de un sistema de diseño que va conectado entre sí. Por lo cual, se entiende que los niveles del Atomic Design, según Brad Frost, son:
1.Átomos: Estos son los elementos mínimos que se necesitan para integrar todos los componentes. Estos consisten en: íconos, tipografía, sombras y espaciados, colores de manera independiente, etc.
2.Moléculas: Con esto se refiere a la mezcla y unión de los átomos, definiendo un orden determinado.
3.Organismos: Esto se puede definir como la unión de todos los átomos, lo cual surge de la jerarquización de los elementos con un orden específico. Esto incluye botones, campos de entrada, switch, etc. Se arman tarjetas que contienen todos estos elementos con algún botón de llamada a la acción y elementos de imagen que acompañan y refuerzan la idea.
4.Templates: Este elemento reúne varias moléculas iguales por repetición. El encabezado, la barra de menú, las cuadrículas de datos, etc., son los organismos definidos en la mayoría de los sistemas de diseño con los que cualquier usuario interactúa en un producto digital. Luego de definir los componentes, se especifica el diseño estructural de la interfaz. Las plantillas/grillas en los sistemas de diseño ayudan a definir un diseño de página estándar, donde se organizan los átomos, moléculas y organismos del producto que en definitiva verá el usuario.
5.Páginas: Las páginas son lo que sus usuarios verán en el producto terminado. Estas pueden variar según los elementos que contengan y la información que tenga, dependiendo de la funcionalidad de la página/vista en específico. Las páginas también pueden tener algunos organismos ocultos o faltantes, pero la estructura general de la página sigue siendo la misma. Definir páginas es uno de los pasos más importantes, ya que estas reflejan qué tan sólido y consistente es nuestro sistema de diseño.
Estos elementos recién descritos se pueden visualizar de la siguiente forma:
Ahora, ¿quieres probar nuevas técnicas de diseño en tu compañía? ¿Crees que las nuevas estrategias podrían hacer brillar aún más tus plataformas y tu imagen? Si es así, definitivamente te podemos ayudar. Solo tienes que escribirnos a contacto@landscape.cl y comenzamos a trabajar en potenciar tu diseño con las más innovadoras y efectivas tendencias.
