Shop
Valgel marmoril hõljuv kauplemistähtkuju
Veebipood toimib "valge lõuendi" mudelil, kus tooteid kuvatakse suurte, tugevalt kõverate pildikaartidena, mitte pisipiltide ruudustikuna. Kogu liides on uskumatult sujuv: 20–28 piksli raadiused kogu ulatuses, pillikujulised juhtnupud ja kompaktne 16 piksliga GT Standard korpus tiheda negatiivse jälgimisega, mis muudab teksti teravaks ja julgeks. Süsteemi ainus julge aktsent on erk lilla (#5433eb), mis ilmub logol, ringikujulisel otsingutulemuste väljal ja toonitud varjuna samal nupul. Ülejäänud palett on soe neutraalne: valged pinnad, õrn jahe hall lõuend, õrnad äärised ja peaaegu must tekst. Tihedus jääb kompaktseks 12 piksli suuruste ääristega, kuid kangelase ja kategooria triibud hingavad tänu heldele vertikaalsele rütmile 64–80 pikslit, muutes kaubanduskogemuse pigem sirvimise kui kataloogi sarnaseks.
Maksimaalne laius on 1200 pikslit, keskel poolläbipaistval #f2f4f5 lõuendil, vasakul püsiva 64 piksli laiuse külgribaga, mis sisaldab ainult navigeerimisikoone. Põhielement on täislaiuses riba, mille tsentreeritud lilla "poe" logo kohal on tootekaardid ja selle all otse pillikujuline otsinguriba. Kategooriapillid on paigutatud ühte tsentreeritud ritta otsinguriba alla. Sisuosad (naised, mehed, ilu, kodu, beebi ja lapsed) järgnevad määratud ribadena, millest igaüks sisaldab neljaveerulist ruudustikku tootepiltidega või kaheveerulist "põhielement ja ruudustik" kompositsiooni. Vertikaalne rütm on helde: peamiste osade vahel 64–80 pikslit. Jalus on lehe allosas asuv tume riba veerukujuliste lingigruppidega. Horisontaalsete tootepaneelide paremal küljel olevad karusselli nooled tähistavad keritavat sisu ilma lehekülgimispunktideta.
Fotograafia on domineeriv visuaalne element: täisekraanil kuvatavad tootefotod valgel taustal, kärbitud suhtega 1:1, ja elustiilipildid soojades mullastes toonides (beež, terrakota, salvei, elevandiluu). Tootepiltidel on oma värv – kasutajaliides jääb akromaatiliseks, võimaldades tootetoonidel pakkuda visuaalset mitmekesisust. Brändilogod ilmuvad pigem pealistekstina tumedatel või heledatel põhipiltidel kui üksikute ikoonidena. Põhikompositsioonis on tootekaardid paigutatud hõljuva, kergelt kattuva tähtkujuna sõnamärgi kohal. Ikoonid on minimalistlikud ja ühevärvilised (mustad kontuurid), välja arvatud kategooriaikoonid, mis kasutavad ühte brändivärvi. Tootepiltidel puuduvad illustratsioonid, 3D-efektid ega gradientvärvid.
Palett
Bränd
- Shop Violet
#5433eb— Saatmisnupp, punktiirjooneline tekstimärk ja brändi logo on ainsad aktsendid, mis valgel taustal tegevust ja individuaalsust esile toovad. - Violet Wash
#c0b5f3— Lilla saatmisnupu taga on poolläbipaistev halo, mis säilitab oma kuma tooni muutmata.
Neutraalne
- Canvas Mist
#f2f4f5— Lehekülje taust ja täiendav pinnatöötlus reljeefsete kaartide taga. - Pure White
#ffffff— Kaartide, sisestusväljade, ujuvate märkide ja tabletikujuliste nuppude peamine pind. - Ink Black
#000000— Põhitekst, pealkirjad, ikoonid, navigeerimissümbolid ja tootekaardid tumedas režiimis. - Faint Border
#ebebeb— Õhukesed eraldusjooned kaartidel, sisestusväljade piirjooned ja pillikujulised nupuraamid. - Muted Gray
#787574— Teisene tekst, navigeerimissildid, ikoonide kontuurid, kui need pole aktiivsed - Cool Stone
#cccccc— Kohatäited, keelatud olekud ja mitteaktiivsed ikoonide taustad
Tüpograafia
11-st 16 pikslini · 4 sammu
- GT Standard — asendamine: Inter · kontuurid 400 · Põhifont kõikides suurustes – nii põhiteksti kui ka pealkirjade puhul. GTStandard-MRegular suurusega 16px/-0.031em on põhiteksti, nuppude ja siltide peamine font. GTStandard-MSemibold suurusega 20px/-0.05em on kasutusel mitme suure pealkirja jaoks; GTStandard-MMedium suurusega 11–12px on kasutusel mikroallkirjade jaoks. Iga fondi variant kuvatakse optilise kaaluga 400 – fondi hierarhia saavutatakse peente gradientide ja tiheda negatiivse tähevahe, mitte paksu kontrasti abil. See on signatuurstiil: Shop ei rõhuta paksu kirjastiili, vaid kujundab teksti tähevahe abil.
- Shopify Sans — asendamine: Inter · kontuurid 400, 700 · Reserveeritud süsteemitaseme teadete, näiteks rakenduste laadimise ribareklaamide ja küpsiste nõusoleku teksti jaoks.
Intervallid ja vorm
| Eesmärk | Tähendus |
|---|---|
| Tihedus | keskmine |
| Põhisamm | 12px |
| Nupu raadius | 9999px |
| Kaardi raadius | 28px |
| Varjud | pehmed varjud |
| Sektsioonide vahel | 64px |
| Lehe laius | 1200px |
Tehisintellekt loob teie veebisaidi Shop stiilis ja täidab selle
- Täida toodete ja postitustega lingi kaudu - Instagram, TikTok, Facebook.
- Kanna sisu oma vanalt saidilt üle – täpsusta lihtsalt aadress.
- Moodne disain parimal mootoril: React ( Next.js) koos serveri renderdamise ja SEO optimeerimisega koheselt.
- Täisautomaatne SEO optimeerimine otsingutulemuste ja närvivõrgu soovituste jaoks.
Sarnased stiilid
- Cursor — Hubane pärgamenditöökoda, mida valgustavad hõõguvad söed
- Slush — pastellpaberil kleepsudest täispuhutav universum
- MindMarket — Hubane muinasjuturaamat kreemjal paberil – sõbralik toimetuse lõuend, kus päikesepaistelisel, kleebisepehmel pinnal eksisteerivad koos suured Interi pealkirjad ja paberist väljalõigatud tegelased.
- Airbnb — Vaikne valge galeriisein ühe korallpunase järjehoidjaga
- Superr — Soe koolivihik pehmes pärastlõunases valguses. Kreemikas leht, oranž marker ilma korgita ja hunnik lamineeritud nimekleebiseid ootamas eemaldamist.
- Apple (España) — Muuseumigalerii on pehmes päevavalguses ühtne, kütkestav, kaalutu valge ruum, kus iga eksponaati valgustab kergelt toonitud seina taustal olev prožektor.
- Lamborghini — Must kerevärv müügisalongis, prožektorite all - üks kollane auto
- Amplemarket — Päikesepaisteline töökoht, mis on üle puistatud konfettidega
- Getharvest — Kuldsel tunnil olev laud – soe kreemikas lõuend, lõuendil rippuvad valged postkaardid ja üksainus ereoranž leek
- Agence Foudre — Ajakirja kaaneleht on pehme roosa värviga, mis meenutab huulepulka.
- Drive Capital — Retro autoreisi plakat soojal paberil
- Apple (España) — valge galeriivitriin