En los primeros días de la Web, los productos y las aplicaciones se veían simplemente como una colección de páginas individuales, cada una con su propio objetivo y conjunto de componentes adecuados. Casi todas las pantallas tenían elementos únicos que hacían que el diseño fuera inconsistente y poco intuitivo.
Por eso se introdujeron los sistemas de diseño..
Hace unos meses escribí sobre la importancia de los sistemas de diseño. En pocas palabras, un sistema de diseño es una colección de componentes reutilizables que se pueden construir juntos para crear cualquier producto digital.
Hay muchas maneras diferentes de abordar la creación de un sistema de diseño. El diseño atómico es una de las metodologías para organizar un sistema de diseño que ayuda a hacer la vida de los diseñadores y desarrolladores más fácil y sus flujos de trabajo mucho más eficientes.
Brad Frost introdujo esta metodología modular para crear bibliotecas de patrones simples y fáciles de mantener mediante la construcción de componentes más grandes y complejos a partir de otros más pequeños y simples.
La metodología de diseño atómico tiene cinco etapas, cada una de las cuales es importante en la jerarquía de cualquier sistema de diseño:
átomosMoléculasOrganismosPlantillaspaginas
Etapas del sistema de diseño atómico
Los átomos representan los elementos de interfaz más básicos. Son la base y la estructura de soporte de una interfaz. Algunos ejemplos: botones, íconos, estilos de texto, paleta de colores, etc. Considérelos como piezas de Lego, no hay forma de descomponer más los átomos.
Las moléculas son grupos de átomos unidos entre sí que tienen sus propias características únicas. Realizan funciones relativamente simples juntas como una sola. Vea el ejemplo a continuación, es un grupo de átomos: una etiqueta de formulario, un campo de entrada de búsqueda y un botón.
Los organismos son componentes relativamente más complicados, compuestos de grupos de moléculas y átomos. Estos organismos pueden funcionar por sí solos, formando secciones distintas de una interfaz. Algunos ejemplos son navegación, pie de página, barras laterales, formularios, etc.
A continuación se muestra un campo de búsqueda (una molécula) dentro de la navegación de un sitio web (organismo).
Las plantillas son el siguiente nivel del diseño atómico; podemos pensar en ellas como páginas en blanco que expresan la estructura de contenido del diseño. Son estructuras alámbricas.
El objetivo es establecer los vínculos entre los organismos y otros componentes disponiéndolos en la página en un orden determinado, pero sin utilizar estilos ni datos.
Ahora podemos agregar la navegación (organismo) de nuestro ejemplo anterior a nuestra plantilla de página de inicio.
Aquí es cuando tomamos esos wireframes y los desarrollamos. Es hora de agregar todos los detalles finales. Las plantillas se eliminan gradualmente para dar paso a páginas reales con las que las personas pueden interactuar.
Tenemos varios factores a tener en cuenta:
Todos los elementos de marcador de posición deben dejar paso a contenido real, texto e imágenes reales. Las páginas también son el lugar donde la mayoría de los clientes y partes interesadas internas revisarán el diseño, ya que se puede ver todo en un solo lugar. Una vez que todo esté en su lugar, el diseño El equipo debe realizar pruebas de usuario para ver si los organismos y sus moléculas asociadas funcionaron como se esperaba.
Atomic Design nos brinda información valiosa y nos ayuda a crear un sistema de diseño más efectivo. Entonces, ¿cuáles son sus principales ventajas?
Consistencia en su diseño — Al aplicar los principios del diseño atómico, todos los átomos y moléculas deben crearse antes de construir el sitio. Esto permitirá la coherencia en su sitio web o producto.Menos componentes en su sistema de diseño — Cuando se trata de bloques de construcción, el diseño atómico es muy mesurado y calculado. Como resultado, tendrá menos componentes al final del proyecto.Las secciones de una página web son más fáciles de eliminar o cambiar: Cualquier modificación a un componente se actualizará automáticamente en todo el sitio.Genial para desarrolladores — Ya que facilita la codificación, evitando confusiones al crear su producto.
Este concepto puede sonar confuso al principio e incluso puede que te recuerde a aquella clase de química en el instituto. Sin embargo, una vez que haya comprendido los fundamentos, descubrirá que este método es realmente beneficioso, no sólo para su equipo sino también para los clientes.
Ya sea que esté diseñando un sitio web nuevo o rediseñando uno existente, trabajar con esta metodología en mente hará que su producto sea adaptable y fácil de administrar.