Shopify
Půlnoční skleník - Ochranné známky kvetou na tmavě tyrkysovém pozadí, osvětlené jedinou jiskrou máty
Designový systém Shopify je půlnoční dílnou pro obchod: téměř černé plátno tónované tmavě tyrkysově zelenou, široké, sebevědomé bezpatkové písmo a jeden zářivý mátový akcent, který aktivuje interaktivní momenty. Rozhraní připomíná temnou komoru, kde produkty a značky jsou zdrojem světla – fotografie a výlohy září na téměř černých površích, zatímco chromované prvky ustupují. Komponenty jsou geometrické, ale jemné: karty s poloměrem 12px s tenkými okraji, tlačítka ve tvaru pilulek a písmo s tloušťkou 330, které šeptá měřítko spíše než křičí. Jediný chromatický interpunkční znak (#36f4a4) se používá střídmě na odkazech, tazích a stavech fokusu, přičemž barva je vyhrazena pro funkční momenty, aby se zajistilo, že obchodní příběhy zůstanou vizuálním ústředním bodem.
Maximální šířka je ~1280px, vycentrovaná, s úvodními bloky na celou šířku přesahujícími rámec fotoboxu. Rytmus stránky se střídá: (1) tmavá úvodní stránka na celou šířku s překrývajícím se nadpisem a tlačítky s výzvou k akci, (2) pohodlné tmavé sekce s textovými a obrázkovými bloky maximální šířky ve 2 sloupcích nebo obrázkovými mřížkami ve 3 sloupcích, (3) interaktivní panely s ukázkami (karta produktu, kalkulačka dopravy, mapa světa) zobrazené jako vyvýšené karty na hlubším plátně. Navigace je tvořena pevnou horní lištou s logem + 3 navigačními prvky + sekundárními odkazy + primárním tlačítkem s výzvou k akci, vše zarovnáno vpravo. Vertikální rytmus využívá 80px mezery mezi sekcemi s plynulým přechodem – žádné oddělovače mezi tmavými sekcemi, pouze změna tónu povrchu.
Vizuální design je primárně zaměřen na prodejce: fotografie produktů v plné velikosti a fotografie z akcí značek nesou většinu vizuální váhy, často ve formě velkých pozadí s překrytým bílým textem. Obrázky jsou ostře oříznuté, vysoce kontrastní a slavnostní povahy (zvonění zvonu Nasdaqu, skupinové pozdravy, detailní záběry produktů v rukou). Tmavé pozadí vytváří dojem, že tyto fotografie jsou osvětleny reflektory. Ilustrace jsou minimalistické – hlavní vysvětlující práci vykonávají vložené obrázky produktů a snímky obrazovky výloh. Ikony jsou černobílé, s šířkou čáry 1,5–2 pixelů, obvykle bílé nebo #36f4a4 pro aktivní stavy.
Paleta
Značka
- Shopify Mint
#36f4a4— Aktivní navigační indikátory, zaostřovací kroužky, zvýraznění štítků a zvýraznění odkazů při najetí myší jsou jediným chromatickým třpytem, který na tmavém pozadí vytváří dojem interaktivity.
Neutrální
- Midnight Forest
#02090a— Plátno stránky, obrázky na pozadí záhlaví, obrázky na pozadí sekcí - Deep Lichen
#061a1c— Hlavní plochy karet, vyvýšené panely, bloky obsahu. - Shaded Fern
#072720— Navigační panel, další karty, sotva znatelné vyvýšení panelu. - Spruce Border
#1e2c31— Tenké okraje pro karty, dělicí čáry, obrysy vstupních polí. - Abyss Indigo
#000a1e— Další plocha pro vložení produktů/ukázek, panely s popisy funkcí. - Pure White
#ffffff— Hlavní text, výplň tlačítek, název, loga.
Typografie
od 12 do 70 pixelů · 8 kroků
- Neue Haas Grotesk — nahrazení: Inter · obrysy 330, 400, 500, 550, 600 · Základním typografickým systémem jsou titulky s tloušťkou písma 70–96 px (330–400), které jsou spíše decentní než křiklavé; text textu s tloušťkou písma 16–18 px (400–500); a navigace a uživatelské rozhraní s tloušťkou písma 14–16 px (500–550). Ultratenká tloušťka písma 330 na velkých obrazovkách je charakteristickým rysem: vyjadřuje sebevědomí spíše skrze zdrženlivost než mohutnost.
- Inter Variable — nahrazení: Inter · obrysy 400, 420, 450, 550 · Sekundární typ písma používaný v prvcích navigačního rozhraní, malých poznámkách, ovládacích prvcích tabulace a mikrotextu v zápatí. Jeho o něco větší malá písmena a standardní rozteč písmen usnadňují čitelnost v kompaktních velikostech. Je také vhodný pro situace, kdy písmo s gramáží 420 vyplňuje mezeru mezi běžným a středně velkým písmem.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | průměrný |
| Základní krok | 12px |
| Poloměr tlačítka | 9999px |
| Poloměr karty | 12px |
| Stíny | ne - okraje místo stínů |
| Mezi sekcemi | 80px |
| Šířka stránky | 1280px |
Umělá inteligence vám vytvoří web ve stylu Shopify 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
- Retool — Teplá obsidiánová dílna - plocha pro přesné nástroje, osvětlená doutnajícími uhlíky, kde se všechno vytváří
- Elektron — Ovládací panel zařízení o půlnoci je téměř černé plátno, kde září fotografie produktů, zatímco rozhraní zůstává prakticky neviditelné.
- REKKI — Řídicí panel letu ve fotolabu
- OFFFICE : — noir galerie pohlcená monolitickým písmem
- Clyde — Showroom s jediným bodovým světlem je téměř tmavá galerie, kde jedinou barvou v místnosti je teplý gradientní koule.
- Channel Studio — Studiová fotolaboratoř s jedním korálovým stínidlem
- Electronic Materials Office — Žhavý uhlík v galerii zdobené dřevěným uhlím
- ORYZO AI — Fotoesej o temné komoře. Osamělý objekt vznášející se v teplé tmě, krémové písmo jako jediná dekorace.
- Factory — Terminál „válečné místnosti“ o půlnoci. „Továrna“ je ostře černý ovládací panel, kde přistane jediná bílá karta jako zpráva osvětlená baterkou – jediným předmětem v místnosti je samotné dílo.
- Hungry Tiger — Kurkumově zářivé graffiti na stěně tandooru. Jednotná paleta zlaté a rezavě hnědé, s písmem tak velkým, že to vypadá spíš jako cedule trhu s kořením než jako webové stránky.
- Bibliothèque — Černá galerie ve tvaru krychle pod reflektorem – osamělý osvětlený talíř v rozlehlé, temné hale
- Apple (España) — černé divadlo s osvětlenými prvky