Experiencia con Design Systems

¿Que es un Design System?

Design system es un lenguaje de diseño en el que todas las personas involucradas pueden participar, entender y aportar al producto. Con el objetivo de crear un producto escalable, consistente intuitivo.

Que forma parte de un Design System

- Core (Design Tokens)
- Design Guidelines
- Components
- Pages
- Voice & tone, Grammar (El texto de los Buttons en minúsculas)
- Accesibility
- FAQ

Image for post
Image for post

¿Porque necesitamos un Design System?

A medida que el producto avanza el nivel de complejidad aumenta en todo sentido, se pierde el control si no tenemos un design system que nos permita estar en sincronía con el equipo y cumplir con requerimientos, deadlines etc…

Image for post
https://www.youtube.com/watch?v=Hx02SaL_IH0

Claridad

Eliminar la ambigüedad, permite que las personas vean, comprendan y actúen con confianza.

Inseguridad

Entre la multitud de Modals o Pop ups:
¿Cuál opción utilizar?
¿Cuál es la correcta?
¿Siguen las buenas prácticas?

Image for post

Eficiencia

Gracias a componentes ya pre-testeados podremos reutilizarlos en nuevos proyectos permitiendo enfocarse a resolver problemas, evitando desarrollar/diseñar questiones que no aportan valor al producto.

Consistencia

Crear un producto intuitivo gracias a una buena experiencia de usuario consistente en todas las plataformas.

Image for post
Variedad de dispositivos

Beneficios a nivel de negocio

  • Mayor velocidad y reducción de tiempo de comercialización, gracias a bibliotecas de componentes y patrones de navegación documentados, obtenemos un proceso ágil que permite lanzar nuevas versiones más rápidamente sin perder calidad.
  • Interacción con el producto intuitiva, reduciendo tiempo de adaptación y fricción para los nuevos usuarios, gracias a una buena experiencia de usuario y diseño consistente en todas las plataformas.
  • Reducción de tiempo y dinero invertido en desarrollar y diseñar soluciones no reutilizables.
  • Diseño y código limpio, el tiempo invertido en crear un design system solido y claro para todos desde un principio, nos permitirá realizar cambios a medida que el producto escala.
  • Mayor colaboración e intercambio de conocimientos con los equipos que tienen acceso al design system, lo cual permite que todo el equipo este en la misma página para que puedan colaborar y aportar al producto.
  • Otro beneficio es que los nuevos miembros del equipo tendrán un proceso de incorporación mucho más ágil.

Image for post
Impacto de la inversión en diseño — McKinsey Design Index (MDI)

Design Tokens

Un Design Token es una abstracción de una propiedad visual como el color, la fuente, el ancho, animaciónes, etc. Estos valores brutos son independientes de la aplicación y del lenguaje de programación, usar en cualquier plataforma. Artículo recomendado.

Image for post

Tipos de Design Tokens

  • Colors
  • Border Colors
  • Background Colors
  • Shadows
  • Text Colors
  • Animation durations
  • Z-Indexes
  • Media Queries
  • Spacing
  • Sizing
  • Rounded Corners
  • Font Weights
  • Font Sizes
  • Line Heights
  • Font Families

Image for post
Design Tokens para Devision Design System
Image for post
Identificación de Design Tokens

Continue reading

Get in touch

Let’s connect and talk about your project and figure out how to work together or if you just want to chat about design and cars.

Contact me
© 2020 Dennis Montes