Democracy Tracker · Case study 04 · 2025 · Sitio institucional internacional
Datos densos que se leen de un vistazo
El Democracy Tracker es el sitio donde International IDEA publica, mes a mes, cómo cambia la democracia en 173 países. Lo usan gobiernos, organizaciones, investigadores y periodistas de todo el mundo. Está construido sobre Drupal, con una interfaz hecha a medida de punta a punta.
- Rol
- Desarrollador frontend · UI a medida
- Stack
- Drupal
- JavaScript
- CSS
Mi parte
Lo que hice yo
- Toda la UI del sitio, construida a medida sobre Drupal sin depender de un tema prearmado
- Las animaciones y transiciones, del acordeón de reportes al radar que se redibuja con el tiempo
- Un responsive trabajado componente por componente, de la grilla hexagonal a los gráficos
- Un sistema visual coherente, con el hexágono como idioma en íconos, filtros y decoración
La portada
Un mapa del mundo que se entiende en segundos
La home resume el mes entero. Un mapa interactivo alterna entre elecciones y evaluaciones de impacto, y los tipos de reporte se abren al pasar el mouse para no saturar la pantalla.
La ficha de cada país
Cincuenta años de datos, sin abrumar
Cada país tiene series desde 1975. Los gráficos muestran el valor actual en grande y el dato de cada año al pasar el mouse, y un radar de 16 factores se recorre con un slider temporal.
En el celular
La misma experiencia en cualquier pantalla
Nada se esconde en mobile. La grilla hexagonal pasa de 10 a 5 columnas sin perder el encastre, el resaltado del hero se recalcula por línea y los gráficos se apilan.
El desafío
Una interfaz única sobre una plataforma estándar
El desafío fue llevar un diseño completamente propio, con animaciones, mapas y gráficos, a una plataforma como Drupal, que empuja hacia lo genérico. Cada componente se construyó a medida y se ajustó pantalla por pantalla, para que un público exigente e internacional lea datos complejos rápido y sin perderse.