Caso de estudio — 02

Senderismo en Málaga, en grupo.

Senderista con mochila avanzando por un sendero de roca bajo un cielo con nubes.

PASO - hiking club

Diseñé y programé PASO para reunir en una web toda la información de las rutas que organizo de forma desinteresada para un grupo de senderismo. Antes estaba repartida en mensajes interminables de WhatsApp.

Proyecto personal · Diseño y desarrollo · 2026

Ver web en vivo

/ 01 — El encargo

Toda la ruta,
en un solo sitio.

Organizo rutas por las sierras de Málaga para el grupo. Los datos de cada salida (fecha, punto de encuentro, distancia, desnivel, qué llevar) había que ir a buscarlos entre los mensajes.

PASO la reúne en una web pensada para el móvil, con cuatro objetivos: saber rápido si la ruta es para ti, fiarte de los datos, ir preparado y poder pasársela a alguien sin darle acceso al grupo.

Rol: Diseño UX/UI y desarrollo
Tipo: Proyecto personal
Herramientas: Figma · WordPress · Tailwind v4 · ACF
Año: 2026

Quería dar información más detallada de cada ruta, para que organizarnos fuera más fácil.

/ 02 — El proceso

Del sendero
a la pantalla

01 — Identidad

Señalética de sendero

El amarillo de las marcas PR guía cada acción, el petróleo da profundidad y la piedra es la base clara. Barlow Condensed recuerda los carteles de los caminos, y las marcas de pintura son parte de la interfaz.
02 — Diseño = código

Una pieza, un archivo

Cada componente de Figma es un archivo del tema de WordPress, con los mismos nombres, estados y tokens de Tailwind. Así, lo que ves en Figma es lo que acaba en la web.
03 — Datos reales

El GPX dibuja la ruta

El mapa, el perfil de altitud y las cifras salen del GPX de cada ruta. La previsión del tiempo aparece solo la semana antes, a la hora de salida y en la cima.
04 — Para el grupo

Pensada para el camino

Casi todos la abren en el móvil: el header se aparta al bajar, hay acordeones en lugar de pestañas, y «Añadir al calendario» y «Compartir la ruta» usan el menú del propio móvil.

/ 03 — El sistema

Pocas piezas,
bien usadas.

Tres colores, dos tipografías y un solo botón amarillo por pantalla. El resto de acciones van como enlaces o botones secundarios, para que la principal no compita con nada.

2.071 m

Barlow Condensed · Titulares y cifras

Piedra #F3F3ED
Petróleo #071E25
Amarillo PR #F4C300

Senderismo en Málaga, en grupo

Barlow · Texto, navegación y etiquetas

Principio

Sobre fondo claro, el amarillo no llega al contraste mínimo: ahí pasa a petróleo.

Contraste del amarillo pr

1,5:1 Sobre piedra · solo decorativo
10,4:1 Sobre petróleo · texto normal (AA)

/ 04 — La entrega

Primero la foto,
al lado los datos.

Dos pantallas de la web de PASO en el móvil, con una foto de la ruta y sus datos.

/ Alcance

Ya la usamos
en cada ruta.

por ruta: de él salen el mapa, el perfil y las cifras: 1 GPX
pantallas diseñadas y programadas, de la Home a la 404: 8
tamaños diseñados en Figma: escritorio y móvil: 2

Publicada en paso.baerchen.dev y en uso por el grupo. Una ruta nueva se publica desde WordPress subiendo su GPX. Sin constructores de páginas, con las fuentes alojadas en la propia web y sin animaciones para quien prefiere reducirlas. Algunas ideas, como los filtros de rutas, esperan a que haya unas ocho rutas.

Explorar el proyecto publicado Visitar PASO

/ Siguiente caso de estudio