Sistema de Diseño y Diseño Atómico en Interfaces
Contenido del curso
El diseño de las interfaces en un producto, como hemos conocido en clases anteriores, es la creación de lo que se percibe por los sentidos por parte de las personas.
Cuando trabajamos en el diseño de la interfaz una buena práctica es el desarrollo de los Design System o Sistemas de Diseño, ya que ayudan a agilizar el proceso de diseño del producto y hacen que sea más transparente y predecible.
El sistema de diseño podríamos compararlo con una librería donde se guarda la colección de componentes reutilizables para crear un producto y se complementará con la esencia del producto y su filosofía.
Vamos a ver ahora el concepto de sistema de diseño:
Sistema de diseño
Un sistema de diseño consiste en una serie de elementos y patrones de diseño, que son utilizados como reglas o decisiones de negocio que rigen la composición de un producto.
Sirven para involucrar a todas las personas del equipo en el proyecto y permitirles consultar toda la documentación creada, de forma que el trabajo sea más eficiente y fluido. Los sistemas de diseño son evolutivos, por lo que pueden adaptarse continuamente a nuevos sistemas que van apareciendo.
Para crear un sistema de diseño es necesario establecer unos principios que deben cumplir todas las decisiones que se tomen para evitar cometer errores o generar conflictos. Algunos de estos principios pueden ser la accesibilidad, consistencia o reusabilidad. Además, todos estos principios deben ser compatibles entre sí.
Patrón
Los patrones de diseño son las soluciones recurrentes que resuelven problemas de diseño comunes. Son los modelos que se toman como puntos de referencia estándar para crear, medir o valorar algo. Los patrones de diseño proporcionan un lenguaje común entre los diseñadores.
Existen dos tipos de patrones en diseño:
Componentes
Los componentes son cada uno de los elementos y herramientas utilizadas en un diseño para que la persona usuaria logre cumplir sus objetivos. Todos los componentes deben responder de alguna manera a las acciones que realicen las personas, de forma que se establezca una comunicación y reciban información de que todo funciona correctamente.
Librería de componentes de un sistema de diseño
Siendo los componentes cada una de las partes que nos van a ayudar a realizar el proyecto, es conveniente tenerlos recogidos en una librería de componentes, para poder trabajar con ellos de forma ágil. En la librería, los componentes se encuentran ya desarrollados y listos a nivel front-end para que las decisiones de diseño se puedan implementar rápidamente.
Esta sistematización de los componentes nos ayudará a centrarnos en el problema a resolver, en vez de enfocarnos en el diseño de cada componente. No hace falta tener una gran librería de componentes de diseño, podemos tener solo los que más utilizamos.
La creación de los patrones y componentes de diseño está muy relacionada con el diseño atómico, ya que establece una metodología a seguir cuando diseñamos los elementos que componen el Sistema de Diseño. A continuación vamos a conocer qué es el diseño atómico:
Diseño atómico
El paradigma del diseño atómico es un modelo ideado por Brad Frost para crear los elementos que componen un Sistema de Diseño y está basado en la química. Se trata de una nomenclatura que se utiliza para reducir la complejidad de los sistemas de diseño de interfaces y para definir jerarquías en los elementos. Esto ayuda a generar una mayor limpieza en la organización de los elementos utilizados en las interfaces, siendo útil tanto para las complejas como las más simples.
Con este modelo se consigue una mayor consistencia y estabilidad del sistema de diseño, lo que se traducirá en un código más consistente. Además, se alcanza una mayor velocidad de trabajo y una resolución de problemas de forma más efectiva.
Elementos
El diseño atómico está compuesto por elementos organizados en la siguiente jerarquía, siendo de menor a mayor: átomos, moléculas, organismos y sistemas. Se pueden añadir más niveles jerárquicos si fuera necesario.
Átomos
Son los elementos básicos de la construcción de una interfaz. Su característica principal es que carecen de sentido por sí mismos, por lo que necesitarán ser acompañados por otros átomos para tener un sentido.
Los átomos pueden ser: títulos, textos, colores, tipografías, espaciados, labels, inputs o botones, entre otros.
El átomo debe ser nombrado, definido y acotado con márgenes para conocer cómo se comporta al ser juntado con otros átomos y que no se cree un conflicto entre ellos.
Moléculas
Se obtienen juntando varios átomos diferentes, por lo que son el siguiente elemento en la jerarquía. Las moléculas se pueden utilizar de forma independiente y aislada, ya que aportan suficiente información como para guiar una acción dentro de la interfaz.
Deben ser definidas y acotadas para conocer cómo se comporta en convivencia con otras moléculas, de la misma manera que ocurre con los átomos.
Las moléculas pueden ser por ejemplo una cabecera, footer o post. Otro ejemplo de molécula puede ser un campo de recogida de datos, que estaría formado por una combinación entre un label y un input.
En este caso, se han juntado un Label y un Input para formar esta molécula que será un campo de recogida de datos.
Organismos
Se obtienen juntando moléculas diferentes y forman una sección o parte de nuestro producto. Los organismos consiguen ofrecer una experiencia completa al usuario.
Pueden ser las páginas de home, contact o about que forman una web. Otro ejemplo de organismo es un formulario, que se crearía por la combinación de campos de recogida y botones.
En este ejemplo podemos ver lo que podría ser un formulario, formado por diferentes Inputs y Labels:
Sistemas
Con varios organismos podremos formar sistemas que son los apartados esquematizados dentro de una página. Los sistemas pueden ser: la web, aplicación, software o producto digital que estemos construyendo.
En este ejemplo podemos ver diferentes organismos que forman esta página, como son la navegación, la cabecera o las cards de producto:
CONCLUSIÓN:
En esta clase hemos visto dos conceptos fundamentales para el diseño de interfaces, el primero de ellos es Sistema de diseño, que son una serie de elementos y patrones de diseño, que son utilizados como reglas o decisiones de negocio que rigen la composición de un producto. Los sistemas de diseño son una buena práctica de diseño, ya que ayudan a agilizar el proceso de trabajo.
Por otro lado hemos conocido el paradigma del diseño atómico, que es un modelo de trabajo para crear los elementos que componen un Sistema de Diseño y está basado en una nomenclatura que se utiliza para definir las jerarquías de los elementos. Estos elementos pueden ser átomos, moléculas, organismos y sistemas.
RETO:
Selecciona un producto digital de tu preferencia e identifica la jerarquía que tiene cada uno de los componentes del diseño, indicando si es un átomo, una molécula, un organismo o un sistema. Comparte tu ejemplo con la comunidad de Platzi.
Alejandra Sarahí Monroy Vélazquez
Luis David Lopera
Daniela Alvarez
Vanessa Marulanda Ballesteros
Daniela Alvarez
Pedro Isaac Aguilar
Laura Alzate
Daniel Steven Carrera Osorno
Nathaly Milena Zelaya Caballero
Francisco Xavier Nuñez Garcia
Marcos Alejandro
Lizeth De La Espriella
Camila Ossa
Yurif Francia Coronado Calderon
Juan Diego Paredes Hoyos
José D. Arroyo B.
Marielvis Oliveros
Julian Monroy
Walkiria Arteaga
Tania Viviana Espitia Rodriguez
Nidia Liz Alvarez
Jimena Haran
Iván Villegas
En este ejemplo tome la pagina de inicio de Canva, en este caso solo me centre en el aside de la pagina, debido a que considero representa muy bien la jerarquía en un sistema de diseño. Marque los átomos de color amarillo, que vendrían siendo los iconos, y también los textos o etiquetas, las moléculas de color naranja vendrían siendo la conjunción de un icono con su etiqueta o texto, un organismo seria el aside completo que es la conjunción de varias moléculas y por ultimo el sistema entero seria toda la pagina.
Gracias por el aporte❤, un consejito ten en cuenta el contraste para que se diferencie mejor 👌
Holaaa, yo quiero saber en dónde puede organizar la información así, gracias.
Hola @vanessama Esta imagen la organicé en Illustrator a partir de la captura de pantalla inicial. Para simular que las imágenes flotaban en el comentario, usé el color del fondo igual al de la interfaz de platzi.
Ejemplo, el sitio web de Susuerte, otra forma de ver cómo se jerarquizan los elementos:
Átomos: Íconos y texto - círculos verdes en opacidad.
Moléculas: En este caso el conjunto de varios íconos y textos que tienen una intención - rectángulo violeta.
Organismo: Página home del sitio web, rectángulo rojo.
Sistema: Todo el sitio web de Susuerte.
🧩 Ejemplo de diseño atómico – App Cuenta DNI
🔹 Átomos
🔹 Moléculas
🔹 Organismos
🔹 Template
🔹 Page
✅ El diseño atómico permite coherencia, reuso de componentes y mantenimiento eficiente en una app con alto uso como Cuenta DNI.
Voy a seleccionar Spotify como producto digita
Suelo dejar en el sistema de diseño como el "guideline" del proyecto, deifnido los colores, textos, tamaaños, efectos, recursos gráficos y demás, todo esto organizado en estilos desde figma.
Por aparte trabajo lo iconos, se deja identificado el estilo de los iconos, pero hay proyectos que son tan grandes que prefiero darles una sección específica para ir organizandolos y usarlos según las necesidades.
En adelante dejo la sección de componentes, específicamente para la creación de las moléculas y los organismos, y se dejan listos para usarse como templates.
Mi ejemplo sería la web de Turismo City:
Los átomos considero son los botones por separado como el de vuelo Las moléculas, el conjunto de botones que te hace saber que es una web para buscar vuelos, hoteles, servicios turísticos El organismo, el buscador de vuelos con los botones de origen - destino y fecha EL sistema, la web en general.
Yo eleigí Airbnb porque desde el Home se aprecio sus sistema de diseño y los componentes creados del mismo.
Yo lo entendí así, si es posible que se me corrija seria perfecto:
Holaa, dejo mi análisis por aquí por si quieren compartir algúnc omentario.
Ejemplo de Netflix
Dejo mi aporte, elegí Netflix (Bueno molécula en este caso sería el cuadrado de una película)
El producto digital que elegí fue Waze. El sistema es la app como tal.
