Barcelona Horse Tours
Barcelona desde otra perspectiva.
El encargo
El Centre d’Equitació Poni Club Catalunya lleva desde 1988 enseñando a montar en la Vall de Sant Just. Con veinticinco caballos, sesenta ponis y guías titulados que hablan cuatro idiomas, tenía un producto que no era para sus alumnos: una excursión a caballo por el Parc Natural de Collserola, con Barcelona y el mar al fondo, a veinte minutos del centro de la ciudad.
El público de esa excursión es un turista que no se ha subido nunca a un caballo. La web no tenía que explicar equitación: tenía que convencer en tres idiomas de que vale la pena subir, y dejar la reserva a un clic.
Qué hicimos
Pusimos la foto a pantalla completa y quitamos lo demás. Quien se plantea subir a Collserola no necesita que le expliquemos nada: necesita ver la ciudad desde arriba. El hero ocupa la pantalla entera y el único texto son dos líneas entre dos filetes blancos.
Ordenamos la identidad digital alrededor del círculo. El logotipo con el caballo y la silueta de Barcelona va en dos versiones —grande y centrado sobre la portada, pequeño en la barra— y el resto de la marca en línea es tipografía y color: Open Sans en dos pesos, con 3,9 px de interletraje que convierten cada titular en un rótulo de excursión.
Tres idiomas, con dirección propia cada uno. Catalán, inglés y castellano viven en /ca/, /en/ y /es/, con siete páginas por idioma y un selector fijo en la cabecera. No hay traducción automática: hay tres webs completas que se mantienen a la vez.
Un solo botón naranja, y lleva al calendario. El sitio no tiene formulario: el botón abre el calendario de reservas del propio centro ecuestre. Turquesa para las franjas, naranja solo para la acción, 3 px de radio únicamente en los botones y ni un gramo de CMS. En 2019 volvimos a entrar a poner precios, sellos y contenidos al día.
De imaginar la ruta a reservarla.
El cliente ya tenía el mejor argumento de venta y no era suyo: era el paisaje. La decisión fue no competir con él. Una sola familia tipográfica, dos filetes blancos, una franja de color cuando el texto hace falta y un botón. Todo lo que no es fotografía en esta web está diseñado para durar diez segundos en pantalla y desaparecer.
El proyecto en cifras
Cómo está hecho
Debajo no hay CMS: son 13,6 KB de HTML estático con CSS propio, jQuery y poco más. Es una decisión de sitio, no una carencia: una web que se consulta con una barra de cobertura en mitad del monte no puede depender de una base de datos. El contenedor va a 1040 px, las secciones respiran 104 px por arriba y 69 por abajo, y el único radio del sitio son 3 px en siete botones.
La tipografía hace todo el trabajo de marca. Open Sans en dos pesos —400 y 800—, siempre en mayúsculas en los titulares y con interletraje de 6,8 px en los H2 interiores, 3,9 en el eslogan del banner, 3,1 en los botones y 1,3 hasta en el texto corrido. La paleta es corta y funcional: #21B2A6 para las franjas de sección, #FF7800 exclusivamente para la acción, gris pizarra #2E3842 de fondo general y blanco sobre foto.
Lo demás son integraciones ligeras: galería con lightbox, aviso de cookies, botones de compartir y el calendario de reservas del centro ecuestre, que se lleva todos los clics del botón naranja. Desde el primer archivo que queda guardado, en agosto de 2018, la estructura y las hojas de estilo son las mismas que hoy. Lo único que ha cambiado en nueve años es el contenido: de cuatro paquetes a uno.
Cómo fue
Galería · el proyecto en imágenes (clica para ampliar)
"Excursions a cavall amb vistes de Barcelona."barcelonahorsetours.com
¿Quieres un resultado así para tu proyecto?
