Introducción a los sistemas de diseño

Paradigma del diseño atómico

Definición de 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.

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.

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.

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.

• 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.

• 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.

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.

Sistemas de diseño

Definición

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í.

Librería de componentes de un sistema de diseño

Los componentes son cada uno de los elementos y herramientas utilizadas 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.

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.

Cursos

Finalmente, puedes encontrar otros cursos en Platzi para poder ampliar tus conocimientos.

• Entre ellos está el Curso de Sistemas de Diseño, que puedes encontrarlo en este enlace: https://platzi.com/clases/sistemas-diseno/.
• También puedes realizar el curso sobre Patrones y componentes de Sistemas de Diseño.
• Finalmente, te recomiendo el curso Cómo Gestionar un Sistema de Diseño como Product Manager.