Shopify
Polnočný skleník - Ochranné známky kvitnú na tmavo tyrkysovom pozadí, osvetlené jedinou iskrou mäty
Dizajnový systém Shopify je polnočnou dielňou pre obchod: takmer čierne plátno sýto tyrkysovo zelenou farbou, široké, sebavedomé bezpätkové písmo a jeden žiarivý mätový akcent, ktorý aktivuje interaktívne momenty. Rozhranie pripomína tmavú komoru, kde sú produkty a značky zdrojom svetla – fotografie a výklady obchodov žiaria na takmer čiernych povrchoch, zatiaľ čo chrómové prvky ustupujú. Komponenty sú geometrické, no zároveň jemné: karty s polomerom 12px s tenkými okrajmi, tlačidlá v tvare tabletky a písmo s hrúbkou 330, ktoré skôr šepká mierku ako kričí. Jediný chromatický interpunkčný znak (#36f4a4) sa používa striedmo na odkazoch, tagoch a stavoch zaostrenia, pričom farba je vyhradená pre funkčné momenty, aby sa zabezpečilo, že príbehy obchodníkov zostanú vizuálnym ústredným bodom.
Maximálna šírka je ~1280px, vycentrovaná, s úvodnými blokmi na celú šírku presahujúcimi kontajner s fotografiou. Rytmus stránky sa strieda: (1) tmavá úvodná stránka na celú šírku s prekrývajúcim sa nadpisom a tlačidlami s výzvou na akciu, (2) pohodlné tmavé sekcie s textovými a obrázkovými blokmi maximálnej šírky v 2 stĺpcoch alebo obrázkovými mriežkami v 3 stĺpcoch, (3) interaktívne panely s prezentáciami (karta produktu, kalkulačka dopravy, mapa sveta) zobrazené ako vyvýšené karty na hlbšom plátne. Navigácia je tvorená pevným horným panelom s logom + 3 navigačnými prvkami + sekundárnymi odkazmi + primárnym tlačidlom s výzvou na akciu, všetko zarovnané doprava. Vertikálny rytmus využíva 80px medzery medzi sekciami s plynulým prechodom – žiadne oddeľovače medzi tmavými sekciami, iba zmena tónu povrchu.
Vizuálny dizajn je primárne zameraný na predajcu: fotografie produktov v plnej veľkosti a fotografie z podujatí značiek nesú väčšinu vizuálnej váhy, často vo forme veľkých pozadí s prekrytým bielym textom. Obrázky sú ostro orezané, majú vysoký kontrast a slávnostný charakter (zvonenie zvončeka Nasdaq, skupinové pozdravy, detailné zábery produktov v rukách). Tmavé pozadie vytvára dojem, že tieto fotografie sú osvetlené reflektormi. Ilustrácie sú minimalistické – hlavnú vysvetľujúcu prácu vykonávajú vložené obrázky produktov a snímky obrazovky výkladov. Ikony sú monochromatické, so šírkou čiary 1,5 – 2 pixely, zvyčajne biele alebo #36f4a4 pre aktívne stavy.
Paleta
Značka
- Shopify Mint
#36f4a4— Indikátory aktívnej navigácie, zaostrovacie krúžky, zvýraznenie značiek a zvýraznenie odkazov pri podržaní kurzora myši sú jediným chromatickým leskom, ktorý vytvára pocit interaktivity na tmavom pozadí.
Neutrálny
- Midnight Forest
#02090a— Plátno stránky, obrázky na pozadí hlavičky, obrázky na pozadí sekcií - Deep Lichen
#061a1c— Hlavné povrchy kariet, vyvýšené panely, bloky obsahu. - Shaded Fern
#072720— Navigačný panel, ďalšie karty, sotva badateľné zdvihnutie panela. - Spruce Border
#1e2c31— Tenké okraje pre karty, deliace čiary, obrysy vstupných polí. - Abyss Indigo
#000a1e— Dodatočná plocha na vloženie produktov/ukážok, panely s popismi funkcií. - Pure White
#ffffff— Hlavný text, výplň tlačidiel, názov, logá.
Typografia
od 12 do 70px · 8 krokov
- Neue Haas Grotesk — náhrada: Inter · obrysy 330, 400, 500, 550, 600 · Základným typografickým systémom sú titulky s hrúbkou písma 70 – 96 px (330 – 400), ktoré sú skôr decentné ako výrazné; text s hrúbkou písma 16 – 18 px (400 – 500); a navigácia a používateľské rozhranie s hrúbkou písma 14 – 16 px (500 – 550). Ultraľahká hrúbka písma 330 pri veľkých veľkostiach obrazovky je charakteristickým znakom: vyjadruje sebavedomie skôr prostredníctvom zdržanlivosti ako mohutnosti.
- Inter Variable — náhrada: Inter · obrysy 400, 420, 450, 550 · Sekundárny typ písma používaný v prvkoch navigačného rozhrania, malých poznámkach, ovládacích prvkoch tabulátora a mikrotexte v pätách. Jeho o niečo väčšie malé písmená a štandardnejšie rozstupy medzi písmenami ho robia čitateľnejším pri kompaktných veľkostiach. Je tiež vhodný v situáciách, keď písmo s hrúbkou 420 vypĺňa medzeru medzi bežným a stredne veľkým písmom.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | priemerný |
| Základný krok | 12px |
| Polomer tlačidla | 9999px |
| Polomer karty | 12px |
| Tiene | nie - okraje namiesto tieňov |
| Medzi sekciami | 80px |
| Šírka stránky | 1280px |
Umelá inteligencia vytvorí vašu webovú stránku v štýle Shopify 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
- Retool — Teplá obsidiánová dielňa - povrch pre presné nástroje, osvetlený tlejúcimi uhlíkmi, kde sa všetko vytvára
- Elektron — Ovládací panel zariadenia o polnoci je takmer čierne plátno, kde žiaria fotografie produktov, zatiaľ čo rozhranie zostáva prakticky neviditeľné.
- REKKI — Ovládací panel letu vo fotolaboratóriu
- OFFFICE : — noir galéria pohltená monolitickým písmom
- Clyde — Výstavná miestnosť s jediným bodovým svetlom je takmer tmavou galériou, kde jedinou farbou v miestnosti je teplá prechodová guľa.
- Channel Studio — Štúdiové fotolaboratórium s jedným koralovým tienidlom na lampu
- Electronic Materials Office — Žeravý uhlík v galérii zdobenej dreveným uhlím
- ORYZO AI — Fotoesej o tmavej komore. Osamelý objekt vznášajúci sa v teplej tme, krémové písmo ako jediná dekorácia.
- Factory — Terminál „vojenskej miestnosti“ o polnoci. „Továreň“ je strohý čierny ovládací panel, kde pristane jediná biela karta ako rozoslanie osvetlené baterkou – jediným predmetom v miestnosti je samotné dielo.
- Hungry Tiger — Stena tandooru mala na sebe graffiti s odtieňmi kurkumy. Jednotná paleta zlatej a hrdzavohnedej s tak veľkým písmom, že to vyzerá skôr ako reklama na trhu s korením než ako webová stránka.
- Bibliothèque — Čierna galéria v tvare kocky pod reflektorom – osamelý osvetlený tanier v rozľahlej, tmavej hale
- Apple (España) — čierne divadlo s osvetlenými prvkami