Design tokens para sistemas multiplataforma
Puntos clave para mantener una interfaz uniforme a la vez que adaptable entre plataformas
¿Sabías que Spotify se puede usar en 45 plataformas? Desde televisiones a relojes, pasando por frigoríficos, gafas de realidad aumentada, interfaces de voz...
Aunque la mayoría de nosotros no lleguemos a la misma complejidad que Spotify, es bastante común que nuestras interfaces deban adaptarse a varios tipos de dispositivos y plataformas.
El enfoque en el diseño multiplataforma es uno de los grandes desafíos de los equipos, que a través de una arquitectura de tokens bien estructurada, será más fácil de manejar.
En el post de hoy veremos algunos puntos claves a tener en cuenta a la hora de crear esta arquitectura de tokens para diferentes plataformas:
Los design tokens deben ser agnósticos para ser reutilizables
Diseñar una arquitectura de tokens multiplataforma implica encontrar el equilibrio entre respetar las especificaciones de cada plataforma y mantener la coherencia visual de la interfaz.
Cada plataforma tiene sus particularidades, pero lo fundamental es que la marca y la experiencia del usuario sean consistentes en todos los dispositivos.
Los tokens de diseño, que almacenan nuestras decisiones, son esenciales para lograr esta coherencia. Al aplicar los mismos tokens en distintas plataformas, aseguramos una experiencia uniforme.
Un aspecto crucial es crear una nomenclatura agnóstica, definiendo tokens de manera que no dependan de la terminología específica de ninguna plataforma.
Por ejemplo, para definir el color de fondo de un botón cuando está presionado, podríamos usar: --button-color-background-active.
De esta manera, evitamos referirnos a términos específicos como onClick de la web, highlighted en iOS o pressed en Android, garantizando que los tokens sean aplicables en cualquier contexto.
La arquitectura debe escalar según las especificaciones de cada plataforma
Cada plataforma puede tener sus propias reglas y características que, si conocemos y somos conscientes, puede hacer que nuestra interfaz se adapte mucho mejor y sea más usable para los usuarios de ese dispositivo.
Por ejemplo, plataformas como iOS o Android marcan sus propias reglas, que muchas aplicaciones siguen como estándares, asegurando una experiencia similar a la del propio dispositivo.
En el ámbito web, también tendremos que ser conscientes que la interfaz se adaptará al tamaño de la pantalla. En pantallas de escritorio, los textos tienden a ser más grandes y hay más espacio entre los elementos. En dispositivos móviles, los textos son más pequeños y los espacios más reducidos.
Por esto, nuestra arquitectura de tokens debe ser escalable. Debe permitir que se puedan adaptar y crear nuevos para cubrir casos específicos de cada plataforma.
Un ejemplo podría ser el efecto hover en Web. Podriamos crear nuevos tokens para estos casos específicos que no tienen por qué trasladarse a otras plataformas.
Evita perder la uniformidad en la construcción
Cuando construimos en diferentes plataformas, con diferentes equipos implicados, uno de los principales problemas puede ser la desalineación en las decisiones.
Un cúmulo de pequeñas decisiones que se toman en cada plataforma de forma específica puede suponer grandes diferencias entre las interfaces.
Será clave mantener la comunicación entre los equipos y priorizar el que las decisiones se extrapolen entre plataformas, por mínima que sea.
Por ejemplo, si cambiamos el padding de un botón en Web, tendremos que asegurarnos que el cambio también se realiza en iOS y Android.
Conclusiones
Crear una arquitectura de tokens para sistemas multiplataforma puede suponer un gran reto, pero unos puntos claves para tener en cuenta son:
Crea tokens agnósticos que permitan ser reutilizados: Evita que dependan de la terminología específica de alguna plataforma.
Escala los tokens según las necesidades de las plataformas: Adapta los tokens a la plataforma creando nuevos si son necesarios.
Protege la uniformidad en las decisiones y la construcción: Mantén una comunicación entre los equipos de plataformas para evitar que haya desalineamientos.
En resumen, una buena arquitectura de tokens no solo facilita la adaptabilidad de la interfaz en múltiples plataformas, sino que también asegura que la marca y la experiencia del usuario sean coherentes y reconocibles en todos los dispositivos.
Espero que os haya gustado y como siempre, no olvidéis de suscribiros si no lo estáis y dejarnos un me gusta!