Sistemas de diseño para productos digitales: ¿por qué importan?

Un punto de unión entre el equipo de diseño y el de desarrollo

Ixchel Huitron
Nowports Tech and Product
6 min readSep 6, 2022

--

Desarrollar un producto digital implica más que programar, también requiere de un elemento esencial para su funcionalidad: el diseño. Por esta razón, me di a la tarea de recopilar los detalles más importantes de este tema y hoy te los comparto para que consideres en tus futuros proyectos.

¡Empecemos!😉

¿Cuál es la relación entre un sistema de diseño y un producto digital?

Al desarrollar un producto digital es necesario que consideres incluir un sistema de diseño, principalmente por estos motivos:

  • Es una herramienta que permite establecer patrones y contar con elementos, que se pueden y deben, reutilizar al crear funcionalidades.
  • Gracias a su adaptabilidad es posible crear, desde una unidad mínima, hasta otros componentes mucho más complejos.

Pero antes iré un poco atrás, si recuerdas los inicios de la web, muchas páginas y sitios tenían un estilo propio, y como usuario tu deber era comprender la función de sus elementos, por ejemplo: cómo navegar entre sus secciones, cerrar pantallas y más. Pero ahora las cosas han cambiado.

Tomando en cuenta el avance tecnológico, la existencia de múltiples dispositivos móviles y la complejidad de la arquitectura de información de los sitios web actuales, entender el funcionamiento de los elementos ya no es una tarea tan sencilla ¿verdad? Es por eso que, partiendo de la metodología Atomic Design, ideada por Brad Frost, es importante evitar las inconsistencias y optimizar al máximo el diseño y el desarrollo de los productos digitales.

Metodología Atomic Design
Fuente: Atomic design, Brad Frost

Atomic Design, which started as a blog post and was later expanded into a book, directed designers and developers to “build systems, not pages,” by starting with the smallest elements possible and combining them intelligently until you reach a pleasing composition. Brad Frost.

Ahora bien, tomando de base este contexto explicaré un poco más el tema.

¿Qué es un sistema de diseño?

Un sistema de diseño es un conjunto de reglas, normas y procedimientos que los equipos de diseño, negocio y desarrollo establecen internamente para trabajar de una forma alineada a través de un lenguaje común.

Y para que tengas mejor idea, piensa en las piezas de LEGO; imagina que cada una es un componente y por eso todos los equipos deben usar las mismas. Su objetivo es servir de guía para que el trabajo sea más eficiente y consistente.

Ejemplo de Design System

Con todo lo anterior no quiero decir que sin un sistema de diseño no es posible crear productos digitales, más bien quiero dejar claro que es necesario para trabajar de una forma más eficiente y crear buenas experiencias para los usuarios.

Dado que estos sistemas influyen en el éxito de toda empresa o producto digital, especialmente dentro del competitivo mercado tecnológico, son clave. Permiten trabajar de una forma más eficiente y garantizar mayor calidad.

Ahora bien, aunque a simple vista parece muy fácil construir un sistema de diseño, la realidad es que es una tarea gigantesca que requiere del trabajo colaborativo de muchos equipos. Por eso hay que dedicarle tiempo y esfuerzo.

¿Cuál es la importancia de los sistemas de diseño?

En cuanto a las características de estos sistemas puedo mencionar:

Escalabilidad

En la automatización de los procesos de diseño UX y de desarrollo, permiten escalar fácil un producto con poco esfuerzo y menos gasto de recursos.

Consistencia

Construyen un mismo diseño en todas las plataformas. Por lo tanto, el usuario puede reconocer patrones y mantenerse alineado con la plataforma.

Eficiencia

Permiten ahorrar tiempo, dinero y recursos, ya que todo permanece documentado y los equipos pueden trabajar con más autonomía.

Dinamismo

Para que cumplan su función, estos sistemas tienen que ser flexibles y mantenerse vivos a largo plazo. No son estáticos, sino dinámicos porque necesitan evolucionar con el producto y su diseño.

De hecho, Brad Frost ejemplifica un poco el trabajo colaborativo que se necesita para implementar un sistema de diseño. Establece que, si bien no todos en la empresa deben contribuir directamente al sistema, si es necesario que haya personas involucradas.

