Shop
Plaukiojantis prekybos žvaigždynas ant balto marmuro
Internetinė parduotuvė veikia pagal „baltos drobės“ modelį, kai produktai rodomi kaip didelės, smarkiai išlenktos paveikslėlių kortelės, o ne miniatiūrų tinkleliai. Visa sąsaja yra neįtikėtinai sklandi: 20–28 pikselių spinduliai visame ekrane, tablečių formos valdikliai ir kompaktiškas 16 pikselių „GT Standard“ korpusas su griežtu negatyvo sekimu, dėl kurio tekstas yra aiškus ir paryškintas. Vienintelis ryškus sistemos akcentas yra ryški violetinė spalva (#5433eb), kuri matoma logotipe, apskritame paieškos rezultatų lauke ir kaip tamsintas šešėlis ant to paties mygtuko. Likusi paletės dalis yra šiltai neutrali: balti paviršiai, subtili šaltai pilka drobė, subtilūs rėmeliai ir beveik juodas tekstas. Tankis išlieka kompaktiškas su 12 pikselių tarpeliais, tačiau pagrindinio elemento ir kategorijų juostelės „kvėpuoja“ dėl dosnaus vertikalaus 64–80 pikselių ritmo, todėl prekybos patirtis labiau primena naršymą, o ne katalogą.
Didžiausias plotis yra 1200 pikselių, centre ant permatomo #f2f4f5 drobės, o kairėje pusėje yra nuolatinė 64 pikselių pločio šoninė juosta, kurioje yra tik naršymo piktogramos. Pagrindinis elementas yra viso pločio juostelė, kurioje produktų kortelės yra virš centre esančio violetinio „parduotuvės“ logotipo, o tiesiai po juo – piliulės formos paieškos juosta. Kategorijų piliulės išdėstytos vienoje centre esančioje eilutėje po paieškos juosta. Turinio skyriai (Moterys, Vyrai, Grožis, Namai, Kūdikiai ir vaikai) yra kaip skirtos juostelės, kurių kiekvienoje yra 4 stulpelių tinklelis su produktų vaizdais arba 2 stulpelių „pagrindinis elementas ir tinklelis“ kompozicija. Vertikalus ritmas yra dosnus: 64–80 pikselių tarp pagrindinių skyrių. Poraštė yra tamsi juostelė puslapio apačioje su stulpelių formos nuorodų grupėmis. Karuselės rodyklės dešinėje horizontalių produktų skydelių pusėje rodo slenkamą turinį be puslapiavimo taškų.
Fotografija yra dominuojantis vizualinis elementas: viso ekrano produktų nuotraukos baltame fone, apkirptos santykiu 1:1, ir gyvenimo būdo vaizdai su šiltais žemės tonais (smėlio, terakotos, šalavijo, dramblio kaulo). Produktų vaizdai turi savo spalvą – vartotojo sąsaja išlieka achromatinė, todėl produktų atspalviai suteikia vizualinės įvairovės. Prekių ženklų logotipai rodomi kaip perdengiantis tekstas ant tamsių arba šviesių pagrindinių vaizdų, o ne kaip atskiros piktogramos. Pagrindinėje kompozicijoje produktų kortelės išdėstytos kaip plaukiojantis, šiek tiek persidengiantis žvaigždynas virš žodinio ženklo. Piktogramos yra minimalistinės ir vienspalvės (juodi kontūrai), išskyrus kategorijų piktogramas, kuriose naudojama viena prekės ženklo spalva. Produktų vaizduose nėra iliustracijų, 3D efektų ar gradientų.
Paletė
Prekės ženklas
- Shop Violet
#5433eb— Siųsti mygtukas, punktyrinis teksto ženklas ir prekės ženklo logotipas yra vieninteliai akcentai, pabrėžiantys veiksmą ir individualumą baltame fone. - Violet Wash
#c0b5f3— Už violetinio siuntimo mygtuko yra permatoma aureolė, kuri išlaiko švytėjimą nekeisdama atspalvio.
Neutralus
- Canvas Mist
#f2f4f5— Puslapio fonas ir papildomas paviršiaus apdorojimas už iškilusių kortelių. - Pure White
#ffffff— Pagrindinis paviršius kortelėms, įvesties laukams, plaukiojantiems ženklams ir piliulės formos mygtukams. - Ink Black
#000000— Pagrindinis tekstas, antraštės, piktogramos, naršymo simboliai ir produktų kortelės tamsiuoju režimu. - Faint Border
#ebebeb— Plonos skiriamosios linijos ant kortelių, įvesties laukų kontūrai ir piliulės formos mygtukų rėmeliai. - Muted Gray
#787574— Antrinis tekstas, naršymo etiketės, piktogramų kontūrai, kai jie neaktyvūs - Cool Stone
#cccccc— Vietos rezervavimo ženklai, išjungtos būsenos ir neaktyvių piktogramų fonai
Tipografija
nuo 11 iki 16 pikselių · 4 žingsniai
- GT Standard — pakeitimas: Inter · kontūrai 400 · Pagrindinis šriftas visais dydžiais – tiek pagrindiniam tekstui, tiek antraštėms. „GTStandard-MRegular“, kurio dydis 16 pikselių / -0,031 em, yra pagrindinis šriftas pagrindiniam tekstui, mygtukams ir etiketėms. „GTStandard-MSemibold“, kurio dydis 20 pikselių / -0,05 em, naudojamas kelioms didelėms antraštėms; „GTStandard-MMedium“, kurio dydis 11–12 pikselių, naudojamas mikroantraštėms. Kiekvienas šrifto variantas rodomas su 400 optiniu svoriu – šrifto hierarchija pasiekiama naudojant subtilius gradientus ir tankų neigiamą raidžių tarpą, o ne paryškintą kontrastą. Tai yra firminis stilius: parduotuvė neskleidžia ryškumo paryškintais šriftais, o formuoja tekstą naudodama raidžių tarpus.
- Shopify Sans — pakeitimas: Inter · kontūrai 400, 700 · Rezervuota sistemos lygio pranešimams, pvz., programėlių įkėlimo reklaminėms juostoms ir slapukų sutikimo tekstui.
Intervalai ir forma
| Tikslas | Reikšmė |
|---|---|
| Tankis | vidutinis |
| Pagrindinis žingsnis | 12px |
| Mygtuko spindulys | 9999px |
| Kortelės spindulys | 28px |
| Šešėliai | švelnūs šešėliai |
| Tarp sekcijų | 64px |
| Puslapio plotis | 1200px |
Dirbtinis intelektas sukurs jūsų svetainę Shop stiliumi ir ją užpildys
- Užpildykite produktais ir įrašais per nuorodą – Instagram, TikTok, Facebook.
- Perkelkite turinį iš senos svetainės – tiesiog nurodykite adresą.
- Modernus dizainas geriausiame variklyje: React ( Next.js) su serverio atvaizdavimu ir SEO optimizavimu iš karto.
- Visiškai automatizuotas SEO optimizavimas paieškos rezultatams ir neuroninių tinklų rekomendacijoms.
Panašūs stiliai
- Cursor — Jauki pergamentų dirbtuvė, apšviesta rusenančių žarijų
- Slush — Pripučiama lipdukų visata ant pastelinio popieriaus
- MindMarket — Jauki pasakų knyga ant kreminio popieriaus – draugiška redakcinė drobė, kurioje saulės nutviekstame, minkštame, lyg lipdukas, paviršiuje susijungia didelės „Inter“ antraštės ir iškirpti popieriniai personažai.
- Airbnb — Rami balta galerijos siena su vienu koralų raudonumo skirtuku
- Superr — Šiltas mokyklinis sąsiuvinis švelnioje popietės šviesoje. Kreminės spalvos puslapis, oranžinis žymeklis be dangtelio ir krūvelė laminuotų vardų lipdukų, laukiančių, kol bus nulupti.
- Apple (España) — Muziejaus galerija, švelniai dienos šviesoje, yra vientisa, žavi, nesvari balta erdvė, kurioje kiekvienas eksponatas apšviestas prožektoriaus šviesa prie švelniai tamsintos sienos.
- Lamborghini — Juoda kėbulo spalva salone, prožektorių šviesoje – vienas geltonas automobilis
- Amplemarket — Saulės nutvieksta darbovietė, nusėta konfeti
- Getharvest — Stalas auksinę valandą – šilta kreminė drobė, ant drobės kabančios baltos atvirukės ir viena ryškiai oranžinė liepsna
- Agence Foudre — Žurnalo viršelis yra švelniai rožinės spalvos, primenančios lūpų dažus.
- Drive Capital — Retro kelionės automobiliu plakatas ant šilto popieriaus
- Apple (España) — balta galerijos vitrina