Case studies
Quattro strutture nel Chianti da raggruppare in un unico sito, sotto un nuovo nome e una nuova immagine. Un progetto complesso che ha richiesto mesi di studio e sviluppo.
Sole del Chianti, Villa Pianora, Villa La Fornace e la Capannina di Matteo sono 4 eleganti strutture situate nel cuore del Chianti, a metà strada tra Firenze e Siena.
L'anima di queste quattro villa è sempre la stessa, la famiglia Fusi, che da anni accoglie con amore e passione ospiti da tutto il mondo.
Quattro anime che ad inizio 2021 si sono fuse (online) sotto un brand tutto nuovo chiamato Chianti Relais.
Il progetto prevedeva lo sviluppo di un unico portale che mettesse in luce le peculiarità di ciascuna villa restituendo un'immagine complessiva dell'esperienze del mondo Chianti Relais.
Questo è lo stack tecnico che ho scelto per lo sviluppo:
cms
Statamic
js
Vue Js
css
Tailwind CSS
animation
GSAP
animation
Three.js
form
Getform
deploy
Ploi
slideshow
Swiper
Una delle sfide principali del progetto riguardava la navigazione tra le strutture e come renderla user friendly.
Dopo un attento studio ho deciso di fare una index per ciascuna villa, all'interno del sito principale, in modo che ciascuna struttura avesse il proprio logo e le pagine ben visibili nel menu.
In questo modo abbiamo dato una spinta importante a livello di indicizzazione nei motori di ricerca, restituendo il giusto valore a ciascun ambiente (perchè una cosa è essere una pagina del menu, un'altra è essere un mini sito all'interno di un altro).
La cover è sempre presente in tutte le pagine e si tratta di un elemento dinamico, completamente personalizzabile dall'admin tramite interfaccia visiva (ad esempio, può essere un'immagine statica di sfondo o un video caricato sul cloud).
La seconda sfida era creare un'homepage bilanciata, che non mettesse in luce una struttura specifica (a discapito delle altre).
Ho pensato di sfruttare questa pagina in maniera dinamica, creando una serie di animazioni concatenate che si attivano sullo scroll dell'utente (fatte con Gsap ♥️).
Io credo che la narrativa sia importante online così come nella vita di tutti i giorni.
Mi piace poter raccontare non solo ciò che sto promuovendo ma l'idea che c'è dietro, la passione di chi ci lavora. In questo caso ho avuto l'opportunità di poter sfruttare tante foto stupende ed è stato bello studiare una presentazione che ne risaltasse i colori e l'atmosfera.
Se poi vi interessano i dettagli tecnici, ho usato GSAP per le animazioni e ho alternato scroll orizzontali e verticali.
Il menu ha un effetto "displacement". Quando si passa da una villa all'altra la foto di sfondo si scompone e si ricostruisce in quella nuova.
Tutte le index delle ville sono già visibili e selezionabili.
Le camere possono essere gestite dall'admin in autonomia e hanno un layout a griglia.
Per ogni camera è possibile associare una galleria fotografica che si apre in una finestra modale.
Il contenuto della singola pagina è completamente personalizzabile tramite CMS.
L'admin può scegliere tra diversi blocchi che ho creato appositamente per questo sito.
Qui vedete due esempi (uno con testo a sinistra, sovrapposto all'immagine, l'altro con testo a destra) e una galleria fotografica a scorrimento orizzontale.
Ecco altri blocchi personalizzati che l'admin può inserire.
Questo effetto l'ho chiamato "cinema", perchè blocca lo scroll dell'utente, cambia lo sfondo ("spegne le luci") e mette il focus su una sola immagine. Proprio come se si fosse davanti allo schermo di un cinema.
Sotto compare un'altra galleria fotografica, completamente differente da quella che vi ho mostrato precedentemente.
Il footer raccoglie in maniera chiara ed ordinata tutte le pagine delle ville (e anche i loro profili social!).
Ovviamente lo sfondo cambia colore a seconda delle pagine.
La pricing list e le amenities sono completamente gestibili da interfaccia web.
Si possono caricare anche delle icone.
Il menu mobile mostra sia le pagine generali del sito che quelle individuali di ciascuna villa.
Così il sito è più facile da navigare.
Ti è piaciuto il progetto?
Se hai voglia di lavorare insieme o vuoi contattarmi per una consulenza puoi scrivermi su [email protected]
Disponibilità attuale per nuovi progetti
© 2023, Francesco Mugnai
