Un MVP de Design System centrado en foundations, tokens, componentes clave y documentación para resolver inconsistencias, mejorar escalabilidad y facilitar decisiones compartidas entre diseño y desarrollo.
El proyecto partía de analizar una marca existente, detectar problemas de consistencia y diseñar una propuesta de sistema de diseño que ayudase a escalar decisiones visuales y funcionales.
El equipo eligió Ryanair porque su ecosistema digital ofrecía una oportunidad clara: una marca muy reconocible, con alto volumen de uso, pero con inconsistencias visuales y de experiencia que podían mejorarse mediante un sistema más estructurado.
Participé en la definición global del sistema, defendí la elección de Inter como tipografía base, diseñé componentes como Lists, Cards y Navigation, y fui responsable de construir y presentar la documentación completa del sistema.
Mi aportación principal estuvo en convertir decisiones visuales en reglas documentadas y reutilizables.
La elección de Ryanair no fue casual. Tiene una identidad visual muy reconocible, pero su experiencia digital presentaba margen para mejorar consistencia, jerarquía, accesibilidad y escalabilidad. No se trataba de rediseñar "por gusto", sino de construir una lógica compartida para tomar decisiones visuales y funcionales.
Antes de diseñar componentes, el equipo definió principios para orientar decisiones. Esta parte es clave porque separa un Design System de un UI Kit.
Mejorar legibilidad, contraste y facilidad de uso.
Reducir fricción en una experiencia con alto volumen transaccional.
Jerarquía visual, mensajes comprensibles y componentes predecibles.
Unificar patrones para evitar decisiones aisladas en cada pantalla.
Mantener reconocimiento visual sin reproducir incoherencias.
Permitir que nuevas pantallas crezcan sobre reglas comunes.
El sistema conservó los códigos reconocibles de Ryanair — azul y amarillo —, pero ordenándolos como roles: estructura, navegación, acciones, CTA y estados. El color dejó de ser decorativo para convertirse en una herramienta funcional.
Defendí el uso de Inter como tipografía base por su legibilidad, neutralidad, altura x elevada y buen comportamiento en interfaces digitales.
Los tokens ayudaban a traducir decisiones de diseño en reglas reutilizables: colores, espaciados, estados, tamaños y comportamientos. Esta parte conecta diseño con desarrollo.
| Token | Función |
|---|---|
| Color | Unificar roles visuales: primary, CTA, neutral, semantic. |
| Spacing | Mantener proporción y ritmo entre componentes. |
| Typography | Controlar jerarquías, tamaños y estilos textuales. |
| States | Garantizar comportamiento consistente en hover, pressed, disabled y focus. |
Mi trabajo se centró especialmente en estos tres componentes. No son componentes decorativos. Afectan directamente a cómo se organiza, escanea y recorre la información en un producto como Ryanair.
Componentes para organizar información de forma escaneable, útil en interfaces con múltiples opciones o resultados.
Patrones reutilizables para mostrar información de vuelos, promociones o bloques destacados.
Componente estructural para orientar al usuario y mantener consistencia en diferentes contextos.
Un componente no está terminado cuando se ve bien en reposo. Tiene que comunicar respuesta, disponibilidad, foco y accesibilidad en diferentes momentos de uso.
Estado base del componente.
Respuesta visual previa a la acción.
Confirmación de interacción.
Accesibilidad y navegación por teclado.
Mi responsabilidad más importante dentro de Liffey fue construir la documentación completa del sistema. Un Design System solo funciona si otras personas pueden entenderlo, usarlo y mantenerlo.
La documentación convertía decisiones visuales en reglas claras: qué usar, cuándo usarlo, por qué existe y cómo se comporta.
| Bloque | Función |
|---|---|
| Foundations | Explicar color, tipografía, spacing, breakpoints y grid. |
| Componentes | Definir anatomía, uso, variantes y estados. |
| Decisiones de diseño | Justificar elecciones para evitar arbitrariedad. |
| Relación diseño-desarrollo | Facilitar implementación consistente. |
| Decisión | Justificación |
|---|---|
| Inter como tipografía base. | Mejor legibilidad, neutralidad y consistencia en interfaces digitales. |
| Azul como color estructural. | Mantener reconocimiento de marca y jerarquía de navegación. |
| Amarillo para CTA. | Conservar el código visual de conversión de Ryanair. |
| Componentes documentados. | Facilitar adopción por otros diseñadores y desarrollo. |
| Estados definidos. | Mejorar accesibilidad, feedback y consistencia de interacción. |
Un Design System es una forma compartida de tomar decisiones y mantener coherencia a escala.
Si un componente no se entiende, no se adopta. Documentar es diseñar la transferencia del sistema.
La diferencia entre gusto personal y diseño profesional está en argumentar por qué una elección funciona.
Color, tipografía, spacing y breakpoints son decisiones estructurales, no detalles visuales.
Siguiente proyecto
SACYL Conecta →