Case study · Sito vetrina e-commerce · Occhiali
NRT.WRK
Un marchio di occhiali che vende online ha un problema: non puoi provarli. Il sito doveva far desiderare la montatura, poi rassicurare, e parlare a due mercati senza raddoppiare le pagine.
- Progetto
- NRT.WRKbrand concept
- Settore
- Eyewearmontature da sole e da vista
- Tipo
- Vetrina e-commercecinque pagine, IT e EN
- Cosa abbiamo fatto
- Dal Figma al codicedesign system, sviluppo, bilingue
- Tecnologie
- HTML · CSS · JS purozero dipendenze
Il punto di partenza
Un prodotto che si compra con gli occhi, e non si può provare
Siamo partiti da un frame Figma della serie Daily Hero: una hero a griglia, blu elettrico, panna e arancio, con un ritratto e un'offerta al 25%. Il compito era portarla in codice senza perdere una proporzione, e costruirci intorno un sito vero: catalogo, scheda prodotto, storia del marchio, contatti.
In più, due lingue. Un sito di occhiali vende in Italia e all'estero, e la soluzione classica, due siti da tenere allineati, raddoppia il lavoro per sempre. Serviva un solo sito che cambia lingua sul posto.
01
Desiderio
La hero deve dire tre cose in un colpo: il titolo, l'offerta, il marchio. Una griglia, non uno slogan.
02
Fiducia
Chi non può provare gli occhiali vuole materiali, comfort, garanzia e chi li ha già comprati. Prima del prezzo.
03
Due lingue
Un solo sito, un dizionario, un selettore. La lingua resta memorizzata e si può passare dall'indirizzo.
Cosa abbiamo costruito
Cinque pagine, una griglia, due lingue
Home, collezione, scheda prodotto, storia e contatti. Stessa navigazione, stesso piede, stesso sistema di colori.
01
Una hero a bento, dal Figma al pixel
Pannello blu con il titolo e il tasto, card dell'offerta con il ritratto e il 25%, badge arancione con il testo che gira. Il frame Figma era 1920 pixel; qui le misure sono in unità di container, così le proporzioni restano identiche a ogni larghezza.
Sotto, un nastro con le promesse: montature polarizzate, 28 grammi, spedizione gratuita, due anni di garanzia.
02
Tre cose che non scendono a compromessi
Materiali, ottica vera, comfort misurato. Tre schede scure con un titolo ciascuna, prima ancora di mostrare un prezzo. È la risposta alla domanda che chi compra online si fa sempre: e se poi non sono buoni?
Più sotto, il laboratorio con i numeri: anni, modelli, paia vendute.
03
Le montature più scelte
Tre card, tre colori di fondo, il prezzo e una freccia. Le foto dei prodotti sono in mix-blend-mode multiply, così il fondo colorato passa attraverso e le montature sembrano appoggiate, non incollate.
Al passaggio del mouse la montatura si sposta e la freccia ruota: piccoli segnali che la card è viva.
04
La collezione con i filtri
Quattro filtri in alto e una griglia che si adatta: ogni card dichiara la sua categoria e il filtro mostra o nasconde. Niente ricarica, niente framework, una ventina di righe di JavaScript.
I filtri sono bottoni veri con lo stato accessibile, non link finti.
05
La scheda prodotto
Galleria grande, prezzo, tre varianti colore selezionabili, specifiche in tabella, e in fondo «Ti potrebbero piacere». La struttura di una scheda e-commerce vera, pronta per un carrello.
Il carrello qui è dimostrativo: il tasto lo dice, invece di far finta.
Sotto gli 860 pixel il bento si impila in colonna: pannello, offerta, badge. Il selettore di lingua resta in alto.
Come è fatto
Sotto il cofano: unità di container, un dizionario, zero framework
Sei effetti, uno alla volta. Tutto in HTML, CSS e JavaScript scritti a mano, senza build.
- HTML
- CSS
- JavaScript
- Container queries
- SVG textPath
- Dizionario i18n
- build.sh
- Clash Display + KoHo
1920 → 860 px
Le proporzioni non cambiano. Sotto 860 px si impila.
La hero fedele al Figma a ogni larghezza
Cosa vedi. Stringi la finestra e la hero non si rompe: titolo, offerta e badge restano nelle stesse proporzioni. Sotto gli 860 pixel si impila.
Come è fatto. Il frame Figma è 1920 per 983. Ogni misura è espressa in cqw, l'unità di larghezza del contenitore, e in percentuali: il titolo è 5.4167cqw, non 104 pixel. Il pannello blu e il ritaglio usano i tracciati vettoriali esatti esportati dal file.
<textPath> · spin 22 s
Il badge con il testo che gira
Cosa vedi. Un cerchio arancione con le parole del marchio che ruotano intorno, senza mai fermarsi. Cambi lingua e cambiano anche loro.
Come è fatto. Un <textPath> SVG aggancia il testo a un'ellisse; un'animazione CSS lo fa ruotare in 22 secondi. Il testo non è disegnato: lo scrive lo script dal dizionario, così al cambio di lingua anche l'anello si traduce.
Occhiali che cambiano il tuo sguardo
Da Nrt.wrk creiamo occhiali premium, unendo design moderno e comfort quotidiano.
Inizia il tuo stile ↗Glasses that change the way you look
At Nrt.wrk we craft premium eyewear, blending modern design with everyday comfort.
Start your style ↗data-i18n="hero.t1"localStorage · ?lang=en
Due lingue senza ricaricare
Cosa vedi. Clic su EN e tutta la pagina passa in inglese, sul posto. Torni domani e la trova ancora in inglese.
Come è fatto. Ogni testo ha un attributo data-i18n con la sua chiave e il dizionario vive in un solo file. Lo script sostituisce i testi, salva la scelta nel browser e la legge anche dall'indirizzo con ?lang=en. Aggiungere una lingua è duplicare un blocco.
scroll in ascolto · rAFscroll rimosso: tutto rivelato
Le sezioni entrano, sempre
Cosa vedi. Scorrendo, le schede salgono a gruppi di tre. Anche se arrivi a metà pagina da un link, o torni da un'altra scheda.
Come è fatto. Niente IntersectionObserver, che può non scattare con le àncore o le schede in background: un controllo diretto della posizione a ogni scroll, limitato a un fotogramma. Ogni elemento rivelato esce dalla lista, e a lista vuota lo script smette di ascoltare.
Filtri e varianti senza framework
Cosa vedi. Nella collezione i filtri nascondono le montature che non c'entrano. Nella scheda, le tre varianti colore si selezionano.
Come è fatto. Ogni card dichiara la categoria in data-cat; i filtri sono bottoni con aria-pressed, e il clic mostra o nasconde. Le varianti funzionano allo stesso modo. Tutto in una ventina di righe, leggibili da chiunque.
./build.shCinque pagine da un solo pezzo
Cosa vedi. Navigazione, hero e piede sono identici in tutte le pagine. Cambi una voce del menu e cambia ovunque.
Come è fatto. I frammenti condivisi stanno in una cartella a parte e uno script di build li incolla nelle cinque pagine. Il risultato sono file HTML completi e statici: si pubblicano così come sono, con sitemap e robots già pronti.
Cosa puoi portare nel tuo sito
Cinque cose che valgono anche senza occhiali
Un brand concept, ma le decisioni sono quelle di un e-commerce che deve convincere senza prova.
01
Una griglia dice tre cose insieme
Titolo, offerta e marchio nella stessa schermata, ognuno nel suo riquadro. Una hero a bento fa in un colpo quello che tre schermate fanno in tre.
02
Rassicura prima del prezzo
Materiali, comfort, garanzia, numeri del laboratorio: chi non può provare il prodotto compra queste cose. Mettile prima del listino.
03
Il catalogo è un filtro, non una lista
Quattro bottoni fanno più di un menu a tendina. Chi cerca «da vista» vuole vedere solo quelle, subito.
04
Due lingue non sono due siti
Un dizionario e un attributo per testo. La versione inglese non resta mai indietro, perché non esiste una seconda versione.
05
La fedeltà al design è una competenza
Il Figma promette proporzioni; il codice di solito le perde. Misurare in unità di container invece che in pixel è il modo per mantenere la promessa a ogni larghezza.
Il prossimo potrebbe essere il tuo
Vuoi un sito che resti fedele al design?
Hai un Figma, un marchio o solo un'idea di come dovrebbe apparire. Raccontaci cosa fai: ti diciamo cosa faremmo noi, gratis e senza impegno.
Preventivo chiaro. Zero sorprese, zero vincoli.
Guarda gli altri progetti