Guía paso a paso para crear un sistema de diseño

Introducción

En esta era de accesibilidad en todas partes, la ubicuidad se ha convertido en norma. Sin embargo, también es sabido que la coherencia es credibilidad. Los usuarios son ahora más conscientes. Una experiencia rápida y fluida es una expectativa básica, independientemente de la interfaz.

Además, el tiempo es un bien que no se puede desperdiciar. Todo esto debería bastar para que te lanzaras a hacer más cosas con tu sitio web o interfaz. Sin embargo, intentar ser coherente con 50 componentes diferentes en el diseño sin errores es mucho pedir.

Que suenen lostambores: "Design System" ha llegado para hacerte la vida más fácil.

¿Qué es un sistema de diseño?

Un sistema de diseño es un extenso archivo de componentes reutilizables claramente documentados que el equipo de producto puede aprovechar para crear experiencias digitales. En otras palabras, considere los sistemas de diseño como la única fuente de verdad para una empresa en materia de diseño.

Más que guías de estilo o bibliotecas de patrones, un sistema de diseño está en constante evolución. Este ecosistema de directrices relacionadas con diversas entidades, incluido el diseño de UX, puede utilizarse como marco de bloques de construcción para cualquier proyecto con el fin de garantizar que todos los componentes sean coherentes y coincidan con la marca.

Un sistema de diseño, útil tanto para las empresas de nueva creación como para los negocios en crecimiento, se convierte en un activo esencial e innegociable a medida que se desarrolla un producto. También puede influir positivamente en los objetivos empresariales, el flujo de trabajo, el trabajo en equipo, la experiencia del usuario y la experiencia general de la marca.

¿Cuáles son las ventajas de un sistema de diseño?

Algunas de las ventajas de aplicar un diseño de sistema son

1. Aumenta la eficacia al tiempo que reduce el tiempo: una de las principales ventajas de cualquier sistema de diseño es la capacidad de crear y recrear rápidamente el trabajo de diseño y desarrollo. Los equipos pueden utilizar elementos prefabricados para disminuir la necesidad de reinventar constantemente la rueda y reducir el riesgo de incoherencia.
2. Mejora la coherencia visual entre páginas y canales: la falta de un sistema de diseño para toda la organización puede provocar incoherencias visuales, una experiencia de usuario fragmentada o el aislamiento de la marca. Un conjunto cohesivo de normas también ayuda a gestionar rediseños o cambios de marca visuales a gran escala.
3. Promueve un lenguaje unificado: un lenguaje de diseño compartido reduce la posibilidad de que se pierda tiempo de diseño o desarrollo debido a la falta de comunicación dentro de los equipos interfuncionales y entre ellos.
4. Permite centrarse mejor en problemas más complejos: los equipos pueden solucionar mejor los problemas complejos, como la priorización de la información, la gestión de trayectos, etc., cuando se crean componentes de interfaz de usuario sencillos e inequívocos.
5. Sirve de referencia y herramienta educativa para los colaboradores: un sistema de diseño facilita el proceso de incorporación en caso de cambios de personal. También ayuda a facilitar a los nuevos colaboradores individuales el diseño UI UX o la creación de contenidos.
6. Contribuye a crear una marca fuerte y atemporal: el propósito de un sistema de diseño es comunicar una identidad y un diseño concretos detrás de los productos que transporta. Contribuye a crear marcas impactantes y ayuda a la gente a recordar la experiencia de marca. Esto hace que la gente se sienta más vinculada a una marca y confíe más en ella.

Guía en diez pasos para crear un sistema de diseño

Hemos elaborado un proceso de diez pasos para ayudar a su empresa a crear un sistema de diseño.

1. Analice a fondo su actual proceso de diseño.

El primer paso para elaborar una estrategia e iniciar cualquier proceso es conocer su situación actual. Revisar y analizar el proceso de diseño actual de su organización puede ayudarle a comprender mejor el diseño del sistema más adecuado para su marca. Hágase las siguientes preguntas:

