Giovanelli Barilari — Sistema di design
Tenuta Giovanelli Barilari · sito web · bozza struttura · ottobre 2026

Sistema di design e tre proposte

Le tre proposte condividono la stessa struttura, gli stessi testi in quattro lingue e lo stesso motore di animazione. Cambiano carattere tipografico, palette, impaginazione e il modo in cui le immagini entrano.

PROPOSTA A Proposta A Chiara, centrata, molto respiro. Immagini che si aprono da destra a sinistra, titoli che salgono da una maschera.
Proposta B Racconto in cinque capitoli numerati, testo fisso a sinistra mentre le immagini scorrono. Doppia tenda color ocra.
PROPOSTA C Animazioni legate allo scroll: il video si allarga a pieno schermo, il testo si accende parola per parola, i capitoli scorrono in orizzontale da destra a sinistra. Nero vinaccia vellutato, Cinzel e Alegreya Sans.

Tipografia e colore

A
Custodi di una terra Jost · titoli, wordmark, voci di menu · bastoni geometrici, tratto uniforme e lineare
Vino e olio sono il cuore. Intorno, i fabbricati che restauriamo pietra dopo pietra. Hanken Grotesk 300 / 500 · testi e etichette in maiuscoletto spaziato
Carta
#F4EFE6
Inchiostro
#2B2620
Secondario
#7A7064
Linea
#D9D0C1
Vinaccia
#8A3B2E
B
Custodi di una terra Tenor Sans · titoli in maiuscolo, numeri romani · bastoni umanista, nessuna grazia
Vino e olio sono il cuore. Intorno, i fabbricati che restauriamo pietra dopo pietra. Mulish 300 / 600 · testi e etichette
Oliva
#22261D
Pietra
#EAE5D9
Salvia
#A9AA95
Ocra
#C49A4A
Ocra scura
#8C6A2C
C
Custodi di una terra Cinzel 400 · titoli, wordmark, voci di menu, sempre in maiuscolo · capitali romane incise
Vino e olio sono il cuore. Intorno, i fabbricati che restauriamo pietra dopo pietra. Alegreya Sans 300 / 500 · testi e etichette in maiuscoletto spaziato
Vinaccia
#171013
Pergamena
#F3EBDF
Sabbia
#D9CBB8
Terracotta
#9E4A2C
Inchiostro
#231C17

Animazioni

01 · Comparsa dal basso Testi, link, didascalie. Opacità 0→1, traslazione 56px→0. 1,1–1,4 s, cubic-bezier(.16,1,.3,1). Sfalsamento 0,08–0,15 s tra elementi fratelli.
La tenuta
02 · Titolo da maschera Titoli e wordmark. Il testo sale da sotto una linea invisibile (overflow nascosto). 1,3 s, stessa curva. Nessuna dissolvenza: il titolo resta nitido.
03 · Tenda destra → sinistra (A) Immagini e video. clip-path inset(0 0 0 100%)→0, 1,5 s, cubic-bezier(.77,0,.18,1). Dentro, l'immagine si assesta da scala 1,25 a 1 in 2,4 s.
04 · Doppia tenda (B) Un pannello ocra entra da destra (0,75 s), copre, poi esce a sinistra (0,9 s) scoprendo l'immagine già al suo posto. Stessa curva della tenda.
05 · Apertura dal centro Paesaggi orizzontali, vigne, colline. Si apre dalla linea centrale verso l'alto e il basso, come un orizzonte. clip-path inset(50% 0 50% 0)→0, 1,6 s; immagine da scala 1,22 a 1 in 2,6 s.
06 · Risalita con controspinta Ritratti, bottiglie, formati verticali. La cornice si scopre dal basso mentre l'immagine sale più piano (22%→0): un effetto di profondità. 1,4 s cornice, 2,2 s immagine.
07 · Tenda diagonale Immagini di apertura e grandi fotografie. Legata allo scroll: il bordo parte verticale a destra, scorrendo si inclina e avanza verso sinistra, poi torna verticale prima del lato sinistro. Inclinazione massima 38%; immagine da scala 1,12 a 1. Scorri la pagina per vederla.
foto 1 · facciata
foto 2 · vigna
foto 3 · cantina
08 · Dissolvenza incrociata Copertine di sezione al posto del video, o gallerie brevi. Le foto si alternano ogni 4–6 s con dissolvenza di 1,8 s, ciascuna con un avvicinamento lentissimo (scala 1→1,08, lineare).
fotografia
09 · Avvicinamento con lo scroll Immagini a tutta pagina. Mentre si scorre l'immagine si avvicina piano dentro la cornice (scala 1→1,35), legata alla posizione: scorrendo indietro torna. Scorri la pagina per vederla.
Rosso di tenuta Scopri →
10 · Passaggio del mouse Schede vini, ingressi alle sezioni. Al passaggio l'immagine si avvicina appena (scala 1,06 in 1,6 s) e compare l'invito "Scopri". Su mobile resta visibile l'invito, senza zoom.
Una volta sola. Ogni elemento si anima la prima volta che entra nello schermo (12% visibile), poi resta fermo. Parallasse leggera. Dentro le cornici le immagini scorrono a velocità ridotta (6–10%), senza mai uscire dal bordo. Menu. Si apre con la stessa tenda destra→sinistra; le voci salgono una dopo l'altra. Accessibilità. Con "riduci movimento" attivo nel sistema operativo, i contenuti appaiono senza animazione.

