Los beneficios de crear un sistema de diseño

Las guías de estilo han existido durante años y siempre han sido importantes para la identidad visual de una empresa, pero el cambio de nombre del término ha dado una nueva dimensión a todo el concepto.

En los viejos tiempos, un diseñador de interfaz de usuario crearía una interpretación flexible de los conceptos básicos. Una descripción general de los colores, las fuentes, los botones y, posiblemente, el estilo de los íconos y se guardaría en un disco duro, solo para abrirse cuando se envían a agencias externas que necesitan un vistazo a una dirección visual para un próximo proyecto , o nuevos iniciadores para el equipo de diseño, pero rara vez se le da mucha importancia a los diseñadores internos que lo usan.

La mayor riqueza de conocimiento generalmente se alojó firmemente en la vanguardia del cerebro de los diseñadores. Esto significaría un aluvión constante de problemas en torno a tratar de recordar si un cierto patrón visual se utilizó antes en alguna parte. Esto, 9 de cada 10 veces, terminaría en un caos de inconsistencia.

En los últimos años, se ha actualizado la guía de estilo, y con la introducción del concepto de un Sistema de Diseño, o un Lenguaje de Diseño. Con esto, viene un enfoque completamente nuevo que puede afectar épicamente cómo un equipo de producto aborda el diseño en su conjunto. Con un sistema sólido, consistente, bien explicado y pensado, el aspecto visual de crear un diseño se vuelve totalmente modular. Productos como Craft by Invision o Brand.ai han hecho que la fase de diseño visual casi arrastre y suelte en cierta medida. Crear seguridad sabiendo que los elementos que está utilizando son consistentes con todos los demás diseñadores del equipo. Eliminan cualquier animosidad de la fase de diseño visual, casi a un nivel en el que la creación de prototipos de baja fidelidad es cosa del pasado.

“Los estilos van y vienen. El buen diseño es un lenguaje, no un estilo. ”–Massimo Vignelli

No voy a usar este artículo como una forma de explicar cómo crear exactamente un sistema de diseño. Ya he escrito un artículo sobre eso: Crear un lenguaje de sistema de diseño. Esta es más una discusión unidireccional sobre cómo un equipo de diseño puede beneficiarse de invertir en un sistema de diseño.

Una introducción a nuestro sistema de diseño - QUIK

En los últimos años, he estado muy involucrado en la creación de sistemas de diseño en varias compañías, desde nuevas empresas hasta organizaciones bien establecidas. Mi última empresa ha sido crear nuestro sistema de diseño para Qstream.

Desde muy temprano en mi tiempo en Qstream, me di cuenta de lo esencial que era introducir un sistema nuevo y funcional a nuestro equipo de diseño lo más rápido posible. Las inconsistencias y las malas elecciones de diseño plagaron el producto y, a medida que el producto y el equipo de diseño se expandieron, fue vital estabilizar el barco y crear un lenguaje que cada diseñador pudiera entender por completo.

Y con eso, comenzamos a crear nuestro nuevo sistema de diseño, llamado QUIK - Qstream User Interface Kit.

Paso 1: inconsistencias

Una vez más, no voy a profundizar demasiado en el proceso de cómo creamos el sistema, pero daré una breve explicación de cómo salimos de la maleza.

Lo primero que debía hacer era hacer una auditoría total de los componentes visuales dentro del producto. Brad Frost ha elaborado un gran artículo sobre cómo hacer una auditoría de UI si está interesado.

Esta puede ser una tarea horrible, larga y monótona, pero es muy beneficiosa. A) le permite obtener una comprensión total de dónde se encuentran las principales inconsistencias b) le brinda una visión general realmente buena de qué elementos son importantes y se usan de manera consistente en todo el producto c) le brinda un curso intensivo sobre cómo funciona exactamente el producto yd ) le permite mostrar a la empresa en general las fragilidades del sistema visual existente y exactamente por qué se necesita un nuevo sistema de diseño coherente.

Un fragmento de nuestra auditoría de IU que supera la inconsistencia en la IU de las plataformas.

Paso 2: crear los elementos