• ¿Cuál es el enfoque de diseño actual de su organización?
• ¿Qué herramientas utiliza su organización?

Asegúrese de evaluar el nivel de madurez de diseño del equipo de producto. Esto le ayudará a calcular el tiempo necesario para implantar el nuevo sistema en su organización.

2. Determine el alfabeto de su marca

El alfabeto de una marca daría lugar a la identidad de marca, es decir, los valores de la marca y del producto y el lenguaje de marca. El lenguaje de marca comprende formas, tipos de letra, colores, animaciones, voz y tono.

Los diseñadores emplearán un lenguaje visual definido por el alfabeto de la marca. Revisar las directrices de la marca y hablar con las partes interesadas puede ayudarte a comprender la identidad y el lenguaje de la marca.

3. Realizar una auditoría de la IA de los productos actuales

Llevar a cabo una auditoría de la interfaz de usuario del producto actual le ayudará a abordar uno de los principales retos del diseño de productos: la duplicación del diseño. La auditoría persigue dos objetivos

• Llame la atención sobre las áreas del producto con incoherencias significativas.
• Discernir los elementos más utilizados y esenciales del producto.

Una auditoría de la interfaz de usuario es un proceso de varios pasos. Es crucial identificar y analizar las principales propiedades de la interfaz de usuario y su utilización en los componentes. Puede emplear las herramientas disponibles para ver el número de colores y tipos de letra únicos en sus hojas de estilo. A continuación, puede desglosar el diseño de cada sitio web en elementos individuales.

4. Establezca los principios de diseño de su sistema

Para crear una experiencia de usuario excelente, es imprescindible comprender las razones que subyacen a las decisiones de diseño. Además, un conjunto claro de objetivos facilita la definición de los principios de diseño y la coordinación con los equipos.

¿Quieres tener un proceso de sistema de diseño? Empiece con estas preguntas:

• ¿Qué estás creando?
• ¿Por qué lo haces
• ¿Cómo lo construirá?

Los principios de diseño deben reflejar los valores y la visión de su marca.

5. Construir una biblioteca de componentes

También conocida como biblioteca de patrones, debe incluir todos los elementos funcionales y decorativos de la interfaz de usuario. Evalúa los componentes en función del proyecto, las necesidades de los usuarios y los objetivos empresariales, y quédate con los que necesites.

6. Establecer normas

Los sistemas de diseño no se construyen para restringir a los diseñadores a una dirección de diseño concreta. Al contrario, sólo deben proporcionar a diseñadores y desarrolladores un marco fundamental que amplíe la dirección creativa y deje margen para la innovación.

Son dos enfoques de las reglas del Sistema de Diseño, como se menciona en el libro de Alla Kholmatova:

• Reglas estrictas - Los diseñadores y desarrolladores siguen un proceso riguroso para introducir nuevos patrones o componentes.
• Reglas laxas - Estas reglas permiten a diseñadores y desarrolladores crear sin atenerse a restricciones estrictas si creen que así se consigue un mejor diseño.

Como en muchos otros aspectos de la vida, es esencial encontrar el equilibrio adecuado entre estas reglas para que el producto sea coherente a la vez que creativo.

7. Elija su modelo de gobernanza

Los sistemas de diseño dinámicos y en constante evolución requieren un proceso sencillo de aprobación y aplicación de cambios. Existen tres modelos de gobernanza:

• Modelo solitario - Un individuo o un grupo de individuos "gobiernan" directamente el proceso del sistema de diseño.
• Modelo centralizado - Un equipo se encarga de dirigir la evolución del sistema.
• Modelo federado - Varias personas de varios grupos dirigen el proceso de diseño del sistema.

Aunque cada uno de estos modelos tiene sus pros y sus contras, el modelo solitario especialmente puede llevar a que la única persona encargada se convierta en un cuello de botella para la ejecución de muchas tareas. Lo mejor es utilizar una combinación de diferentes modelos en consonancia con sus necesidades.

8. Definir la estructura de los componentes

