¿Qué es un Sistema de Diseño?


Los sistemas de diseño están en todas partes, su función tiene que ver con la planeación y la construcción de productos (no necesariamente digitales).

Hace muchos años, un hombre llamado Malcom McLean transportaba mercancías en sus barcos, pero la descarga de todos estos objetos era muy compleja, todo tenía tamaños y pesos distintos. Para resolver este problema, McLean trabajo con un grupo de ingenieros y crearon los containers o contenedores, cajas de metal que agilizan este proceso gracias la estandarización de todos los sistemas y medios de transporte de estos contenedores.

Esto mismo sucede cuando trabajamos con software, buscamos una manera de agilizar nuestros desarrollo estandarizando todos estos procesos. Los sistemas de diseño son conjuntos de reglas para un producto que se modifica dependiendo de las necesidades del mismo, son una decisión de negocio. Cualquier persona del equipo de producto debe estar involucrada en este proyecto y poder consultar toda esta documentación.

Para crear un sistema de diseño podemos usar diferentes herramientas como Bear, Notion o Evernote, lo importante es que podamos escribir y organizar estos sistemas.

Partes del Design System

Principios

Sistema

Fundations

Componentes

Proceso de iteración


🖥UI Kit Ver Descargar

Principios del Sistema de Diseño

Los principios del diseño son la base fundamental de los paradigmas y metodologías que aplicaremos en nuestro sistema. Todas las decisiones que tomemos deben tener en cuenta y fundamentarse en estos principios, así evitamos cometer errores o generar conflictos, ya que todos los caminos serian correctos.

Principios del sistema de diseño:

Podemos añadir otros principios que se adecuen correctamente a nuestra empresa, pero debemos tener cuidado de que todos estos principios sean compatibles entre sí.

En nuestro caso, añadiremos los principios de User Control (el usuario debe tener la sensación de control sobre el producto)Forgiveness (debemos permitir que el usuario pueda cambiar de opinión o volver a empezar algún proceso) y Perceived stability (aún con plataformas robustas y complejas, el usuario debe percibir los procesos tan simples y familiares como sea posible).

Niveles de Sistematización


El Design System Workflow nos ayuda a entender mucho mejor cómo entra, por dónde sale y por cuáles puntos pasa nuestro trabajo cuando trabajamos con sistemas de diseño.

En este workflow o flujo de trabajo comenzamos diseñando y documentando para después hacer deploy (un término de programación para los momentos en que pasamos nuestro trabajo a producción, una versión funcionando en vivo), en esta etapa de deploy debemos tener muy claro para cuál plataforma o entorno estamos trabajando, así tendremos mucho más claro todo lo que vamos a necesitar construir (por ejemplo, cuando construimos páginas web trabajamos en archivos .css con los estilos de nuestros productos).

Pero el trabajo no termina aquí, después de hacer deploy entramos a la etapa de testing para evaluar la efectividad de estos estilos y seguirlos mejorando.

También vamos a aprender sobre Building Design Systems, donde construimos herramientas para que todos puedan usar e implementar las guías y los estilos que estamos trabajando. Para organizarnos y sistematizar estos procesos podemos implementar el modelo solitario, dónde tú, el diseñador haces todo el trabajo para que alguien más lo consuma, pero existen otros modelos como el centralizado o el confederado donde trabajamos con otras personas o incluso otros equipos y pedimos feedback dependiendo de la organización de nuestras empresas.

Paradigmas de Sistemas de Diseño


Existen varios paradigmas de diseño que pueden guiarte en la construcción de tu sistema de diseño.

Diseño atómico, diseño procedural y DRY

El paradigma procedural es la construcción de objetos variados para posteriormente construir nuestros sistemas a partir de estos elementos, es la construcción de funciones que en el futuro se construirán a sí mismas. En vez de construir todos los objetos de nuestro sistema, vamos a trabajar los elementos y reglas que se resolverán después. Por ejemplo, construir las mangas, el cuello u otros elementos para al obtener el resultado de un abrigo.

Otro paradigma que debemos entender es el diseño atómico para organizar los elementos de nuestros diseños y software. Los elementos independientes más sencillos de nuestro sistema (labels, inputs, botones, títulos, etc) los conocemos como átomos, pero cuando juntamos átomos construimos moléculas, elementos sencillos unidos entre sí (un buscador por ejemplo, el conjunto de label + input + botón), y formamos organismos cuando juntamos moléculas (por ejemplo, una barra de navegación con logos, enlaces y un buscador).

Con la suma de estos organismos generamos templates, la forma más básica de nuestras plataformas qué podemos utilizar en diferentes partes de nuestros diseños aplicando pequeños cambios en los átomos, y cuando aplicamos estos cambios para las partes especificas de nuestro sitio obtenemos páginas, el resultado final de toda la organización de elementos independientes hasta formas conjuntos de organismos complicados y armónicos entre sí.

Por último, vamos a entender el paradigma dry (Don’t Repeat Yourself) para construir elementos reciclables y no gastar tiempo volviendo a construir los mismos objetos una y otra vez.

¿Qué es un componente?


Los componentes forman parte de un todo, así como las velas de un pastel, el piso de los edificios o las partes de un motor cada una con su funcionalidad. Lo mismo pasa con las interfaces, vamos a construir diferentes elementos y herramientas para que los usuarios logren cumplir sus objetivos.

Todos los componentes tienen una entrada y una salida, el usuario realiza una acción y los elementos deben responder de alguna forma (feedback), esta es la forma de comunicamos con los usuarios, trabajamos haciendo conversaciones para informar que todo esta funcionando correctamente y qué pasos deben seguir a continuación. Este proceso de comunicación lo conocemos como interacción.