Shop
Plovoucí obchodní souhvězdí na bílém mramoru
Internetový obchod funguje na modelu „bílého plátna“, kde se produkty zobrazují jako velké, silně zakřivené obrázkové karty, nikoli jako mřížky miniatur. Celé rozhraní je neuvěřitelně plynulé: poloměry 20–28 pixelů v celém textu, ovládací prvky ve tvaru pilulky a kompaktní tělo GT Standard o rozlišení 16 pixelů s úzkým negativním sledováním, které dělá text ostrým a tučným. Jediným tučným akcentem systému je zářivá fialová (#5433eb), která se objevuje v logu, kruhovém poli s výsledky vyhledávání a jako tónovaný stín na stejném tlačítku. Zbytek palety je teplý neutrální: bílé povrchy, jemné chladné šedé plátno, jemné okraje a téměř černý text. Hustota zůstává kompaktní s 12px mezerami, ale pruhy hrdiny a kategorií dýchají díky velkorysému vertikálnímu rytmu 64–80 pixelů, takže zážitek z nakupování působí spíše jako prohlížení než katalog.
Maximální šířka je 1200 pixelů, vycentrovaná na průsvitném plátně #f2f4f5, s perzistentním postranním panelem o šířce 64 pixelů vlevo, který obsahuje pouze navigační ikony. Hlavním prvkem je proužek o plné šířce s kartami produktů umístěnými nad centrovaným fialovým logem „obchodu“ a vyhledávacím panelem ve tvaru pilulky přímo pod ním. Pilulky kategorií jsou uspořádány v jednom středovém řádku pod vyhledávacím panelem. Sekce obsahu (Ženy, Muži, Krása, Domov, Děti a miminka) následují jako určené proužky, každá obsahuje 4sloupcovou mřížku s obrázky produktů nebo 2sloupcovou kompozici „hlavní prvek a mřížka“. Vertikální rytmus je velkorysý: 64–80 pixelů mezi hlavními sekcemi. Zápatí je tmavý proužek ve spodní části stránky se skupinami odkazů ve tvaru sloupců. Karuselové šipky na pravé straně vodorovných panelů produktů označují posouvatelný obsah bez bodů stránkování.
Dominantním vizuálním prvkem je fotografie: celoobrazovkové fotografie produktů na bílém pozadí, oříznuté v poměru 1:1, a lifestylové obrázky s teplými zemitými tóny (béžová, terakotová, šalvějová, slonovinová). Obrázky produktů mají svou vlastní barvu – uživatelské rozhraní zůstává achromatické, což umožňuje odstíny produktů poskytovat vizuální rozmanitost. Loga značek se zobrazují jako překryvný text na tmavých nebo světlých hlavních obrázcích, spíše než jako jednotlivé ikony. V hlavní kompozici jsou karty produktů umístěny jako plovoucí, mírně překrývající se souhvězdí nad slovním označením. Ikony jsou minimalistické a černobílé (černé obrysy), s výjimkou ikon kategorií, které používají jednu barvu značky. V obrázcích produktů nejsou žádné ilustrace, 3D efekty ani přechody.
Paleta
Značka
- Shop Violet
#5433eb— Tlačítko pro odeslání, tečkovaný text a logo značky jsou jediné akcenty, které na bílém pozadí zdůrazňují akci a individualitu. - Violet Wash
#c0b5f3— Průsvitná svatozář za fialovým tlačítkem pro odeslání, která si udržuje svou záři bez změny odstínu.
Neutrální
- Canvas Mist
#f2f4f5— Pozadí stránky a dodatečná povrchová úprava za vyvýšenými kartami. - Pure White
#ffffff— Hlavní plocha pro karty, vstupní pole, plovoucí cedule a tlačítka ve tvaru pilulek. - Ink Black
#000000— Hlavní text, nadpisy, ikony, navigační symboly a karty produktů v tmavém režimu. - Faint Border
#ebebeb— Tenké dělicí čáry na kartách, obrysy vstupních polí a rámečky tlačítek ve tvaru pilulky. - Muted Gray
#787574— Sekundární text, navigační popisky, obrysy ikon, když je neaktivní - Cool Stone
#cccccc— Zástupné symboly, deaktivované stavy a neaktivní pozadí ikon
Typografie
od 11 do 16 pixelů · 4 kroky
- GT Standard — nahrazení: Inter · obrysy 400 · Primární písmo všech velikostí – pro text i nadpisy. GTStandard-MRegular s rozlišením 16px/-0,031em je primárním písmem pro text, tlačítka a popisky. GTStandard-MSemibold s rozlišením 20px/-0,05em se používá pro několik velkých nadpisů; GTStandard-MMedium s rozlišením 11–12px se používá pro mikrotituly. Každá varianta písma se zobrazuje s optickou vahou 400 – hierarchie písem je dosaženo jemnými přechody a hustým negativním roztečem písmen, spíše než tučným kontrastem. Toto je charakteristický styl: Shop nekřičí tučným písmem, ale spíše tvaruje text roztečí písmen.
- Shopify Sans — nahrazení: Inter · obrysy 400, 700 · Vyhrazeno pro zprávy na úrovni systému, jako jsou bannery pro načítání aplikací a text souhlasu s používáním souborů cookie.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | průměrný |
| Základní krok | 12px |
| Poloměr tlačítka | 9999px |
| Poloměr karty | 28px |
| Stíny | měkké stíny |
| Mezi sekcemi | 64px |
| Šířka stránky | 1200px |
Umělá inteligence vám vytvoří web ve stylu Shop a naplní ho
- Doplňujte produkty a příspěvky přes odkaz - Instagram, TikTok, Facebook.
- Přeneste obsah ze starého webu – stačí zadat adresu.
- Moderní design na nejlepším enginu: React ( Next.js) s renderováním na serveru a SEO optimalizací ihned po vybalení.
- Plně automatizovaná SEO optimalizace pro výsledky vyhledávání a doporučení neuronových sítí.
Podobné styly
- Cursor — Útulná pergamenová dílna, osvětlená doutnajícím uhlím
- Slush — nafukovací vesmír samolepek na pastelovém papíře
- MindMarket — Útulná pohádková knížka na krémovém papíře - přátelské redakční plátno, kde na sluncem zalitém, měkkém povrchu jako samolepky koexistují velké titulky Interu a vystřižené papírové postavičky.
- Airbnb — Tichá bílá galerijní stěna s jedinou korálově červenou záložkou
- Superr — Teplý školní sešit v měkkém odpoledním světle. Krémově zbarvená stránka, oranžový fix bez krytky a hromádka zalaminovaných jmenovek čekajících na odlepení.
- Apple (España) — Galerie muzea, zalitá měkkým denním světlem, je jediný, podmanivý, beztížný bílý prostor, kde každý exponát osvětluje bodové světlo na lehce tónované stěně.
- Lamborghini — Černá barva karoserie v showroomu, pod reflektory - jedno žluté auto
- Amplemarket — Sluncem zalité pracoviště poseté konfetami
- Getharvest — Stůl ve zlaté hodince – teplé krémové plátno, na plátně zavěšené bílé pohlednice a jediný jasně oranžový plamen
- Agence Foudre — Titulní strana časopisu je v jemně růžové barvě připomínající rtěnku.
- Drive Capital — Retro plakát s výletem na teplém papíře
- Apple (España) — bílá galerijní vitrína