Características de un sistema de diseño
Fuente: Atomic design, Brad Frost

Calidad

Los usuarios del sistema de diseño no necesitan ser diseñadores o desarrolladores para guiarse en su trabajo; el sistema de diseño sirve como un vehículo de control de calidad que ayuda a todos en la empresa a aplicar las mejores prácticas, independientemente del área a la que pertenezcan.

Un ejemplo es cuando se decide:

  • Qué incluir en el sistema de diseño.
  • Cómo será el tono de voz de la empresa.
  • Qué imágenes o ilustraciones se podrán utilizar.

Al final, todos estos elementos podrán usarse por diversas áreas. Con esto la información permanece unificada y al alcance de todo el equipo.

¿Qué beneficios aportan los sistemas de diseño?

A modo de resumen, usar un sistema de diseño, ya sea propio o de terceros (como guía), ayuda a:

  • Dar consistencia a un producto.
  • No perder tiempo en cuestiones estéticas.
  • Enfocarse en mejorar la experiencia de usuario.
  • Mejorar la comunicación entre equipos.
  • Dar mayor visibilidad del comportamiento esperado, no solo en procesos de diseño-desarrollo, sino también involucrando a los equipos en fases de pruebas o presentaciones con stakeholders.

Dicho esto, ahora me gustaría que te inspires junto conmigo mirando algunos sistemas de diseño😊. A continuación te comparto ciertos detalles que considero importantes en ellos y que para mí, son interesantes analizar.

Ejemplos de sistemas de diseño

Atlassian Design System

Atlassian Design System
Fuente: Atlassian Design System
  • Su filosofía es mejorar la eficiencia y productividad. Considero que sus colaboradores son los amos y señores de la organización de proyectos.
  • Mantiene los principios de diseño. Implementa buenas prácticas, documentación y ejemplos.
  • Integra ilustraciones y animaciones. Esto es muy interesante porque cuenta con kits de animaciones que tienen sugerencias de velocidad, tiempo de duración, colores, etc.
  • La arquitectura de su información es muy buena. Es fácil encontrar recursos de acuerdo a las necesidades (sobre desarrollo, sus posibles lenguajes o recursos por consultar, por ejemplo).

Salesforce Lightning Design System

Salesforce Lightning Design System
Fuente: Salesforce Lightning Design System Fundamentals
  • Mejora los esfuerzos del servicio a cliente. Integra toda una sección de buenas practicas y posibles recursos a utilizar (emails, mensajes para chatbots, etc.).
  • Mantiene una filosofía de diseño. Imprime el sello de su marca.
  • Cuenta con varios componentes y variantes, tanto para desarrolladores como para diseñadores.
  • Es accesible y cuenta con una gran documentación que sirve como referencia para no olvidar y saber qué incluir en los productos digitales.

IBM Carbon

IBM Carbon
Fuente: Carbon Design System
  • Tiene data. Cuenta con un compilado de información respecto a por qué utilizan un componente con respecto a otro, todo basado en números.
  • Cuenta con recursos/documentación. Tiene mucha información disponible para desarrolladores con el fin de que puedan resolver cualquier duda sobre como utilizar algún componente.
  • Cuenta con tutoriales donde se explica todo sobre el sistema, algo que le sirve de ayuda a las personas nuevas que se unen al equipo.
  • Usa distintos lenguajes y cuenta con todo lo necesario para los proyectos. Aunque esto le sirve más a los equipos de desarrollo, otras áreas también pueden entender este tema.

Todo producto digital necesita un buen diseño

Como bien mencioné a lo largo de este artículo, un sistema de diseño es una herramienta fundamental que asegura consistencia, coherencia y una buena experiencia en todo producto digital, por eso es fundamental darle la importancia que merece e incluirlo en el proceso de desarrollo.

Así que si actualmente estás participando en el desarrollo de uno (o pronto lo estarás) no te olvides de este elemento indispensable para su éxito. Recuerda que este sistema crece poco a poco y, aunque requiere una considerable inversión de tiempo y recursos, aporta múltiples beneficios.

¿Quieres leer más temas relacionados? 👉Visita el blog de Nowports Tech👈

--

--