La duplicación de componentes funcionales es un reto importante en los sistemas de diseño. Esto da lugar a un sistema inflexible y obliga a los diseñadores (y desarrolladores) a crear nuevos elementos cada vez que hay un nuevo escenario.

Los diseños de sistemas de éxito son muy reutilizables y permiten a los usuarios utilizarlos como base de sus productos. De ahí que se recomiende desarrollar elementos que puedan reutilizarse en distintos contenidos.

Criterios para componentes reutilizables y escalables:

• Modular - Componentes independientes y elementos intercambiables.
• Componibles: fusione los componentes existentes para crear otros nuevos.
• Personalizables - Componentes personalizables que funcionan en multitud de contextos.

9. Asegúrese de que todos los equipos utilizan un lenguaje unificado

El propósito de un sistema de diseño incluye facilitar el trabajo en equipo sin fisuras. De ahí que sea vital integrar el sistema en el flujo de trabajo de los equipos. Aumenta la productividad al tiempo que aporta valor a los miembros del equipo.

Comprender mejor cómo utilizan el sistema de diseño varias personas en el proceso de integración inicial puede ayudarle a modificar el sistema en consecuencia.

10. Transmita regularmente los cambios

El proceso de un sistema de diseño evoluciona con la organización y no puede ser estático. Por eso, tras introducir el sistema en su organización, es esencial comunicar todos los cambios y mantenerla al día.

Un registro de cambios conciso y bien mantenido puede ayudar a los usuarios a comprender las distintas actualizaciones y cómo afectarán a su trabajo.

Tres ejemplos para empezar

Sistema de diseño Atlassian

