Lunes 8 Agosto. La clase trato sobre crear nuestro system design desde el átomo hasta la página. La idea es identificar estos elementos y graficarlos.
El Atomic Design es un modelo mental en el que las interfaces de usuario conforman un sistema jerárquico interconectado de componentes. La metodología de diseño atómico se compone de 5 niveles discretos: átomos, moléculas, organismos, plantillas y páginas. Te lo ilustraré con un ejemplo conocido, Instagram:
Átomos
Los átomos son los componentes básicos de toda la materia. Cada elemento tiene propiedades distintas y no se pueden desglosar más sin perder su significado. Estos son los bloques de construcción más pequeños de su proyecto. Legos individuales:
- Estilos de texto
- Botones
- Iconos
- Campos de entrada
- Casillas de verificación
Moléculas
Las moléculas son un grupo de átomos ensamblados para adquirir nuevas propiedades o para completar una función. En los sistemas del diseño atómico, podemos pensar en nuestras moléculas como nuestros bloques de construcción o ‘átomos’ que estamos ensamblando para formar un elemento funcional. Por ejemplo, puede que estemos armando un encabezado de imagen con una etiqueta de título para una molécula de perfil o haciendo algo más complejo, como construir una función de pago usando átomos para formar la molécula.
Organismos
Tanto los átomos como las moléculas son formas funcionales simples en nuestros sistemas de diseño que se pueden reutilizar en un producto. Los organismos son un poco más complejos y forman porciones más grandes de nuestro producto. Podemos pensar en estos organismos de nuestro sistema atómico de diseño como grupos de moléculas. Cuando los átomos forman una molécula para construir una barra de búsqueda, se pueden combinar con otra molécula que forma la navegación de la página para crear un organismo: una navegación de página completa con una función de búsqueda. A su vez, estos se utilizarán como un patrón distinto en un producto.
Plantillas y Páginas
Ahora que hemos cubierto la estructura básica de un sistema de diseño a través de átomos, moléculas y organismos, es hora de ver cómo podemos usarlos para crear un producto consistente. Los organismos se pueden usar para crear diferentes plantillas de diseño más grandes que pueden contener múltiples características. Estas plantillas luego se utilizan para formar la mayoría de los puntos de contacto de un producto.
Elementos Atomo en figma sobre la interfaz de radio.
