More Empordà
Landingd’unaempresadel’EmpordàquegestionasegonesresidènciesalaCostaBrava:manteniment,supervisióiserveisdurantl’estada.Vacomençarcomunwebdequatrepàginesivaacabarenunasola.
(SCROLL) ↓
01
Visió general
Una casa a punt sense haver-hi de ser.
Qui té una segona residència a la Costa Brava hi viu lluny la major part de l’any: el jardí, la piscina, la neteja i les incidències s’han de coordinar a distància, amb diversos professionals i diverses factures. More Empordà ho centralitza en una sola persona de referència. Vaig dissenyar la landing i el seu sistema de components, i la vaig portar a codi amb Next.js i assistència d’IA, en quatre idiomes.
Fitxa
02
Experiència d’usuari
De quatre pàgines a una sola landing.
El projecte va començar com un web de quatre pàgines, amb l’arquitectura i els textos SEO de cada una ja escrits. Però un negoci nou amb un sol servei hi cabia en una pàgina, i així el contacte quedava sempre a un scroll. El contingut es va reordenar com un argument: què fa More Empordà, com treballa, què hi guanya el propietari i quins problemes li resol.
La meva aportació
- Arquitectura i SEO: mapa del web, title tags, meta descriptions i paraules clau de cada pàgina abans de dissenyar-ne cap.
- Pas a landing: el contingut de quatre pàgines en un sol recorregut que acaba en el contacte.
- Problemes i solucions: cinc preocupacions del propietari que viu lluny, cadascuna amb la seva resposta.
- Procés en quatre fases: de la visita inicial a l’informe mensual, perquè el client sàpiga què passarà abans d’escriure.
03
Prototipatge
Tres mides de pantalla des del principi.
Cada pantalla es va dibuixar en escriptori, tauleta i mòbil, tant per al web com per a la landing. Per això el canvi d’abast no va obligar a començar de zero: les seccions del web es van poder reaprofitar com a blocs de la landing, ja resoltes en les tres mides.
La meva aportació
- Wireframes en tres mides: escriptori, tauleta i mòbil per a cada pantalla del web i de la landing.
- Carrusels per dispositiu: les experiències i els serveis de gestió, resolts com a slider a cada mida.
- Quatre idiomes: català, castellà, anglès i francès, publicat amb Next.js.
04
Disseny d’interfície
L’Empordà com a promesa de tranquil·litat.
El propietari no compra manteniment, compra no haver-hi de pensar. La interfície ho diu amb fotografia gran del territori, una paleta de tons de terra, oliva i pedra, la Mont als titulars i la Montserrat al text, i molt d’aire entre seccions. Un sistema de components i variables per a tres mides de pantalla sosté tota la pàgina.
La meva aportació
- Sistema de disseny: tipografia, colors, espais, ombres i botons com a variables, amb modes per a mòbil, tauleta i escriptori.
- Banc d’imatges: fotografia ordenada per gestió, mar, activitats, gastronomia i benestar.
- Components: navbar, footer, botons i els carrusels d’experiències i de gestió, reutilitzables a tota la pàgina.
More Empordà té una sola pàgina que explica què fa, com ho fa i per què el propietari pot desconnectar, en quatre idiomes. I el contingut del web original queda escrit i estructurat per si algun dia la landing ha de créixer.
Comparteix aquest projecte
Continua desplaçant-te per veure el següent cas pràctic.
Segurall