(https://atlassian.design/)

El objetivo de Atlassian Design System, una famosa empresa australiana de software empresarial, es ofrecer una colaboración sin fisuras entre equipos ágiles y dispersos de todo el mundo.

Trello y Jira, dos de las herramientas de colaboración más utilizadas de Atlassian, reflejan plenamente la filosofía de diseño de la empresa. Esta filosofía consiste en aprovechar la experiencia digital para aumentar la productividad y el potencial general de los equipos y de cada uno de sus miembros.

Dicho esto, el sistema de diseño de Atlassian ofrece técnicas ágiles y un seguimiento eficaz de todas y cada una de las fases de un proyecto, desde la planificación del producto hasta su entrega. En última instancia, esto produce resultados beneficiosos de la creación y entrega de productos. Su sistema de diseño incluye principalmente:

1. Directrices de diseño
2. Normas de la marca
3. Producto
4. Ilustración
5. Creación de prototipos
6. Marketing
7. Personalidad

Sistema de diseño de IBM

(https://carbondesignsystem.com/migrating/guide/design)

IBM es un buen ejemplo de gran empresa de TI que opera a escala mundial y sigue su propio sistema de diseño.

Sus capacidades abarcan desde el asesoramiento empresarial y la financiación hasta la creación de software, el alojamiento/gestión de TI y las soluciones que conectan el software con el hardware.

El principio fundamental de IBM es impulsar constantemente el progreso, ya sea de la sociedad humana o de una marca, utilizando la ciencia, la razón y el intelecto.

Según IBM, tener un buen diseño no es sólo una necesidad, sino también un compromiso con los usuarios. Estas son algunas de las funciones destacadas de su Carbon Design System, que proporciona a los desarrolladores y diseñadores que trabajan con Adobe, Axure y Sketch una gran cantidad de herramientas y recursos:

1. Visualización de datos
2. Patrones
3. Componentes
4. Directrices
5. Tutoriales

Sistema de diseño Uber

(https://baseweb.design/)

Todos hemos cogido un Uber al menos una vez. La empresa tecnológica estadounidense se basa en el movimiento, que incluye la entrega de comida a domicilio, los viajes en coche, los viajes compartidos y la micromovilidad con patinetes y bicicletas eléctricas.

Uber necesita un diseño de sistema eficiente para que este tipo de servicio funcione a la perfección en todas las submarcas, internas, productos y proyectos.

Los principales atributos de Uber Design System son:

1. Arquitectura de marca
2. Composición
3. Tono de voz
4. Movimiento
5. Ilustración
6. Fotografía
7. Iconografía
8. Color
9. Logotipo
10. Tipografía

Puntos que debe conocer antes de crear su primer sistema de diseño

1. La comunicación temprana y clara es su nuevo mejor amigo

Puede resultar complicado implicar a los consumidores internos desde el principio. De hecho, sus comentarios pueden entorpecer el proceso si son ambiguos, si se proporcionan demasiado pronto en un ciclo de lanzamiento alfa o beta, o si no son útiles.

Diga a sus clientes, los usuarios del sistema de diseño, lo que necesita para asegurarse de recibir comentarios constructivos. Si estás en un ciclo de pre-lanzamiento temprano, sé honesto y claro sobre la aportación exacta que quieres. Esto indica que buscas los defectos más significativos del producto y no críticas de alta fidelidad.

Ten cuidado con pensar demasiado, con marchitar tu mente, pero no dudes en comunicarte en exceso.

2. Tus pasos no son lo único que necesitas rastrear

Una pieza crucial que falta en el establecimiento de prioridades suele ser el seguimiento del uso de los sistemas de diseño. Es imprescindible saber dónde se utiliza el sistema, quién lo utiliza, con qué frecuencia y con qué frecuencia se actualiza.

La recopilación diaria de estadísticas sobre qué equipos utilizan exactamente qué versiones de la biblioteca permite comprender el ritmo de adopción, actualización y desactualización.

Cuando identifique los equipos que rara vez actualizan, podrá pasar a conocer los problemas que bloquean la actualización y, posteriormente, rectificarlos.

3. Los mecanismos de retroalimentación están tan infravalorados como Rhaeghal de GOT

Para garantizar que su sistema no sólo sea valioso para sus usuarios, sino también algo de lo que se sientan parte y a lo que hayan contribuido activamente, contar con formas sencillas pero directas para que la gente dé su opinión (Slack, correo electrónico, etc.) y contribuya al sistema será una pieza clave.

Proporcione siempre instrucciones sobre cómo y dónde proporcionar comentarios en tantas áreas como sea posible, y nunca asuma nada, especialmente que un usuario lo encontrará en el lugar que usted piensa que es el más obvio.

Un sistema de diseño es la estrella polar que necesita su organización

Un sistema de diseño exitoso y bien elaborado se convierte en parte de la columna vertebral de una empresa, lo que se traduce en experiencias coherentes y ampliadas. Además, los diseñadores y desarrolladores tienen la oportunidad de comunicar mejor el propósito del producto en lugar de quedarse atascados montando bloques de construcción básicos.

Cualquier generalista puede ser su socio en la entrega de un diseño, pero sólo un especialista en diseño identifica los problemas, retos y aspiraciones actuales para elaborar un sistema de diseño, especialmente para usted. Ahora no es el momento de esperar. Con esta amplia guía sobre cómo crear un sistema de diseño, sólo le falta una iniciativa para transformar por completo su proceso de producción.

Referencias

https://ionic.io/resources/articles/why-every-company-needs-a-design-system

https://www.baianat.com/books/merits-of-design-systems/design-systems-and-their-benefits

https://www.uxpin.com/create-design-system-guide/

https://builtin.com/design-ux/11-benefits-design-systems

https://elementor.com/blog/design-system/

https://www.nngroup.com/articles/design-systems-101/

https://www.uxpin.com/studio/blog/best-design-system-examples/#h-4-uber-design-system

https://www.eleken.co/blog-posts/7-design-systems-examples-for-your-inspiration

https://aufaitux.com/blog/best-design-systems/

https://www.copycat.dev/blog/design-system-examples/

https://builtin.com/design-ux/design-system

https://www.editorx.com/shaping-design/article/design-system-examples

https://medium.com/spotify-design/5-things-i-wish-id-known-before-starting-a-design-system-at-spotify-f8624abf1081