Proyectos · Caso

Barcelona Horse Tours, una web trilingüe que vende la ciudad vista desde un caballo

Diseño webIdentidad digitalTurismo activoWeb trilingüe 2017
Barcelona Horse Tours, una web trilingüe que vende la ciudad vista desde un caballo
barcelonahorsetours.com · tres idiomas · Collserola a 20 minutos
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.

La clave

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.

3
idiomas, cada uno con su propia estructura de direcciones
7
páginas por idioma, de la portada a las condiciones de reserva
1988
año en que se fundó el centro ecuestre que opera las rutas
20
minutos entre el centro de Barcelona y el punto de salida
85
euros por persona, con instructor titulado, seguro y casco
1
única familia tipográfica en toda la web
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
01El encargoVender una excursión a quien no ha montado nunca
02La decisiónLa fotografía a pantalla completa y un solo botón
03La web2017: tres idiomas, siete páginas y la reserva fuera
04La revisión2019: precios, sellos y contenidos al día
Galería · el proyecto en imágenes (clica para ampliar)
Una sola imagen que ya lo cuenta todo. Sin experiencia previa: la página que quita el miedo. Ochenta y cinco euros y siete cosas dentro, sin asteriscos. Pensada para reservarse desde el móvil, de camino a Collserola. Un club de 1988 con veinticinco caballos y sesenta ponis detrás. Producto catalán, ecológico y de kilómetro cero al final del paseo. Foto y texto alternándose: la estructura entera de la portada. Lo que se come, a un pulgar de distancia.
Concepto y sistema · moodboard, tipografía, componentes y composición
Lo que se vende es la vista, así que la vista ocupa toda la pantalla. Un solo tipo en dos pesos para que el texto no tape el paisaje. Bandas a pantalla completa que alternan foto, turquesa y pizarra. El último paso de la reserva ya no es nuestro: el calendario vive fuera. HTML estático de 13 KB donde el 96 % del peso son las fotos del paisaje.
Así diseñamos todos los casos →
"Excursions a cavall amb vistes de Barcelona."barcelonahorsetours.com

¿Quieres un resultado así para tu proyecto?

Siguiente proyecto

Ajudem.cat, la plataforma de voluntariado que ganó la Hackovid