Mobile

Anteprima a 390 px →
1 · PUNTO DI ROTTURASotto i 760 px il layout passa a una colonna. Sopra, desktop e tablet condividono lo stesso impianto. Si progetta prima a 390 px.
2 · INTESTAZIONECompatta: logo, selettore lingua e menu. Il selettore mostra solo i codici (IT EN DE ES), senza il nome esteso.
3 · TIPOGRAFIAI titoli scalano in modo fluido (clamp) e vanno a capo. Testi correnti da 16 px, etichette da 11 px, interlinea 1,6–1,7.
4 · TOCCOOgni pulsante e link ha un'area di almeno 44 px. Le interazioni al passaggio del mouse hanno un equivalente al tocco.
5 · ANIMAZIONIStesse curve e durate. Le immagini restano a tutta larghezza e si aprono alla comparsa nello schermo. Con "riduci movimento" appaiono ferme.
6 · MENUA tutto schermo, voci su una colonna. Nella C il menu sale dal basso come un foglio e occupa tutta l'altezza.
A
Sezioni centrate impilate. Il wordmark dell'hero scende fino a 32 px e resta su due righe se serve. Tenda destra→sinistra a larghezza piena.
BIl testo fisso a sinistra diventa un blocco sopra l'immagine; il numero romano resta davanti al titolo. Doppia tenda ocra su ogni immagine.
CIl video parte al 72% della larghezza e riempie lo schermo con lo scroll. I capitoli, orizzontali su desktop, scorrono in verticale: ogni immagine si apre da destra al passaggio.

Multilingua

1 · SCELTA AUTOMATICAAlla prima visita si legge la lingua del browser. Se è italiano, inglese, tedesco o spagnolo si usa quella; altrimenti inglese.
2 · FORZATURAIl selettore nell'intestazione (e nel piè di pagina) cambia lingua e la ricorda per le visite successive. "Automatica" torna alla scelta del browser.
3 · INDIRIZZI/it/la-tenuta
/en/the-estate
/de/das-gut
/es/la-fincaPercorsi tradotti, tag hreflang per ogni lingua, x-default → /en/. Il redirect automatico vale solo sulla radice "/".
4 · LUNGHEZZEIl tedesco è in media il 30% più lungo: titoli fluidi, nessuna altezza fissa sui blocchi di testo, menu su una colonna.
IT EN DE ES
{{ r.it }} {{ r.en }} {{ r.de }} {{ r.es }}
"Ospitalità" è diventato "Fermarsi" (EN Stay, DE Verweilen, ES Quedarse): più leggero, come richiesto. Le traduzioni sono provvisorie, da rivedere con un madrelingua.

Mappa del sito

Pagine e paragrafi. Tra le proposte cambia solo la sequenza delle sezioni della home.

Home
{{ b.name }} {{ b.meta }}
  • {{ k.t }}{{ k.arrow }}
Apri →
■ esiste□ da progettare◆ collegamento home → categorie (solo C)→ rimanda alla sottopagina[ ] paragrafi proposti, da confermare

{{ mapNote }}
FASE 1 · SUBITOPagina minimale di presentazione con la storia e i contatti, pagina Vini e olio, Contatti. Stessa grafica e stesse animazioni, con foto provvisorie; nella C l'apertura usa già il video con il controllo dell'audio. La home contiene apertura, introduzione, la storia, vini e olio e contatti; il menu mostra solo La storia, Vini e olio e Contatti. Lingue: solo italiano e inglese (le altre lingue del browser passano all'inglese).
A · Fase 1
B · Fase 1
C · Fase 1
FASE 2 · DA MARZO, CON I VIDEOHome narrativa completa costruita sui video, pagine La storia, La tenuta, Cosa amiamo, Fermarsi, Vieni a trovarci.
A · Fase 2
B · Fase 2
C · Fase 2