Sistema de diseño: qué es, por qué y cómo crearlo

El tema de los sistemas de diseño, al parecer, ya ha sido considerado desde todos los lados: puede encontrar muchos artículos, publicaciones, informes y otros materiales sobre creando un sistema de diseño. A pesar de esto, todo aquel que se topa con este término tiene muchas preguntas. Intentaremos responder detalladamente a las principales:

• ¿Qué es un sistema de diseño?
• ¿Para qué es esto?

¿Qué es un sistema de diseño?

Un sistema de diseño es una estructura que incluye componentes visuales, una biblioteca de códigos y pautas de uso.

A menudo, los diseñadores principiantes cometen el error de simplificar el concepto al pensar en un sistema de diseño simplemente como un kit de interfaz de usuario: un documento que contiene elementos de interfaz gráfica, tipografía y colores.

El sistema de diseño consta de tres niveles:

A kit de interfaz de usuario es el lenguaje visual de un producto para el cual se crea un sistema de diseño. Estos son colores, fuentes, íconos, botones, viñetas, interruptores, controles deslizantes, imágenes y animaciones. Los elementos varían y dependen de las características específicas del producto digital. Todos ellos ayudan a crear la parte visible de la interfaz con la que interactúa el usuario.

El marco es una biblioteca de código escrita para cada uno de estos elementos, así como complementos para animación, etiquetas y etiquetas para navegación.

Líneas directrices son un conjunto de plantillas y reglas para el uso de elementos que organizan el proceso de trabajo. Gracias a las directrices, un diseñador no se involucra en tareas simples, pero un desarrollador se involucra inmediatamente.

Por ejemplo, las pautas especifican los parámetros de una ventana emergente en un sitio web: sangrías del texto, la ubicación y el tamaño del título y del cuerpo del texto, un lugar para un botón y cómo se verá la ventana con menos o menos más texto.

Tipos de sistemas de diseño.

No existe una clasificación única, pero los expertos distinguen dos tipos de sistemas de diseño: de código abierto y de código cerrado.

En los sistemas de código abierto, cualquier empresa puede utilizar materiales y adaptarlos a sus proyectos: cambiar los colores, las fuentes y los iconos de los botones. Por ejemplo, en sistemas Ant Design, Pautas de interfaz humana y Diseño de materiales.

Los sistemas de diseño de código cerrado generalmente se crean para una empresa o producto específico. Se trata de materiales completamente cerrados, accesibles sólo para los empleados, o parcialmente abiertos.

Cómo crear un sistema de diseño.

El desarrollo de sistemas de diseño se basa en los principios del diseño atómico. El diseño atómico es una técnica que incluye cinco niveles de elementos de diseño: átomos, moléculas, organismos, patrones y páginas.

Estructura del sistema de diseño:

• Los átomos Son los componentes más pequeños: botones, iconos, campos de entrada y fuentes.
• Moléculas son una combinación de varios elementos simples: dos botones, un título y una línea de entrada, una barra de notificación, una casilla de verificación y texto.
• Organismos Son componentes completos: encabezado del sitio, formulario de autorización, tarjetas de producto y banner de notificación.
• Plantillas – diseños de página sin contenido: menú, apariencia del sitio.
• Páginas Son páginas llenas de contenido.

El algoritmo general se ve así:

• Seleccione colores y fuentes, establezca cuadrículas modulares y seleccione animaciones, imágenes y sonidos.
• Crea elementos básicos de la interfaz.
• Combinaciones de elementos de diseño y diseños.
• Crea una lista de elementos junto con las reglas. En la directriz, especifique qué elemento es, dónde se utiliza y qué tareas resuelve.

Normalmente, los sistemas de diseño no se crean desde cero, sino que se basan en material ya desarrollado: kits de interfaz de usuario, directrices o libros de marca.

¿Por qué necesitas un sistema de diseño?

Como ocurre con todos los productos de TI, es fundamental responder a la pregunta: "¿Para qué sirve un sistema de diseño?" O, como comentan algunos colegas del taller, “¿y qué?”

La respuesta a esta pregunta le ayudará a comprender el valor del producto. Parte de esto ya se puede ver en lo que describimos anteriormente. Pero analicémoslo y echemos un vistazo más profundo.

Automatización

La automatización proporciona el beneficio más obvio. Un sistema de diseño le ayudará a automatizar las operaciones, liberándole tiempo para otras tareas.

Iteratividad

Poder heredar y aplicar automáticamente modificaciones a los elementos del sistema de diseño es una herramienta valiosa para un equipo de producto. Puede realizar rápidamente cambios estéticos o incluso grandes en un solo lugar. De esta manera siempre podrás realzar el producto.

Consistencia

La coherencia establece que los objetos y entidades de un producto que realizan la misma función deben aspirar a la unidad y la similitud.

Cuando utilizamos funciones comparables en un producto, se vuelven familiares y convenientes: instintivamente entendemos cómo funciona y aparece el botón, así como dónde está ubicado.

Esperamos que todos hayan aprendido algo valioso del artículo. Y una vez más estábamos convencidos de que trabajar en un artículo estructura el conocimiento y motiva a seguir estudiando.