El proyecto
Esta web app permite que el atleta busque su resultado después de haber participado en una carrera, ya que la mayoría de carreras facilitan la información en un listado PDF. Consultar el resultado se convierte en una odisea debido a que muchas competiciones no solo existe la clasificación general, sino un sin fin de categorías. Con esta idea resolvemos la compleja búsqueda del resultado.
El punto de partida: un fichero JSON con los datos de la carrera.
El reto de diseño
El objetivo no era trasladar los distintos listados del documento PDF a una web digital sin más. Necesitabamos añadir accesibilidad y usabilidad. No queríamos repetir la experiencia de buscarte en una web al igual que lo hacemos en un PDF. Esto iba más hayá, esto iba de sentir al atleta participe en todo momento, no solo el día de la competición. Y darle importancia y valor a su resultado aunque no fuese el primero, no se trata de ganar, sino de participar, cada atleta compite con sigo mismo, terminar una carrera sea la distancia que sea ya es un mérito, y esta aplicación web quiere darle el protagonismo que se merece.
¿Cómo presentas un resultado de carrera de forma que sea significativo para quien corrió, no solo para quien organiza?
La respuesta estaba en cambiar la jerarquía de la información. En una clasificación estándar, el protagonista es la posición. Aquí el protagonista es el corredor: su dorsal, su nombre, su tiempo.
Decisiones de diseño
Estilo editorial sobre dashboard — Composición abierta, tipografía protagonista, sin tarjetas ni bordes que fragmenten la lectura. Un resultado de carrera puede tener la misma presencia visual que una página editorial.
El dorsal ghosted como elemento emocional — El número gigante en el fondo no es decorativo: es el dorsal que el corredor llevó puesto ese día. Más carga personal que la posición en el ranking. La posición dice dónde quedaste entre todos; el dorsal dice quién eras tú en esa carrera.
Naranja solo en logros, no en mediciones — El color de acento (#FF6B35) aparece únicamente en las posiciones (puesto general, puesto por categoría). El tiempo es una medición neutra; colorearlo implicaría un juicio de valor que no corresponde al diseño hacer.
Hero oscuro, resultado en blanco puro — La pantalla de búsqueda es oscura e inmersiva (foto de fondo, overlay, buscador con efecto glass). La pantalla de resultado rompe a blanco puro: el cambio de registro refuerza que ya llegaste, que encontraste lo que buscabas.
Sistema de diseño
El proyecto incluye una guía de estilos construida en Pencil con tokens de color, escala tipográfica y componentes reutilizables. Dos familias tipográficas con roles claros: Bebas Neue para display (titulares, stats, posiciones) e Inter para UI (nombres, labels, tabla de resultados). Los tokens de color están preparados para exportarse directamente a variables CSS.
Pantallas — Desktop
Pantallas — Mobile
Stack técnico
- Vue + Vite + Tailwind
- JSON como fuente de datos
Estado actual
Diseño completado. Desarrollo en curso.