Il sito di Erica Puccio, consulente di brand e prodotto a New York: lo studio, le carte da parati distribuite in esclusiva da Spartan Surfaces, l’impegno nella comunità. Prima le tre attività parlavano con lo stesso tono generico e di Erica restava poco. Ho ripensato il posizionamento attorno a lei e costruito un sistema d’identità sul marchio che aveva già: ogni sezione ha il suo fondo, la stella gira piano dietro le pagine, le parole di Erica hanno una pagina loro. Il tutto in un tema Shopify scritto a codice da zero.
Identità
La stella di Erica, che sul sito gira piano e sempre
Il marchio era già di Erica. Sul sito diventa uno sfondo: grande e chiaro dietro le sezioni, fa un giro ogni 100 secondi, senza partenze né arresti, e fuori dallo schermo si ferma per riprendere da dove era. Il suo coral è anche il pallino del cursore. La costruzione è misurata sul disegno originale, non ridisegnata.
Tavole
Brand & design consultancy, New York: la copertina del sistema.Lo studio: strategia, design di prodotto, brand management.Il marchio, che sul sito fa un giro ogni cento secondi.La costruzione del marchio, misurata sul vettoriale: modulo u, archi di raggio 2,8u, bracci a 45°. Dove il disegno non è un multiplo esatto del modulo, l’etichetta lo dice con ≈.Il lockup: linea di base, altezze, distanza tra marchio e nome, e intorno l’area di rispetto, mezzo marchio.Il sole: sorge con lo scroll, su tutto il sito.La palette, a campiture piatte.The Seasons per titoli e frasi, mai in corsivo; Inter per testo e interfaccia.L’identità su carta, in mockup.Il posizionamento in un poster, in mockup: «Empowering Creativity & Community».Il ventaglio delle carte da parati, distribuite in esclusiva da Spartan Surfaces.Studio, carte da parati, comunità: tre attività, una voce.Il sito su telefono.Il sito su desktop: i titoli cambiano colore sotto il cursore.Posizionamento, identità visiva, tema Shopify scritto a codice, motion e reel.
Il lavoro
Due percorsi dalla home: «Explore the Studio» e «Discover Wallcoverings» portano in due posti diversi, invece che allo stesso modulo di contatto. Il titolo si regola su larghezza e altezza, così i due bottoni stanno nella prima schermata su ogni desktop.Il metodo su smeraldo, con le voci numerate come l’indice di una rivista. Scorrendo, il fondo cambia e la pagina cambia luce, come quando si gira un foglio.Le sei collezioni in lista: al passaggio la riga si accende, entra la miniatura e la freccia si allunga.Sotto il cursore il titolo passa da teal a terracotta, in 0,7 secondi all’andata e 0,9 al ritorno. È l’unica enfasi: The Seasons non va mai in corsivo.«In Erica’s words»: le sue frasi su terracotta, firmate, in mezzo alle pagine dello studio e della comunità. Qui il pallino del cursore diventa crema.Su mobile lo scroll resta quello nativo e il cursore non c’è: lo smooth scroll e il pallino valgono solo con il mouse.The EP Edit: la newsletter di Erica diventa un Journal, cinque uscite con le loro date originali, filtrabili per tema.Un numero di The EP Edit. Le newsletter erano PDF da scaricare; ora sono articoli da leggere, con il PDF originale ancora lì.
Movimento
La costruzione del logo sulla sua geometria: prima il marchio, poi il lockupIl reel di lancio, 30 secondi con musica: un unico scroll del sito, all’albaCon lo scroll il sole cresce e lascia il posto ai tickerIl ticker si ferma sotto il cursore e Cumulus si apreLa pagina prodotto: si sceglie il colorway, si ordina il campioneSotto l’anello del cursore ogni titolo teal diventa terracottaLa chiusa: il sole dietro il nome
Sistema
blush#E2CECA
cream#F2EEE9
emerald#00647B
terracotta#AC392A
coral#F06451
ink#2C2C2C
Campiture piatte e angoli vivi. Ogni sezione ha il suo fondo: blush per l’hero, crema per le pagine, smeraldo per il metodo e il Journal, terracotta per le parole di Erica. Il coral è della stella e del cursore.
The SeasonsTitoli, frasi, nomi delle collezioni
Empowering Creativity & Community
Di Elena Genova (My Creative Land), da Adobe Fonts. Mai in corsivo: l’enfasi passa dal colore.
InterTesto e interfaccia
01 Who we are · 03 Explore the collections · 04 Our approach
Le etichette sono maiuscole, spaziate e numerate, come gli indici di una rivista.
Come è fatta
Tema Shopify scritto a codice da zero (Liquid, CSS, JavaScript), senza page builder né template di terze parti; sviluppato su un tema di staging e pubblicato solo al lancio.
jQuery, Swiper e altri plugin tolti dalle pagine che non li usano.
GSAP con ScrollTrigger per le entrate e i cambi di fondo; ScrollSmoother solo su desktop.
La stella e lo scambio di colore dei titoli sono CSS, con il colore mescolato in Oklab; il cursore è uno script di 3 KB.
Il Journal è il blog di Shopify con un template su misura e due metafield, numero dell’uscita e PDF originale. Cinque uscite migrate dai PDF, con le loro date.
Carte da parati come catalogo editoriale, con un carrello dei soli campioni.
prefers-reduced-motion spegne le animazioni e ferma i ticker; contrasti verificati su ogni fondo, bersagli di almeno 44 px.
Titoli e descrizioni di ricerca per ogni pagina, dati strutturati schema.org e un’immagine di condivisione con il marchio.
225 test automatici sul tema controllano struttura, contenuti e regole del design system a ogni modifica.
Il reel è fatto in HyperFrames, come un unico scroll senza tagli; la musica è composta in codice, a 60 BPM come il montaggio.
Online su ericapuccio.com. The EP Edit è nel menu e in fondo a ogni pagina.
