Shop
Vznášajúce sa obchodné súhvezdie na bielom mramore
Internetový obchod funguje na modeli „bieleho plátna“, pričom produkty sa zobrazujú ako veľké, silne zakrivené obrázkové karty, a nie ako mriežky miniatúr. Celé rozhranie je neuveriteľne plynulé: polomery 20 – 28 pixelov v celom texte, ovládacie prvky v tvare tabletky a kompaktné 16px GT Standard telo s úzkym negatívnym sledovaním, ktoré robí text ostrým a tučným. Jediným tučným akcentom systému je žiarivá fialová (#5433eb), ktorá sa objavuje v logu, kruhovom poli s výsledkami vyhľadávania a ako tónovaný tieň na tom istom tlačidle. Zvyšok palety je teplý neutrálny: biele povrchy, jemné chladné sivé plátno, jemné okraje a takmer čierny text. Hustota zostáva kompaktná s 12px medzerami, ale pruhy hrdinu a kategórie dýchajú vďaka veľkorysému vertikálnemu rytmu 64 – 80 pixelov, vďaka čomu sa zážitok z nakupovania cíti skôr ako prehliadanie než katalóg.
Maximálna šírka je 1200 pixelov, vycentrovaná na priesvitnom plátne #f2f4f5, s perzistentným bočným panelom so šírkou 64 pixelov vľavo, ktorý obsahuje iba navigačné ikony. Hlavným prvkom je pás s plnou šírkou, s kartami produktov umiestnenými nad centrovaným fialovým logom „obchodu“ a vyhľadávacím panelom v tvare tabletky priamo pod ním. Tabletky s kategóriami sú usporiadané v jednom riadku vycentrovanom pod vyhľadávacím panelom. Sekcie obsahu (Ženy, Muži, Krása, Domov, Bábätká a deti) nasledujú ako určené pásy, pričom každá obsahuje 4-stĺpcovú mriežku s obrázkami produktov alebo 2-stĺpcovú kompozíciu „hlavný prvok a mriežka“. Vertikálny rytmus je veľkorysý: 64 – 80 pixelov medzi hlavnými sekciami. Päta je tmavý pás v dolnej časti stránky so skupinami odkazov v tvare stĺpcov. Karuselové šípky na pravej strane horizontálnych panelov produktov označujú posúvateľný obsah bez bodov stránkovania.
Dominantným vizuálnym prvkom je fotografia: fotografie produktov na celej obrazovke na bielom pozadí, orezané v pomere 1:1, a obrázky životného štýlu s teplými zemitými tónmi (béžová, terakotová, šalviová, slonovinová). Obrázky produktov majú svoju vlastnú farbu – používateľské rozhranie zostáva achromatické, čo umožňuje odtieňom produktov poskytovať vizuálnu rozmanitosť. Logá značiek sa zobrazujú ako prekrývajúci text na tmavých alebo svetlých hlavných obrázkoch, a nie ako samostatné ikony. V hlavnej kompozícii sú karty produktov umiestnené ako plávajúca, mierne prekrývajúca sa konštelácia nad slovným označením. Ikony sú minimalistické a monochromatické (čierne obrysy), s výnimkou ikon kategórií, ktoré používajú jednu farbu značky. Na obrázkoch produktov nie sú žiadne ilustrácie, 3D efekty ani prechody.
Paleta
Značka
- Shop Violet
#5433eb— Tlačidlo na odoslanie, bodkovaný text a logo značky sú jediné akcenty, ktoré na bielom pozadí zvýrazňujú akciu a individualitu. - Violet Wash
#c0b5f3— Priesvitná svätožiara za fialovým tlačidlom odoslania, ktorá si zachováva svoju žiaru bez zmeny odtieňa.
Neutrálny
- Canvas Mist
#f2f4f5— Pozadie stránky a dodatočná povrchová úprava za vyvýšenými kartami. - Pure White
#ffffff— Hlavná plocha pre karty, vstupné polia, plávajúce značky a tlačidlá v tvare tabletky. - Ink Black
#000000— Hlavný text, nadpisy, ikony, navigačné symboly a karty produktov v tmavom režime. - Faint Border
#ebebeb— Tenké deliace čiary na kartách, obrysy vstupných polí a rámčeky tlačidiel v tvare tabletky. - Muted Gray
#787574— Sekundárny text, navigačné štítky, obrysy ikon, keď je neaktívny - Cool Stone
#cccccc— Zástupné symboly, deaktivované stavy a neaktívne pozadia ikon
Typografia
od 11 do 16px · 4 kroky
- GT Standard — náhrada: Inter · obrysy 400 · Primárne písmo vo všetkých veľkostiach – pre text aj nadpisy. GTStandard-MRegular s veľkosťou 16px/-0,031em je primárne písmo pre text, tlačidlá a popisky. GTStandard-MSemibold s veľkosťou 20px/-0,05em sa používa pre niekoľko veľkých nadpisov; GTStandard-MMedium s veľkosťou 11–12px sa používa pre mikrotituly. Každý variant písma sa zobrazuje s optickou váhou 400 – hierarchia písma sa dosahuje jemnými prechodmi a hustým negatívnym rozstupom písmen, a nie tučným kontrastom. Toto je charakteristický štýl: Shop nekričí tučným písmom, ale skôr tvaruje text rozstupmi písmen.
- Shopify Sans — náhrada: Inter · obrysy 400, 700 · Vyhradené pre správy na úrovni systému, ako sú bannery na načítanie aplikácií a text súhlasu s používaním súborov cookie.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | priemerný |
| Základný krok | 12px |
| Polomer tlačidla | 9999px |
| Polomer karty | 28px |
| Tiene | mäkké tiene |
| Medzi sekciami | 64px |
| Šírka stránky | 1200px |
Umelá inteligencia vytvorí vašu webovú stránku v štýle Shop a naplní ju
- Doplňte produktmi a príspevkami cez odkaz - Instagram, TikTok, Facebook.
- Preneste obsah zo svojej starej stránky – stačí zadať adresu.
- Moderný dizajn na najlepšom engine: React ( Next.js) s vykresľovaním servera a SEO optimalizáciou hneď po vybalení.
- Plne automatizovaná SEO optimalizácia pre výsledky vyhľadávania a odporúčania neurónových sietí.
Podobné štýly
- Cursor — Útulná pergamenová dielňa, osvetlená tlejúcim uhlím
- Slush — nafukovací vesmír nálepiek na pastelovom papieri
- MindMarket — Útulná rozprávková kniha na krémovom papieri - príjemné redakčné plátno, kde na slnkom zaliatom, mäkkom povrchu ako nálepka koexistujú veľké titulky Interu a vystrihnuté papierové postavičky.
- Airbnb — Tichá biela galerijná stena s jedinou koralovo červenou záložkou
- Superr — Teplý školský zošit v mäkkom popoludňajšom svetle. Krémová strana, oranžová fixka bez krytky a kopa zalaminovaných nálepiek s menom, ktoré čakajú na odlepenie.
- Apple (España) — Galéria múzea, zaliata jemným denným svetlom, je jediný, podmanivý, beztiažový biely priestor, pričom každý exponát je osvetlený bodovým svetlom na jemne tónovanej stene.
- Lamborghini — Čierna farba karosérie v showroome, pod reflektormi - jedno žlté auto
- Amplemarket — Slnkom zaliate pracovisko posiate konfetami
- Getharvest — Stôl v zlatej hodinke – teplé krémové plátno, na plátne zavesené biele pohľadnice a jediný jasne oranžový plameň.
- Agence Foudre — Titulná strana časopisu je v jemne ružovej farbe pripomínajúcej rúž.
- Drive Capital — Retro plagát o výlete autom na teplom papieri
- Apple (España) — biela vitrína na galériu