En este post hablaremos de manera muy resumida sobre el diseño atómico como metodología para el desarrollo de proyectos de UX /UI
Para quién solo hace UX es también bueno saber que metodologías existen para el desarrollo de interfaces.
El uso de un sistema de diseño atómico ayuda a reducir considerablemente los tiempos de desarrollo ya que nos ayuda a llegar una organización de todos los elementos que debemos construir para crear una función especifica a general.
Atomic design o diseño atómico es una metodología creada por Brad Frost que consiste en dividir los componentes de una interfaz a su mínima expresión.
Si quieres saber más en este enlace puedes acceder a la metodología "Diseño atómico" (Enlace con contenido en ingles)
Todos sistema de diseño o design system debería tener implementado el diseño atómico.
Explicado de una manera muy sencilla cada pequeño elemento de una página web como por ejemplo un link es un átomo, este link + una caja donde poner un texto forman una molécula "caja suscríbete", esta y otras moléculas (caja suscríbete + Texto e imagen) forman un organismo (sección suscripción) y dos o más organismos (sección suscripción + mensaje bienvenida) forman una página que es en definitiva la interfaz.
Son 5 módulos cada uno explicado de una manera rápida y sencilla
Los átomos son los pequeño segmentos que contiene la aplicación.
Son pequeños elementos como tipografía, botones, iconos, colores, etiquetas, etc.
Son grupos de átomos unidos entre sí que logran una funcionalidad estando unidos. Una vez agrupados proporcionan significado y funcionalidad.
Por ejemplo puede ser un search de un navegador o el siguiente ejemplo una caja para la suscripción a un newsletter.
Estos elementos se pueden combinar entre sí, por ejemplo el botón puede tener un color basado en la guía de estilos y así ser más complejos.
Son grupos de moléculas, átomos y u otro organismo que forman secciones de una interfaz.
En una sección podemos tener varias moléculas juntas para formar un organismo.
En este caso podemos ver que la molécula menu superior (menu + logo) se une con la molécula búsqueda (texto + search)
La plantilla consiste en grupos de organismos unidos con la finalidad de formar páginas, aquí es donde podemos apreciar cómo el diseño se une y se crea la acción.
Es necesario puntualizar que las plantillas no necesariamente deben llevar el contenido definitivo, en algunos casos podemos utilizar imágenes y textos de relleno solo como prototipo.
Es en definitiva la implementación en nuestra plantilla del contenido real. Son el más alto nivel de fidelidad. Aquí es donde podemos ver la efectividad de nuestro sistema. Las páginas son plantillas con activos finales, videos, fotografías definitivas, lo que permite idear, revisar y comprobar que el sistema funciona correctamente.
La metodología del diseño atómico es muy funcional y práctica para todo el equipo de diseño y desarrollo que trabajen juntos en la creación de un proyecto ya que se estandariza y ordena considerablemente los elementos de una interfaz.
Este sistema tiene la capacidad de ser iterativo y podemos ir introduciendo mejoras a pequeña escala sin romper nuestro esquema principal.
Mi recomendación es que utilices algún sistema de diseño y aprendas a ver cómo están construidos. Ya sabiendo utilizar un sistema de diseño podemos ir creando nuestros propios elementos y así utilizar esta metodología para hacer nuestras propios componentes ajustados a las necesidades de cada proyecto.
Este post tiene la finalidad de ser un pequeño resumen sobre esta metodología y no significa que sea la documentación necesaria para poder empezar a diseñar con este sistema.
