Progetto 03 — E-commerce & Brand identity · MMXXVI
Astro
TypeScript
HTML5
CSS3
GSAP
Lenis
Midjourney
Figma
Vèrso
Un’enoteca di vini naturali a Monti, immaginaria, con uno shop che si sceglie dal colore. Naming, brand identity e un e-commerce in cui ogni pagina prende la tinta del vino che racconta.
Settore — Enoteca ed e-commerce di vini naturaliPiattaforma — WebAnno — MMXXVI
Overview
Si sceglie dal colore, non dal vitigno.
Vèrso è un’enoteca immaginaria in un vicolo di Monti, a Roma: un bancone, sei tavoli e 340 etichette di piccoli vignaioli che lavorano senza scorciatoie. Il sito fa due cose insieme: racconta il locale, con gli orari e lo stato «aperto adesso» calcolato su Roma, e vende le bottiglie online.
È un progetto autoprodotto, nato da una domanda che ci fanno spesso: come si fa un e-commerce per un’enoteca che non sembri un supermercato? La risposta sta nel colore. Rosso, bianco, macerato, rosato, bollicine: ogni tipologia ha la sua tinta, e l’interfaccia si ricolora dalla scheda prodotto al carrello. Naming, brand identity e sito web per vendere vino online, costruiti insieme perché parlino con una voce sola.
01 — Il naming e il marchio
Il retro dell’etichetta, e il gesto di versare.
Il nome tiene insieme due cose. Il verso di una bottiglia è la retro etichetta, dove stanno uve, suolo, giorni sulle bucce e solfiti misurati: nel sito si leggono girando ogni scheda. E versare è l’unico verbo del movimento: il colore sale dal basso come vino nel bicchiere, nei bottoni, nei link, nella schermata di caricamento. Il wordmark è in Anybody espanso, con l’accento della è in rosso: quel triangolo diventa il segno grafico di tutto il sistema, dai pallini degli elenchi ai numeri dei passaggi.
Naming & architettura del brand
Wordmark e segno dell’accento
Palette delle cinque tipologie
02 — Lo shop
Cinque calici, cinque scaffali.
Sotto la hero ci sono cinque calici visti di lato, uno per colore, che si riempiono quando entrano nello schermo e portano allo shop già filtrato. Lo shop filtra per tipologia, regione, abbinamento e prezzo, e tiene lo stato nell’URL perché una ricerca si possa condividere. Ogni scheda vino si gira e mostra la retro etichetta, e un profilo a cinque voci dice cosa si troverà nel bicchiere. Il carrello salva solo id e quantità: prezzi e nomi si rileggono dal catalogo, e un valore manomesso non cambia il totale.
Catalogo con filtri e URL condivisibile
Scheda vino recto/verso
Carrello, cassa da sei e checkout in tre passi
03 — Il locale e il club
Un sito che sa se è aperto.
Il sito non è una vetrina del catalogo: è il locale. La hero dice se l’enoteca è aperta in questo momento e cosa c’è al calice stasera, calcolato sugli orari di Roma. Il Club propone tre casse mensili, le degustazioni si prenotano con un modulo che controlla giorni e posti, e la verifica dell’età apre lo shop una volta sola. Tutto statico, senza backend né terze parti, con una Content Security Policy generata alla build e i font in casa.
Stato «aperto adesso» e vini al calice
Club in abbonamento e prenotazione delle degustazioni
Verifica dell’età, CSP e nessun dominio terzo
Il lavoro
Cosa abbiamo fatto.
Naming, brand identity e sviluppo di un sito web con e-commerce per un’enoteca di vini naturali. Disegnato e costruito in casa, dal nome alla cassa: catalogo, carrello, abbonamenti e prenotazioni, su un sito statico senza backend.
Naming & brand identity
Web design ed e-commerce
Sviluppo sito web su misura in Astro
Motion & regia di scorrimento
01
02 — In grande
Il colore, versato.
Dal nome al carrello, un e-commerce completo, disegnato e costruito in casa.