Desglosamos nuestro sistema en 3 entidades diferentes.

  1. Marca: la identidad de marca de un producto se compone de elementos clave que crean la identidad visual. Los colores, la tipografía y la iconografía son fundamentales para cualquier plataforma.
  2. Elementos: los elementos están formados por las partes reutilizables más pequeñas del sistema. Estos elementos se reciclan constantemente en todas las áreas del sistema. (Botones, entradas)
  3. Componentes: un componente es una colección de elementos que se usan comúnmente uno junto al otro para identificar un patrón común dentro de un flujo. (Alertas, mesas, cartas, etc.)

El siguiente paso es priorizar, en función de la auditoría de la interfaz de usuario, qué elementos se utilizan con mayor frecuencia en todo el producto. Estas serán las primeras áreas que abordará primero.

Una vez que identificamos los elementos clave para el sistema, era hora de comenzar a crear el estilo y las reglas en torno a cada área. Primero abordamos los colores, la tipografía, el espaciado y la iconografía general antes de pasar a los elementos más formados, como botones, entradas, etc.

Una descripción general de todo nuestro sistema hasta la fecha.

Obviamente, cuanto más profundo es el sistema, menos frecuentes son los elementos que se usan, pero todo es parte del crecimiento del sistema y hacer que el lenguaje general sea lo más consistente posible en todos los aspectos del producto.

(También tenemos otro proyecto en curso en torno a nuestro estilo de ilustración, pero lo guardaré para otro artículo, puede ver más aquí)

Una muestra de nuestro estilo ilustrativo utilizado en toda la plataforma.

Paso 3: Implementación

Actualmente estamos en esta fase. Para ser sincero, probablemente nunca saldremos de esta fase. Una cosa que debes darte cuenta antes de asumir un desafío como este es que nunca terminará. Estás desarrollando un producto, no es un proyecto que finalmente terminará. Estará en constante evolución y crecimiento.

Todo lo que tiene que hacer es echar un vistazo a cómo los equipos de productos se han reestructurado para atender a los equipos del sistema de diseño, muchos optan por diseñadores centrados únicamente en trabajar directamente en su sistema de diseño, nada más. El sistema se ha convertido en una parte integral de un núcleo de productos. Cuando se crea correctamente, un sistema de diseño crea enfoque, claridad y confianza y, a su vez, creará consistencia en todo el producto y acelerará el giro del desarrollo del producto. ¡Qué no se podría amar!

"Un sistema de diseño no es un proyecto. Es un producto que sirve productos ". - Nathan Curtis

Atar los sistemas

Crear un sistema de diseño que funcione en todo el producto es una cosa. También estamos en medio de la creación de directrices de marca, así como delinear nuestros principios de diseño. (Nuevamente, más artículos a seguir sobre nuestro proceso).

Creemos que es clave crear una base sólida en todos los aspectos del diseño antes de avanzar, ya que sin el andamiaje adecuado en su lugar, causará problemas en el futuro. Crear un conjunto sólido de pautas y principios ayudará a guiarnos en la dirección correcta cuando comencemos a ampliar.

El plan, una vez que tenemos QUIK a un nivel que consideramos consumible, es crear un Playbook que albergue las características clave de la personalidad y entidad centrales de nuestros productos.

  • Pautas de la marca: un conjunto de pautas que presentará la personalidad de nuestra marca, así como también describirá características clave como el tono de voz, los colores, las restricciones del logotipo, etc.
  • QUIK: un sistema reunido para unir nuestras creencias y metodologías de diseño en nuestra plataforma en un lugar central.
  • Principios de diseño: el objetivo de los principios es garantizar que permanezcamos anclados en todo momento a lo que es realmente importante para Qstream y nuestros clientes. Nos ayudarán a tomar decisiones que se alineen con sus objetivos.

Avanzando

Nos esforzaremos por crear coherencia en nuestra plataforma. Todavía tenemos un largo camino por recorrer. Todos, desde todos los ángulos del equipo del producto, son plenamente conscientes de que este es un desafío monstruoso, pero también somos igualmente conscientes de su importancia para la escalabilidad del producto.

Si desea hablarme sobre el tema, o si solo quiere disparar la brisa, no dude en ponerse en contacto conmigo aquí:

// Twitter // Dribbble // Behance // Sitio de cartera //