Clase 5 – Design systems

Un sistema de diseño es un conjunto de estándares de diseño digital y de marca que se utiliza para administrar el diseño a escala con objetivo de eliminar la redundancia y potenciar la coherencia visual en diferentes páginas y canales.

Estos estándares se documentan en plataformas como zeroheight, confluence o frontify.

Un sistema de diseño está compuesto por branding, valores y principios y componentes de las apps. 

Este se compone por

BRANDING

Valores y Principios

Componentes

Código o Tokens

Branding

El branding se compone de los elementos tradicionales de diseño, pero contemplando el ámbito digital y las buenas prácticas de este. Elementos a considerar:

  • Logotipo y sus aplicaciones
  • Arquetipo de marca
  • Paleta de colores
  • Tipografía
  • Texturas 
  • Imagenes o ilustraciones
  • Iconografía
  • Voz y tono

Valores y principios

Los valores y principios son el corazón de la marca. Explican la razón de ser de la marca, y la misión. Debemos incluir en el Design System:

  • Principios y valores
  • Misión
  • Objetivos

Componentes

Los componentes son los elementos de interfaz de usuario como elementos de formulario, títulos, párrafos, labels, input y botones, etc.

El objetivo de esto, es que en vez de crear un elemento UI para cada ocasión en que se necesite se reutiliza el ya diseñado, generando consistencia a través de la app y también entre apps.

Si estamos trabajando en un rediseño de aplicación es necesario hace un inventario UI para poder determinar cuantos elementos tiene la interfaz y deben ser normados. Luego de esto, se debe trabajar en formato Atomic Design. Si la aplicación es nueva se puede partir por Atomic Design desde el comienzo.

Por qué usar un design system?

  • El trabajo de diseño (y desarrollo) se puede escalar rápidamente.
  • Alivia el trabajo de los recursos de diseño para enfocarse en problemas más grandes y complejos.
  • Crea un lenguaje unificado dentro entre los equipos de desarrollo y diseño.
  • Crea coherencia visual entre productos, canales y departamentos.
  • Puede servir como herramienta educativa y de referencia para diseñadores nuevos y junior.

Créditos: Soledad Moris (profesora Bootcamp Diseño UX/UI Talento Para Chile)

Conclusión

Es importante crear un sistema de diseño antes de comenzar a crear el sitio web, otorgándole la identidad de nuestra marca, nuestros valores, voz y tono, etc. Esto nos permitirá tener páginas coherente entre si, formando un sitio con un diseño sólido, facilitándole al usuario el aprendizaje, ya que no tiene que aprender un nuevo lenguaje visual cada vez que entre en otra página porque es diferente de la anterior.

Enlaces relacionados

12 arquetipos de jung