Shop
Una costellazione commerciale galleggiante su marmo bianco
Il negozio online si basa su un modello "a tela bianca", con i prodotti visualizzati come grandi schede immagine fortemente curve anziché come griglie di miniature. L'intera interfaccia è incredibilmente fluida: raggi di 20-28 pixel ovunque, controlli a forma di pillola e un corpo compatto GT Standard da 16 pixel con spaziatura negativa stretta che rende il testo nitido e in grassetto. L'unico accento audace del sistema è un viola acceso (#5433eb), che compare nel logo, nel campo circolare dei risultati di ricerca e come ombra colorata sullo stesso pulsante. Il resto della palette è composto da tonalità neutre calde: superfici bianche, una sottile tela grigio freddo, bordi discreti e testo quasi nero. La densità rimane compatta con margini di 12 pixel, ma le strisce laterali e delle categorie respirano grazie a un generoso ritmo verticale di 64-80 pixel, rendendo l'esperienza di acquisto più simile alla navigazione che alla consultazione di un catalogo.
La larghezza massima è di 1200px, centrata su una tela traslucida #f2f4f5, con una barra laterale fissa di 64px di larghezza a sinistra contenente solo icone di navigazione. L'elemento principale è una striscia a tutta larghezza, con le schede prodotto posizionate sopra un logo "shop" viola centrato e una barra di ricerca a forma di pillola direttamente sotto di esso. Le categorie sono disposte in un'unica riga centrata sotto la barra di ricerca. Le sezioni di contenuto (Donna, Uomo, Bellezza, Casa, Neonati e Bambini) seguono come strisce designate, ciascuna contenente una griglia a 4 colonne con immagini dei prodotti o una composizione a 2 colonne "elemento principale e griglia". Il ritmo verticale è generoso: 64-80px tra le sezioni principali. Il piè di pagina è una striscia scura nella parte inferiore della pagina con gruppi di link a forma di colonna. Le frecce del carosello sul lato destro dei pannelli orizzontali dei prodotti indicano il contenuto scorrevole senza punti di paginazione.
La fotografia è l'elemento visivo dominante: foto di prodotto a schermo intero su sfondo bianco, ritagliate in formato 1:1, e immagini lifestyle con calde tonalità terrose (beige, terracotta, salvia, avorio). Le immagini dei prodotti hanno un colore proprio: l'interfaccia utente rimane acromatica, permettendo alle diverse tonalità dei prodotti di offrire varietà visiva. I loghi del marchio appaiono come testo sovrapposto alle immagini principali, scure o chiare, anziché come icone individuali. Nella composizione principale, le schede prodotto sono posizionate come una costellazione fluttuante e leggermente sovrapposta al logo. Le icone sono minimaliste e monocromatiche (contorni neri), ad eccezione delle icone di categoria, che utilizzano un unico colore del marchio. Le immagini dei prodotti non presentano illustrazioni, effetti 3D o sfumature.
Tavolozza
Marca
- Shop Violet
#5433eb— Il pulsante di invio, il segno di testo tratteggiato e il logo del marchio sono gli unici elementi che mettono in risalto l'azione e l'individualità sullo sfondo bianco. - Violet Wash
#c0b5f3— Un alone traslucido dietro il pulsante viola di invio che mantiene la sua luminosità senza cambiare tonalità.
Neutro
- Canvas Mist
#f2f4f5— Sfondo della pagina e trattamento superficiale aggiuntivo dietro le carte in rilievo. - Pure White
#ffffff— La superficie principale per schede, campi di input, elementi grafici fluttuanti e pulsanti a forma di pillola. - Ink Black
#000000— Testo principale, intestazioni, icone, simboli di navigazione e schede prodotto in modalità scura. - Faint Border
#ebebeb— Linee di separazione sottili sulle schede, contorni dei campi di input e cornici dei pulsanti a forma di pillola. - Muted Gray
#787574— Testo secondario, etichette di navigazione, contorni delle icone quando inattivi - Cool Stone
#cccccc— Segnaposto, stati disabilitati e sfondi delle icone inattive
Tipografia
da 11 a 16px · 4 passaggi
- GT Standard — sostituzione: Inter · contorni 400 · Il carattere principale, in tutte le dimensioni, è GTStandard-MRegular a 16px/-0.031em, il carattere principale per il testo, i pulsanti e le etichette. GTStandard-MSemibold a 20px/-0.05em è utilizzato per diversi titoli di grandi dimensioni; GTStandard-MMedium a 11–12px è utilizzato per le microdidascalie. Ogni variante di carattere è visualizzata con un peso ottico di 400: la gerarchia dei caratteri è ottenuta attraverso sottili sfumature e una fitta spaziatura negativa tra le lettere, piuttosto che con un contrasto audace. Questo è uno stile distintivo: Shop non urla con caratteri in grassetto, ma modella il testo attraverso la spaziatura tra le lettere.
- Shopify Sans — sostituzione: Inter · contorni 400, 700 · Riservato ai messaggi a livello di sistema, come i banner di caricamento delle app e il testo di consenso ai cookie.
Intervalli e forma
| Scopo | Senso |
|---|---|
| Densità | media |
| Passo base | 12px |
| Raggio del pulsante | 9999px |
| Raggio della carta | 28px |
| Ombre | ombre morbide |
| Tra le sezioni | 64px |
| Larghezza del pannello | 1200px |
L'IA creerà il tuo sito web nello stile Shop e lo riempirà
- Pubblica prodotti e contenuti tramite il link: Instagram, TikTok, Facebook.
- Trasferisci i contenuti dal tuo vecchio sito: basta specificare l'indirizzo.
- Design moderno sul miglior motore: React ( Next.js) con rendering lato server e ottimizzazione SEO integrata.
- Ottimizzazione SEO completamente automatizzata per i risultati di ricerca e raccomandazioni basate su reti neurali.
Stili simili
- Cursor — Un accogliente laboratorio di pergamena, illuminato da braci ardenti.
- Slush — universo gonfiabile di adesivi su carta pastello
- MindMarket — Un accogliente libro di fiabe su carta color crema: una tela editoriale conviviale dove grandi titoli Inter e personaggi di carta ritagliati convivono su una superficie morbida come un adesivo, baciata dal sole.
- Airbnb — Una tranquilla parete bianca della galleria con un unico segnalibro rosso corallo.
- Superr — Un caldo quaderno scolastico nella morbida luce del pomeriggio. Una pagina color crema, un pennarello arancione senza cappuccio e una pila di adesivi plastificati con i nomi, pronti per essere staccati.
- Apple (España) — La galleria del museo, immersa in una tenue luce naturale, è un unico, affascinante spazio bianco e etereo, dove ogni opera è illuminata da un faretto proiettato su una parete leggermente colorata.
- Lamborghini — Carrozzeria nera nello showroom, sotto i riflettori - un'auto gialla
- Amplemarket — Un luogo di lavoro baciato dal sole e cosparso di coriandoli
- Getharvest — Una scrivania all'ora d'oro: una tela color crema caldo, cartoline bianche appese alla tela e un'unica fiamma arancione brillante.
- Agence Foudre — La copertina della rivista è di un delicato color rosa che ricorda il rossetto.
- Drive Capital — Poster retrò per un viaggio in auto su carta calda
- Apple (España) — vetrina bianca da galleria