Rediseño del frontend del IAF con Angular y componentes DESY

En ARANOVA creemos que la tecnología debe facilitar, no complicar. Por eso, cuando asumimos el reto de ayudar en la renovación de la página web del Instituto Aragonés de Fomento (IAF), sabíamos que no se trataba solo de cambiar su aspecto. Queríamos crear una base sólida, moderna y fácil de mantener, pensada para durar y adaptarse al futuro.

El resultado, tras semanas de trabajo, ha sido el diseño de componentes del frontend, desarrollado en Angular con componentes DESY y Tailwind CSS para construir una capa visual coherente, accesible y alineada con los estándares públicos. ¿El resultado? Una web más rápida, clara y sostenible.

Un rediseño de la web del IAF con tres objetivos claros

El rediseño se centró en tres pilares fundamentales:

• Optimizar la arquitectura de obtención de datos (data fetching)
• Estandarizar y reutilizar componentes de interfaz de usuario.
• Modernizar el diseño visual y mejorar la accesibilidad

A continuación te contamos cómo lo hicimos.

Un nuevo enfoque para los «data services»: patrón factoría y servicios asíncronos

Se partía de un código donde cada componente y página accedía a los datos del backend «a bajo nivel», creando un cliente HTTP y gestionando los observables y las suscripciones en cada uno, lo que generaba lógica duplicada, errores difíciles de detectar y mucho esfuerzo para mantener y/o actualizar los mismos.

Creamos una solución basada en un servicio genérico llamado ClientService<T>, instanciado cuando era necesario a través de una factoría. Este servicio gestiona el acceso, cacheo, paginación, ordenación y filtrado, desde una única clase. También es independiente de Angular, y solo depende de RxJS, lo que facilita su testeo y reutilización.

Gracias a esto, los listados ahora son más rápidos, estables y mucho más fáciles de usar y mantener.

Componentes reutilizables, interfaz más coherente

Otro gran reto era la interfaz. Con el paso del tiempo, muchas páginas habían crecido de forma desordenada: cada listado tenía sus propios filtros, los formularios variaban en estilo, y la home carecía de una estructura clara.

Para solucionarlo, nos apoyamos en las guías de diseño DESY del Gobierno de Aragón, creando una base de componentes reutilizables y simples. También desarrollamos una clase base para encapsular la lógica compartida entre las distintas páginas, ya sean listados, formularios o páginas estáticas.

La nueva home se construye en secciones (cards, banners, accesos rápidos…), que se cargan de forma asíncrona desde el backend. Los formularios también son dinámicos: se generan a partir de esquemas de datos, con validación reactiva y mensajes de error uniformes. Más coherencia, menos código.

Tailwind + DESY = Visualmente moderno, técnicamente sólido

Para renovar el diseño visual, trabajamos con Tailwind CSS, las mismas herramientas que utilizan los componentes DESY. Esta combinación nos permitió:

• Garantizar consistencia visual en toda la interfaz
• Permitir una personalización sencilla por parte del equipo de diseño del IAF
• Asegurar compatibilidad total con Angular, sin conflictos con shhadow DOM o CSS encapsulado
• Incluir la accesibilidad desde el diseño, sin pasos extra
• Optimizar el rendimiento, generando únicamente los estilos realmente utilizados

Dejamos atrás hojas de estilo heredadas y fragmentadas y los conflictos con distintos frameworks CSS y dimos paso a una web moderna, clara y accesible.

Lo que conseguimos con esta nueva web del IAF

Este rediseño no solo transformó el aspecto de la web. También cambió cómo se construye, se mantiene y evoluciona.

Algunos resultados destacados:

• Reducción del 60% del código duplicado en los componentes de listas.
• Mayor rendimiento gracias a un sistema de obtención de datos más eficiente.
• Accesibilidad AA garantizada ( y AAA en muchos casos con atributos «aria»).
• Velocidad de desarrollo incrementada gracias a la reutiliación de componentes y estilos.

Una base para seguir creciendo

Este proyecto demuestra que sí es posible modernizar portales públicos con tecnología actual, sin perder de vista la accesibilidad ni la experiencia de usuario.

En ARANOVA seguimos apostando por frameworks modernos y soluciones abiertas, escalables y pensadas para durar. Porque cuando la tecnología está bien hecha, no solo se ve bien… también se siente mejor.