Diseño de app
Transporte ferroviario, movilidad y producto digital
Adif—InterfazdeApp
Diseño de interfaz para la app de Adif desarrollada por Elecnor Deimos: aplicación de identidad visual corporativa, UX/UI móvil y producción de assets finales
Cliente
Elecnor Deimos / Adif
Año
2014
Sector
Transporte ferroviario, movilidad y producto digital
Lugar
Madrid
Categorías
Servicios
Contexto y reto
Trabajar sobre el sistema visual de una organización como Adif exige precisión y criterio. El cliente no llegaba con una pizarra en blanco: había colores, proporciones, iconos, normas de uso y documentación gráfica que debían respetarse con exactitud. Nuestro trabajo empezaba donde acaba la identidad corporativa y comenzaba la experiencia de usuario.
El reto tenía varias dimensiones:
- interpretar el sistema visual existente y trasladarlo a interfaz móvil sin distorsiones ni improvisaciones
- diseñar una experiencia clara y funcional para un entorno de uso técnico y operativo
- resolver pantallas complejas —búsquedas, resultados, avisos, estados, navegación— manteniendo coherencia visual en todo el recorrido
- producir assets finales con la precisión que requiere la implementación en la plataforma
- trabajar dentro de los márgenes del sistema corporativo sin limitar la calidad de la interfaz
Enfoque estratégico
Cuando la identidad ya está definida, el trabajo de diseño UI se convierte en un ejercicio de precisión y coherencia. No se trata de ser creativo en el sentido tradicional, sino de tomar decisiones correctas: qué color va en qué estado, cómo escala la tipografía en pantallas pequeñas, qué icono comunica mejor cada acción dentro del lenguaje visual ya establecido.
Planteamos el proyecto desde dos principios:
- fidelidad al sistema corporativo como punto de partida, no como limitación
- claridad funcional en cada pantalla como criterio de decisión
La interfaz debía verse como parte de Adif, no como un producto ajeno integrado a la fuerza. Eso requirió asimilar la documentación gráfica a fondo antes de diseñar la primera pantalla.
Alcance del trabajo
Análisis y asimilación del sistema corporativo
- lectura y aplicación de normas gráficas de Adif
- análisis de paleta cromática, iconografía y criterios visuales
- interpretación del sistema para su traslado a entorno móvil
- alineación con la documentación técnica entregada por Elecnor Deimos
Diseño de interfaz UI
- diseño de pantallas principales y flujos de navegación
- jerarquía visual adaptada a resoluciones y densidades de pantalla móvil
- diseño de estados: activo, inactivo, error, carga, vacío
- pantallas de búsqueda y resultados
- avisos, notificaciones y mensajes del sistema
- componentes reutilizables alineados con el lenguaje visual corporativo
- revisión de coherencia visual entre pantallas
Producción de assets
- exportación y preparación de assets para el equipo de desarrollo
- iconos, botones, fondos y elementos gráficos en densidades múltiples (mdpi, hdpi, xhdpi, xxhdpi)
- especificaciones técnicas para implementación
- entrega documentada y ordenada para el equipo de desarrollo de Elecnor Deimos
Diseño de interfaz
La app ELCANO manejaba información ferroviaria operativa: búsquedas, resultados, avisos, navegación entre secciones y estados del sistema. Ese contenido exigía interfaces claras, legibles en distintas condiciones de luz y capaces de comunicar prioridades sin ambigüedad.
Diseñamos cada pantalla pensando en el contexto de uso: movilidad, información técnica, toma de decisiones rápida. La jerarquía visual fue el principal instrumento de diseño: qué va primero, qué puede esperar, qué requiere acción inmediata.
Los estados fueron una parte crítica del trabajo. Una app operativa necesita comunicar bien cuando algo falla, cuando hay resultados vacíos, cuando el sistema carga o cuando una acción no está disponible. Cada uno de esos estados se diseñó con el mismo rigor que las pantallas principales.
Producción de assets
La entrega de la app no termina en los mockups. Los assets tienen que llegar al equipo de desarrollo organizados, nombrados correctamente y disponibles en todas las densidades de pantalla necesarias.
Preparamos la exportación completa: iconos, elementos gráficos, fondos y componentes visuales en densidades mdpi, hdpi, xhdpi y xxhdpi, con la nomenclatura y estructura esperada por el equipo de desarrollo de Elecnor Deimos. La entrega fue documentada para facilitar la implementación y reducir la fricción entre diseño y desarrollo.
Resultado y transformación conseguida
El proyecto entregó a Elecnor Deimos una interfaz coherente, técnicamente preparada y alineada con el sistema visual corporativo de Adif. La app pudo implementarse con assets completos, especificaciones claras y un diseño que respeta la identidad de la organización sin sacrificar la usabilidad.
La contribución de SIMA en este proyecto fue concreta y ejecutable:
interpretación del sistema corporativo y traslado a entorno móvil
diseño de pantallas, flujos y estados con coherencia visual
producción de assets finales listos para implementación
entrega ordenada y documentada para el equipo de desarrollo
Desarrollo visual del proyecto
La identidad gráfica de Adif tiene un carácter institucional y técnico muy definido. Colores sólidos, paleta verde como eje cromático, tipografía funcional y una iconografía con criterio de uso riguroso. Trasladar ese sistema a la app exigió tomar decisiones sobre cómo se comporta la paleta en pantalla, cómo se adaptan los iconos corporativos a pequeños formatos táctiles y cómo se mantiene la coherencia visual cuando la interfaz cambia de estado.
El resultado respeta el sistema de origen sin convertirse en un catálogo plano de normas aplicadas mecánicamente. Cada pantalla funciona como un elemento del conjunto: reconocible como parte de Adif, usable como parte de una app real.
Guía de color
Colores primarios
Verde Adif UI
#86a20c
Pantone 377 C (aprox.)
Verde Operativo
#00653C
Pantone 349 C (aprox.)
Verde Acción
#71973C
Pantone 377 C (aprox.)
Colores secundarios
Azul Ferroviario
#002D35
Pantone 5463 C (aprox.)
Verde Profundo
#1A4149
Pantone 5463 C (aprox.)
Línea Técnica
#33575D
Pantone 5473 C (aprox.)
Gris Interfaz
#4A4A4A
Pantone 446 C (aprox.)
Niebla UI
#F1F1F1
Pantone Cool Gray 1 C (aprox.)
Aprendizaje o lectura estratégica
Trabajar sobre una identidad corporativa establecida es un ejercicio diferente al de construir una marca desde cero. Exige leer bien el sistema, entender sus límites reales y saber dónde hay margen para tomar decisiones propias. La creatividad aquí no está en redefinir la paleta, sino en saber aplicarla con precisión donde importa.
Para Adif, cada decisión de interfaz tenía que justificarse dentro del sistema. Esa restricción, lejos de ser un obstáculo, define la calidad del resultado: una app que se reconoce como parte de la organización, que funciona bien y que el equipo de desarrollo puede implementar sin ambigüedad. Eso es diseño de interfaz bien hecho.
Más proyectos
