Cada rediseño es un dolor. El equipo pasa meses actualizando la apariencia del producto, y los usuarios siguen quejándose: los botones están «fuera de lugar», los colores «deslumbran» y la accesibilidad se ha «olvidado». Pero hay una receta para crear una interfaz que no se desmorone después de la próxima actualización de estilo y que pase fácilmente la auditoría de accesibilidad (WCAG). Es un sistema de diseño construido para durar.
Por qué el sistema de diseño es más importante que el diseño
Un diseño dura meses, un año como máximo. Un sistema de diseño dura años, idealmente una década.
almacena todos los patrones: desde botones hasta formas complejas;
permite realizar cambios a nivel global, no puntualmente;
hace que los rediseños sean predecibles: el tema cambia, pero la lógica no se rompe.
Sin ella, el producto se convierte en un caos, donde cada página es única y la auditoría de accesibilidad se convierte en un «campo minado».
Sistema de diseño duradero: 3 principios clave
1. Tokens en lugar de caos
Los colores, los márgenes y los tamaños de fuente deben almacenarse como variables (tokens de diseño). Cambia un token y todo el sistema se actualiza. Así, la interfaz de usuario se adapta fácilmente al cambio de marca o al modo oscuro.
2. Componentes en lugar de copiar y pegar
El botón debe ser uno, con una docena de estados, no 20 «botones similares» diferentes. Esto reduce los errores y ahorra tiempo en los rediseños.
3. Accesibilidad predeterminada
Desde el principio, piensa en el contraste, los enfoques, los atributos de aria. Es más barato que arreglar los «puntos ciegos» después de las quejas de los usuarios o de una auditoría.
Cómo se relacionan el sistema de diseño y la accesibilidad
Si el sistema está construido correctamente, la accesibilidad se «integra» en cada componente:
✅ Los botones ya tienen estilos de enfoque.
✅ Los formularios están marcados previamente para los lectores de pantalla.
✅ Los colores pasan la prueba de contraste.
Esto significa que cuando llegue la auditoría, no tendrás que corregir 1000 páginas, sino un par de componentes.
Un ejemplo vivo
El banco condicional hace un rediseño:
En el sistema antiguo, hay que pasar 200 pantallas manualmente.
En el sistema de diseño, basta con actualizar el tema y los botones se «repintan» automáticamente.
Como resultado: 3 rediseños en 5 años, y la interfaz de usuario sigue siendo consistente, accesible y «viva».
Minilista de verificación para tu equipo
Todos los colores y tamaños se muestran en tokens
Los componentes son reutilizables y están documentados
La verificación de contraste está integrada en CI/CD
Hay documentación sobre accesibilidad para diseñadores y desarrolladores
Todos los rediseños comienzan con la actualización de tokens, no con la «búsqueda y reemplazo manual»
En el anexo Kodik hay cursos de programación geniales. Todo se presenta en un lenguaje sencillo, con práctica y proyectos reales.
Y en nuestro Canal de Telegram discutimos las últimas noticias del mundo del desarrollo, compartimos ideas y memes, debatimos sobre las tendencias y crecemos juntos en la profesión. ¡Únete, será interesante! 🚀