Experiencia con Design Systems

Dennis Montes
Jun 8 · 3 min read

Nuestra 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

¿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…

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

¿Porque necesitamos un Design System?

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?

Buscar la fuente de la charla de Dropbox

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.

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.
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 https://bradfrost.com/blog/post/extending-atomic-design/

https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71

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
Design Tokens para Devision Design System
Identificación de Design Tokens

Gracias por tu tiempo ;)

Mis redes: PortfolioTwitter — LinkedinDribbble

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store