More Empordà
LandingdeunaempresadelEmpordàquegestionasegundasresidenciasenlaCostaBrava:mantenimiento,supervisiónyserviciosdurantelaestancia.Empezócomounawebdecuatropáginasyacabóenunasola.
(SCROLL) ↓
01
Visión general
Una casa a punto sin tener que estar allí.
Quien tiene una segunda residencia en la Costa Brava vive lejos de ella la mayor parte del año: el jardín, la piscina, la limpieza y las incidencias se tienen que coordinar a distancia, con varios profesionales y varias facturas. More Empordà lo centraliza en una sola persona de referencia. Diseñé la landing y su sistema de componentes, y la llevé a código con Next.js y asistencia de IA, en cuatro idiomas.
Fitxa
02
Experiencia de usuario
De cuatro páginas a una sola landing.
El proyecto empezó como una web de cuatro páginas, con la arquitectura y los textos SEO de cada una ya escritos. Pero un negocio nuevo con un solo servicio cabía en una página, y así el contacto quedaba siempre a un scroll. El contenido se reordenó como un argumento: qué hace More Empordà, cómo trabaja, qué gana el propietario y qué problemas le resuelve.
Mi aportación
- Arquitectura y SEO: mapa de la web, title tags, meta descriptions y palabras clave de cada página antes de diseñar ninguna.
- Paso a landing: el contenido de cuatro páginas en un solo recorrido que acaba en el contacto.
- Problemas y soluciones: cinco preocupaciones del propietario que vive lejos, cada una con su respuesta.
- Proceso en cuatro fases: de la visita inicial al informe mensual, para que el cliente sepa qué pasará antes de escribir.
03
Prototipado
Tres tamaños de pantalla desde el principio.
Cada pantalla se dibujó en escritorio, tableta y móvil, tanto para la web como para la landing. Por eso el cambio de alcance no obligó a empezar de cero: las secciones de la web se pudieron reaprovechar como bloques de la landing, ya resueltas en los tres tamaños.
Mi aportación
- Wireframes en tres tamaños: escritorio, tableta y móvil para cada pantalla de la web y de la landing.
- Carruseles por dispositivo: las experiencias y los servicios de gestión, resueltos como slider en cada tamaño.
- Cuatro idiomas: catalán, castellano, inglés y francés, publicado con Next.js.
04
Diseño de interfaz
El Empordà como promesa de tranquilidad.
El propietario no compra mantenimiento, compra no tener que pensar en ello. La interfaz lo dice con fotografía grande del territorio, una paleta de tonos tierra, oliva y piedra, la Mont en los titulares y la Montserrat en el texto, y mucho aire entre secciones. Un sistema de componentes y variables para tres tamaños de pantalla sostiene toda la página.
Mi aportación
- Sistema de diseño: tipografía, colores, espacios, sombras y botones como variables, con modos para móvil, tableta y escritorio.
- Banco de imágenes: fotografía ordenada por gestión, mar, actividades, gastronomía y bienestar.
- Componentes: navbar, footer, botones y los carruseles de experiencias y de gestión, reutilizables en toda la página.
More Empordà tiene una sola página que explica qué hace, cómo lo hace y por qué el propietario puede desconectar, en cuatro idiomas. Y el contenido de la web original queda escrito y estructurado por si algún día la landing tiene que crecer.
Comparte este proyecto
Sigue desplazándote para ver el siguiente caso práctico.
Segurall