¿Qué es un sistema de diseño y cómo puedo usarlo en mis proyectos digitales?

Descubre cómo puedes usar los principios de los design systems para desarrollar productos online

Si te dedicas al desarrollo web o de productos digitales, como la creación de apps, sitios web, portales, o servicios digitales, los sistemas de diseño son un conjunto de principios que te ayudarán a concretar tu proyecto de forma integral y eficiente.

Conoce en qué consiste y cómo puedes usar un sistema de diseño ya mismo.

¿Qué es un sistema de diseño?

Los sistemas de diseño o design systems son los procesos por los que, en la etapa de planeación y construcción de un proyecto digital, se decide cuáles serán los elementos de un sistema. Esos elementos incluyen la arquitectura del sitio o aplicación, sus módulos, componentes, tipo de interfaz, diseño y usabilidad.

Un sistema de diseño considera el producto digital como un todo, y comprende a profundidad cómo cada elemento interactúa con el otro. Una forma de imaginarlo es pensarlo como la arquitectura de un producto digital. Por ejemplo, si vamos a desarrollar una aplicación de mensajería instantánea, debemos considerar cómo se conectarán aspectos de su funcionamiento, como el diseño, la interfaz (front end) y los datos del sitio (back end), así como su conexión con los servidores, el hardware y software que habilitan toda la funcionalidad.

En los términos más simples, un sistema de diseño define las reglas del producto, sus limitaciones y cómo se implementará tanto en el código como en el diseño de interfaz.

Hace un par de años, el concepto se hizo tendencia. Sin embargo, siempre han existido estos sistemas de diseño, también fuera del mundo digital. Un ejemplo que comparte Javier “Simón” Cuello, diseñador de UX (@javiercuello) son los sistemas de señalética en los aeropuertos, que tienen coherencia integral, escalable y adaptable. Para Javier, un sistema de diseño es una forma de pensar. Piensa en piezas de Lego que puedes unir de distintas formas para lograr resultados diferentes, pero que siempre están conectadas entre sí.

¿Cómo se crea un sistema de diseño?

El primer paso es entender a profundidad cuáles son los objetivos del proyecto. Y en segundo lugar, saber cuáles son las necesidades específicas para que funcione, tanto desde el punto de vista del producto como del usuario.

El equipo deberá crear un sistema en el que se especifique cómo todos los componentes del producto funcionan entre sí, y en una segunda etapa, definir cómo se logrará la eficiencia de todo el sistema.
Regresemos al ejemplo de nuestra aplicación de mensajería instantánea, y veamos qué tendríamos que considerar para crear el sistema:

Necesidades funcionales

- Los usuarios podrán agregar contactos.
- Se requiere añadir funciones de íconos y stickers.
- Los usuarios pueden enviar archivos, fotos y videos.

Necesidades no funcionales

- Se requiere que los mensajes se compartan entre usuarios de forma instantánea.
- Se necesita que los mensajes no se eliminen y exista un respaldo.
- Se requiere que los servidores funcionen sin fallas.
- Se requiere que el sistema sea escalable para cuando el producto crezca (con más usuarios, se necesitan más servidores, etc.).

Al desarrollar el sistema de diseño, se debe definir cómo se lograrán todas esas necesidades.

Métodos de creación de sistemas de diseño

Distintos expertos en la creación y desarrollo de productos digitales usan alguno de estos métodos para crear sus sistemas:

- Diseño arquitectónico. Se describe gráficamente la interacción entre todas las partes del sistema. Se concentra en la estructura de todo el sistema.

- Diseño físico. En un diagrama de flujo se representa cómo se conecta cada parte del sistema, desde el servidor hasta el usuario final. También se describe cómo solucionar problemas. Por lo general se concentra en tres etapas: diseño de interfaz, diseño de datos y diseño de procesos.

- Diseño lógico. Es una representación de los flujos de todo el sistema, y por lo general se hace gráficamente con el uso de diagramas llamados modelos entidad-relación (ER Model). Algunos de los términos que se usan en este modelo son:

* Entidad: items de la aplicación en el mundo real. Por ejemplo: curso, profesor, estudiante.
* Relación: Las dependencias entre entidades. Por ejemplo: el profesor publica el curso, y entonces el estudiante puede estudiar el curso.
* Atributos: Son las propiedades entre relaciones. Por ejemplo: nombres de los estudiantes, códigos de cursos.

¿Qué tipo de profesionales usan los sistemas de diseño?

Cualquier persona que trabaje en el desarrollo de un servicio o producto digital, por ejemplo:

- Ingenieros en sistemas

- Expertos en UX

- Expertos en UI

- UX researcher

- Diseñadores web

- Arquitectos de información

- Analistas de información

Algunos ejemplos útiles

Algunas empresas comparten cómo es la arquitectura de sus sistemas de diseño, por lo general, respecto del elemento de interfaz y diseño gráfico.

Estos ejemplos te serán de utilidad para construir tu propio sistema. Visita estos sitios para tener un concepto más claro e inspirarte en tus propios proyectos.

IBM Design Language.
Airbnb Design. Polaris, sistema de diseño de Shopify. Atlassian Design System. Si quieres aprender más de sistemas de diseño, consulta el curso Introducción a Design Systems con Figma de Javier “Simón” Cuello, y aprende a crear sistemas de diseño que respondan a las necesidades de tus usuarios.

También te puede interesar:

- 15 cursos online esenciales para regalar a los amantes del diseño.
- 5 cursos online para convertirte en diseñador UX.
- Lo que la mayoría de páginas web tienen en común.

inuin