¿Qué es un Design System?

18 de agosto de 2023

El Poder de los Sistemas de Diseños

Ilustración de componentes de diseño trabajando juntos



# ¿Qué es un Design System?

Un sistema de diseño es como una guía que ayuda a las organizaciones a crear y desarrollar cosas como páginas web o aplicaciones de manera más eficiente. Imagina que estás construyendo un castillo con bloques de Lego. En lugar de tener que diseñar y construir cada pieza desde cero cada vez, un sistema de diseño te proporciona bloques predefinidos que puedes usar una y otra vez para construir cosas geniales de manera más rápida y consistente.



Ilustración de componentes de diseño trabajando juntos


# Iconografía del sistema de diseño

Piensa en la iconografía del sistema de diseño como en los dibujitos o símbolos que representan los diferentes bloques de Lego en nuestro ejemplo. Estos dibujos nos ayudan a identificar qué pieza es cuál y cómo encajan juntas. En el caso del sistema de diseño, las iconografías nos ayudan a entender rápidamente cómo se ven y cómo funcionan las diferentes partes de una página web o aplicación.


# El problema de la entrega

A menudo, las organizaciones tratan las páginas web como si fueran hojas de un cuaderno. Cada página es como una hoja diferente con su propio diseño. Sin embargo, esto puede llevar a problemas. Los diseñadores crean diseños para cada página, pero cuando se los pasan a los desarrolladores, a veces hay confusiones o problemas. Los diseñadores también pueden hacer cambios después de que los desarrolladores ya han empezado a trabajar en algo, lo que causa más confusiones.

Ilustración de componentes de diseño trabajando juntos


# Caos en el diseño basado en páginas

El enfoque de diseño basado en páginas puede ser problemático. Las aplicaciones web son dinámicas y cambiantes, por lo que es difícil mostrar todos los estados posibles en un diseño estático. Además, a medida que avanza el proceso de desarrollo, los requisitos pueden cambiar y pueden surgir desafíos imprevistos. Esto puede causar problemas entre los desarrolladores y diseñadores, lo que lleva a resultados inconsistentes.


# Problemas con el sistema actual

Este enfoque puede llevar a que los desarrolladores queden bloqueados por los diseñadores y a que se tomen decisiones de producto deficientes. También puede hacer que el diseño del sitio sea inconsistente y que se pierda mucho tiempo resolviendo los mismos problemas una y otra vez.


# Diseño y desarrollo basados en componentes

Para solucionar estos problemas, surgieron nuevas formas de trabajar. Los diseñadores comenzaron a usar “guías de estilo”, que son como reglas para cómo se debe ver todo. Los desarrolladores, por su parte, empezaron a crear “bibliotecas de componentes”, que son como colecciones de piezas de Lego reutilizables que pueden usar en diferentes partes de un sitio web.


# Cómo funciona un sistema de diseño

Ilustración de componentes de diseño trabajando juntos

Un sistema de diseño es como una caja de herramientas que contiene todo lo que necesitas para construir cosas geniales en línea. Tiene cosas como:

  • Lenguaje de diseño: Es como la paleta de colores y las fuentes de letra que usamos para que todo se vea bien y coherente.
  • Kit de diseño: Son como las piezas de Lego que podemos usar para crear cosas. Los diseñadores pueden usarlos para crear nuevos diseños de manera más rápida.
  • Biblioteca de componentes: Son como los bloques de Lego, pero para los desarrolladores. Son piezas de código que hacen que las cosas funcionen.
  • Zona de pruebas: Es como un laboratorio donde los desarrolladores pueden probar sus ideas antes de ponerlas en acción.
  • Documentación: Es como un manual que explica cómo usar todas las piezas y cómo hacer que funcionen juntas.
  • Modelo de gestión: Es como un conjunto de reglas para asegurarnos de que todo funcione sin problemas y para que todos puedan ayudar a mejorarlo.

Un sistema de diseño ayuda a que los equipos de diseño y desarrollo trabajen juntos de manera más eficiente. Todos usan las mismas piezas y siguen las mismas reglas, lo que hace que todo sea más rápido y menos confuso.


# ¿Cómo se ve un sistema de diseño en acción?

Cada sistema de diseño puede ser diferente, pero todos tienen cosas en común. Los equipos de diseño y desarrollo trabajan mejor juntos. Pueden crear cosas más rápido y sin tantos problemas. También pueden compartir sus ideas y trabajar en conjunto, en lugar de estar separados.

Un sistema de diseño también cambia la forma en que los diseñadores trabajan. Algunos se enfocan en hacer que las piezas encajen y funcionen bien juntas, mientras que otros pueden centrarse en crear experiencias geniales para las personas que usan el sitio web o la aplicación.

En resumen, un sistema de diseño es como una guía que hace que el diseño y el desarrollo sean más fáciles y rápidos. Es como construir cosas con piezas de Lego: es más rápido cuando ya tienes todas las piezas listas.

¿Tienes alguna duda?
Descripción
¡Empieza ahora!
T.+111