Sistema de Diseño y Diseño Atómico en Interfaces

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:

• Los patrones funcionales.
• Los patrones perceptivos.

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.