Progetto 04 — E-commerce & Brand identity · MMXXVI
Next.js
React
TypeScript
CSS Modules
Framer Motion
Midjourney
Figma
Ooma
Un marchio di abbigliamento oversize, immaginario, che veste con due sole taglie. Naming, brand identity e un e-commerce in due lingue in cui quindici capi si guardano, si scelgono e si comprano senza una riga di troppo.
Settore — Moda ed e-commerce di abbigliamento oversizePiattaforma — WebAnno — MMXXVI
Overview
Due taglie, nessun dubbio.
Ooma è un marchio immaginario di capi oversize per uomo e donna, disegnato a Roma: quindici capi in quattro colori, latte, sabbia, oliva e caffè, in cotone pesante e lino, proposti in due sole taglie, S/M e L/XL. Il sito è lo shop: catalogo per genere e per categoria, scheda prodotto, carrello, checkout, lookbook e guida alle taglie, in italiano e in inglese.
È un progetto autoprodotto, nato da una domanda precisa: come si fa un e-commerce di abbigliamento che non gridi? La risposta è togliere. Niente badge, niente ombre, niente angoli tondi: un fondo color latte, una tipografia sicura e le foto a portare i colori. Naming, brand identity e sito web per vendere vestiti online, costruiti insieme perché parlino con una voce sola.
01 — Il naming e il marchio
Quattro lettere, nessun logo in vista.
Il nome è corto e tondo, due O che si leggono come i volumi dei capi, e si pronuncia uguale in ogni lingua. Il logotipo è solo testo, in Archivo espanso e pesante, e compare sull’etichetta, sul cartellino e nell’interfaccia: sui capi non c’è. La palette prende il nome dai colori della collezione, latte, sabbia, oliva e caffè, e la striscia delle taglie, due celle con un filetto in mezzo, S/M e L/XL, è il segno che firma ogni card e ogni scheda.
Naming & architettura del brand
Logotipo tipografico, etichetta e cartellino
Palette dei quattro colori e striscia delle taglie
02 — Lo shop
Quindici capi, due taglie.
Il catalogo si sfoglia per Donna, Uomo, Nuovo e per categoria, con le chip, l’ordinamento e il caricamento a passi. Ogni card è spoglia: il packshot, e al passaggio del mouse il capo indossato. La scheda prodotto tiene colore e taglia a vista, dice che taglia porta il modello in foto e, senza una taglia scelta, non lascia procedere. Il carrello è un pannello che si apre da destra, con la barra che si riempie fino alla spedizione gratuita; il checkout è una pagina sola, con la conferma d’ordine. Tutto è finto, ma deve sembrare vero: prezzi, materiali e testi vengono da un solo catalogo, letto alla build.
Catalogo per genere e categoria, con ordinamento
Scheda prodotto con colore, taglia e «Completa il look»
Carrello a pannello, checkout e guida alle taglie
03 — La home e il movimento
Una foto che si sgrana.
La hero sta ferma mentre il resto della pagina le scorre sopra come un sipario, e intanto la foto si sgrana: un tassello di grana cresce fino a dissolverla nel colore del fondo. Poi un indice della collezione a scorrimento, dove la categoria attiva cambia con la posizione e le foto si avvicendano in dissolvenza; i nuovi arrivi, la coppia su sette colonne, il video dell’atelier. Una sola curva di movimento per tutto, lenta come un tessuto che cade; con il movimento ridotto restano solo le dissolvenze. Sito statico esportato da Next.js, in due lingue, con i font in casa.
Hero che si sgrana e indice della collezione a scorrimento
Reveal, pannello del carrello e transizione da card a scheda
Due lingue, export statico, movimento ridotto rispettato
Il lavoro
Cosa abbiamo fatto.
Naming, brand identity e sviluppo di un sito web con e-commerce per un marchio di abbigliamento. Disegnato e costruito in casa, dal nome al checkout: catalogo, schede prodotto, carrello, lookbook e guida alle taglie, in italiano e inglese, su un sito statico senza backend.
Naming & brand identity
Web design ed e-commerce
Sviluppo sito web su misura in Next.js
Motion & regia di scorrimento
01
02 — In grande
Due taglie, niente di troppo.
Dal nome al checkout, un e-commerce completo, disegnato e costruito in casa.
