Por qué necesita un sistema de diseño

Por qué necesita un sistema de diseño

_{DECLARACIÓN DE DIVULGACIÓN: Las opiniones en este contenido reflejan las opiniones del autor. Salvo que se indique específicamente en el artículo, GM Financial no está afiliada, no avala ni está avalada por ninguna de las compañías mencionadas. Todas las marcas comerciales y demás propiedad intelectual utilizadas o mostradas son propiedad de sus respectivos dueños.}

Los sistemas de diseño son un tema candente en la industria de la tecnología y el diseño. Una búsqueda rápida en la web descubrirá que no hay escasez de videos y artículos que analizan los beneficios y las instrucciones. Veamos qué es un sistema de diseño, analicemos los beneficios y veamos algunos ejemplos excelentes de la vida real de compañías con las que probablemente esté familiarizado.

TL;DR: los sistemas de diseño son increíbles.

¿Qué es un sistema de diseño?

Un sistema de diseño es una colección de componentes, pautas y recursos reutilizables y aprobados que crean un lenguaje visual común para los equipos de productos. Respalda las mejores prácticas de diseño de interfaz de usuario y acelera los procesos de diseño y desarrollo.

Un sistema de diseño establece coherencia visual y ayuda a los equipos a construir rápidamente productos increíbles mientras mantienen la integridad de la marca. Esto permite a los equipos de productos enfocarse verdaderamente en la experiencia holística del usuario en lugar de en las cosas pequeñas.

Para los diseñadores de productos e ingenieros de desarrollo, un sistema de diseño agiliza la colaboración, elimina la redundancia y reduce significativamente el tiempo dedicado tanto al diseño como al desarrollo, sin mencionar las pruebas y aprobaciones.

¿Cuáles son los beneficios de un sistema de diseño?

Consistencia e integridad de la marca

Un sistema de diseño ayuda a crear una experiencia de usuario consistente en todas las plataformas. Por ejemplo, al crear una página web, un desarrollador no tiene que pensar: "este botón es #005DAB fondo, fuente DIN Pro Bold de 15 px y altura de 50 px." En cambio, el desarrollador ya sabe que este es un “botón principal”, un componente preexistente que ya se está utilizando en varias páginas y que se puede implementar fácilmente donde sea necesario.

El sistema aprobado también ayuda a mantener la integridad de la marca no solo dentro de una organización, sino también cuando se trabaja con proveedores y contratistas. Al compartir el sistema de diseño y la documentación, los proveedores, contratistas y nuevos empleados pueden ponerse al día rápidamente sobre nuestros estilos, patrones y procesos.

Comunicación y colaboración

Un sistema de diseño establece un vocabulario compartido con el que tanto un diseñador como un desarrollador están familiarizados. En lugar de referirse a un botón aleatorio en una página web como un “botón blanco pequeño con un contorno azul”, dicen el “botón secundario pequeño” e instantáneamente tienen un entendimiento mutuo.

Este lenguaje común refuerza la coherencia, cultiva una colaboración más efectiva y fomenta una producción más rápida, lo que a su vez genera confianza con los usuarios. Además, un sistema de diseño alienta la colaboración y las contribuciones de roles y equipos interfuncionales.

Proceso más rápido

Un sistema de diseño proporciona a los diseñadores de productos un conjunto de elementos y componentes reutilizables en un solo archivo de diseño.

En GM Financial, utilizamos Adobe XD para nuestra biblioteca de componentes de interfaz de usuario (UI). Esto contiene todos nuestros estilos (color, tipografía, iconos, etc.) y nuestros componentes (alertas, banners, títulos de página, elementos de formulario, etc.), por ejemplo. Todos los diseñadores de productos tienen acceso a este archivo y pueden incorporar componentes y estilos reutilizables de manera fácil y rápida en su propio archivo de diseño para usarlos y adaptarlos según sea necesario para cada proyecto.

Un sistema de diseño también proporciona a los ingenieros de desarrollo componentes reutilizables de Adobe Experience Manager (AEM) y una biblioteca de interfaz de usuario diseñada para trabajar con sistemas de gestión de contenido de una manera fácil de usar y dinámica. La documentación exhaustiva permite a los miembros del equipo centrarse en la experiencia general del usuario.

¿Qué incluye un sistema de diseño?

Un sistema de diseño bien establecido se puede dividir en algunas secciones fáciles de entender. Estas secciones generalmente incluyen lo siguiente:

• Marca
  Una marca refleja quién es usted, la promesa de su marca, su identidad visual y su voz. La marca de GM Financial será diferente de la suya. Es importante descubrir qué significa la "marca" para su empresa al crear un sistema de diseño.
• Fundamentos
  Las bases son los elementos visuales que establecen el tono para el resto de un sistema de diseño. Esto generalmente incluye documentación sobre color, tipografía, diseño e iconografía.
• Contenido
  Contamos con un equipo de contenido que brinda orientación sobre nuestra voz, tono, gramática y estilo de escritura.
• Componentes
  Los componentes son los bloques reutilizables de cualquier sistema de diseño. Cada componente ha sido creado intencionalmente y satisface una necesidad específica de IU.
• Patrones
  Los patrones son combinaciones reutilizables de componentes que resuelven problemas comunes del usuario.

¿Cuáles son ejemplos de sistemas de diseño?

Los sistemas de diseño requieren mucho tiempo y energía para desarrollarse y evangelizarse por completo. Al igual que con todos los productos, un sistema de diseño tiene sus propios trabajos pendientes y procesos y se construye de manera iterativa.

Continuamos desarrollando el sistema de diseño de GM Financial, pero hay muchas compañías que han hecho públicos sus sistemas para que usted los revise.

Diseño del material: Este es uno de los sistemas más conocidos. Diseño de materiales es un lenguaje de diseño desarrollado y utilizado por Google.

Sistema de diseño de Atlassian: Uno de los sistemas de diseño más completos del mercado utilizado en productos reales fabricados por Atlassian.

Sistema de diseño de carbono: Carbon es el sistema de diseño de código abierto de IBM para productos y experiencias digitales.

Pautas de la interfaz humana: El sistema de diseño de Apple para todas las plataformas de Apple.

Pensamientos finales

Los sistemas de diseño son una parte crucial de los ecosistemas de tecnología y diseño. Mantienen a todos en la misma sintonía, mejoran la experiencia del usuario a través de la consistencia y el uso de patrones comprobados, y mejoran la eficiencia del flujo de trabajo.

En GM Financial, nuestro sistema de diseño se esfuerza por ser un acelerador en el proceso de crear cualquier interfaz de usuario. Nuestro objetivo es crear alineación y eficiencia en todos los equipos de productos ágiles. Cuanto más integrado esté nuestro sistema con los flujos de trabajo de nuestro equipo, más efectivo será.

By Taylor Crabtree, GM Financial

Taylor Crabtree likes to focus her writing talents on community engagement efforts. On the weekends, you’ll probably find her outside playing tennis or taking her Newfoundland for a car ride.