Shop
Una constel·lació comercial flotant sobre marbre blanc
La botiga en línia funciona amb un model de "llenç blanc", amb productes que es mostren com a targetes d'imatge grans i molt corbades en lloc de quadrícules de miniatures. Tota la interfície és increïblement fluida: radis de 20-28 px a tot arreu, controls en forma de píndola i un cos GT Standard compacte de 16 px amb un seguiment negatiu ajustat que fa que el text sigui nítid i en negreta. L'únic accent en negreta del sistema és un porpra vibrant (#5433eb), que apareix al logotip, al camp circular de resultats de cerca i com una ombra tenyida al mateix botó. La resta de la paleta és neutra i càlida: superfícies blanques, un llenç gris fred i subtil, vores subtils i text gairebé negre. La densitat es manté compacta amb marcs de 12 px, però les franges de l'heroi i la categoria respiren gràcies a un ritme vertical generós de 64-80 px, fent que l'experiència comercial sembli més una navegació que un catàleg.
L'amplada màxima és de 1200 px, centrada en un llenç translúcid #f2f4f5, amb una barra lateral persistent de 64 px d'amplada a l'esquerra que només conté icones de navegació. L'element principal és una franja d'amplada completa, amb targetes de producte posicionades a sobre d'un logotip de "botiga" morat centrat i una barra de cerca en forma de píndola directament a sota. Les píndoles de categoria estan disposades en una sola fila centrada sota la barra de cerca. Les seccions de contingut (Dones, Homes, Bellesa, Llar, Nadons i Nens) segueixen com a franges designades, cadascuna amb una quadrícula de 4 columnes amb imatges de productes o una composició de "element principal i quadrícula" de 2 columnes. El ritme vertical és generós: 64–80 px entre seccions principals. El peu de pàgina és una franja fosca a la part inferior de la pàgina amb grups d'enllaços en forma de columna. Les fletxes de carrusel a la part dreta dels panells horitzontals de productes indiquen contingut desplaçable sense punts de paginació.
La fotografia és l'element visual dominant: fotos de productes a pantalla completa sobre un fons blanc, retallades a escala 1:1 i imatges d'estil de vida amb tons terrosos càlids (beix, terracota, sàlvia, ivori). Les imatges dels productes tenen el seu propi color: la interfície d'usuari roman acromàtica, cosa que permet que els tons dels productes proporcionin varietat visual. Els logotips de les marques apareixen com a text superposat a les imatges principals fosques o clares, en lloc de com a icones individuals. A la composició principal, les targetes de producte es posicionen com una constel·lació flotant i lleugerament superposada per sobre de la marca denominativa. Les icones són minimalistes i monocromes (contorns negres), amb l'excepció de les icones de categoria, que utilitzen un únic color de marca. No hi ha il·lustracions, efectes 3D ni degradats a les imatges dels productes.
Paleta
Marca
- Shop Violet
#5433eb— El botó d'enviar, la marca de text amb punts i el logotip de la marca són els únics detalls que destaquen l'acció i la individualitat sobre el fons blanc. - Violet Wash
#c0b5f3— Un halo translúcid darrere del botó d'enviament morat que manté la seva brillantor sense canviar de to.
Neutral
- Canvas Mist
#f2f4f5— Fons de pàgina i tractament superficial addicional darrere de targetes en relleu. - Pure White
#ffffff— La superfície principal per a targetes, camps d'entrada, signes flotants i botons en forma de píndola. - Ink Black
#000000— Text principal, encapçalaments, icones, símbols de navegació i targetes de producte en mode fosc. - Faint Border
#ebebeb— Línies divisòries primes en targetes, contorns de camps d'entrada i marcs de botons en forma de píndola. - Muted Gray
#787574— Text secundari, etiquetes de navegació, contorns d'icones quan estan inactius - Cool Stone
#cccccc— Marcadors de posició, estats desactivats i fons d'icones inactives
Tipografia
d'11 a 16 px · 4 passos
- GT Standard — reemplaçament: Inter · esquemes 400 · La font principal en totes les mides, tant per al text del cos com per als encapçalaments. GTStandard-MRegular a 16px/-0.031em és la font principal per al text del cos, els botons i les etiquetes. GTStandard-MSemibold a 20px/-0.05em s'utilitza per a diversos encapçalaments grans; GTStandard-MMedium a 11–12px s'utilitza per als microsubtítols. Cada variant de font es mostra amb un pes òptic de 400; la jerarquia de fonts s'aconsegueix mitjançant degradats subtils i un espaiat dens entre lletres negatiu, en lloc d'un contrast en negreta. Aquest és un estil característic: Shop no crida amb fonts en negreta, sinó que dóna forma al text mitjançant l'espaiat entre lletres.
- Shopify Sans — reemplaçament: Inter · esquemes 400, 700 · Reservat per a missatges a nivell de sistema, com ara bàners de càrrega d'aplicacions i text de consentiment per a galetes.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | mitjana |
| Pas bàsic | 12px |
| Radi del botó | 9999px |
| Radi de la targeta | 28px |
| Ombres | ombres suaus |
| Entre seccions | 64px |
| Amplada de la pàgina | 1200px |
La IA crearà el vostre lloc web a l'estil Shop i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- Cursor — Un acollidor taller de pergamí, il·luminat per brases fumejants
- Slush — univers inflable d'adhesius sobre paper pastel
- MindMarket — Un llibre de conte de fades acollidor sobre paper crema: un llenç editorial agradable on grans titulars d'Inter i personatges de paper retallats conviuen sobre una superfície suau com un adhesiu banyada pel sol.
- Airbnb — Una paret de galeria blanca i tranquil·la amb un únic punt de llibre vermell corall
- Superr — Un quadern escolar càlid a la suau llum de la tarda. Una pàgina de color crema, un retolador taronja sense tapa i una pila d'adhesius plastificats amb el nom que esperen ser desenganxats.
- Apple (España) — La galeria del museu, a la llum suau del dia, és un espai blanc únic, captivador i sense pes, amb cada exposició il·luminada per un focus contra una paret lleugerament tintada.
- Lamborghini — Color negre de la carrosseria a la sala d'exposició, sota els focus: un cotxe groc
- Amplemarket — Un lloc de treball assolellat i ple de confeti
- Getharvest — Un escriptori a l'hora daurada: un llenç de color crema càlid, postals blanques penjades al llenç i una única flama taronja brillant
- Agence Foudre — La portada de la revista és d'un color rosa suau que recorda el pintallavis.
- Drive Capital — Cartell retro de viatge per carretera sobre paper càlid
- Apple (España) — vitrina de galeria blanca