Shopify
Keskööne kasvuhoone – kaubamärgid õitsevad sügava türkiissinise tausta ees, mida valgustab üksainus mündisäde
Shopify disainisüsteem on kaubandusele nagu kesköine töötuba: peaaegu must lõuend, mis on toonitud sügava türkiisrohelise tooniga, lai ja enesekindel sans-serif kirjatüüp ning üksainus erk piparmündiroheline aktsent, mis aktiveerib interaktiivseid hetki. Liides meenutab pimedat tuba, kus tooted ja kaubamärgid on valgusallikaks – fotod ja poe fassaadid helendavad peaaegu mustade pindade taustal, samas kui kroomelemendid on tagaplaanil. Komponendid on geomeetrilised, kuid pehmed: 12-px raadiusega kaardid õhukeste ääristega, pillikujulised nupud ja 330-raskusastmega kirjatüüp, mis sosistab pigem skaalat kui hüüab. Ühte kromaatilist kirjavahemärki (#36f4a4) kasutatakse linkidel, siltidel ja fookusseisundites säästlikult, jättes värvi funktsionaalsete hetkede jaoks, et tagada kaupmeeste lugude visuaalne keskpunkt.
Maksimaalne laius on ~1280 pikslit, tsentreeritud, täislaiuses avamislehega, mis ulatub fotokonteinerisse kaugemale. Lehe rütm vaheldub: (1) täislaiuses tume avamisleht pealdise ja tegevusele kutsuvate nuppudega, (2) mugavad tumedad sektsioonid maksimaalse laiusega teksti- ja pildiplokkidega kahes veerus või pildiruudustikuga kolmes veerus, (3) interaktiivsed esitluspaneelid (tootekaart, saatmiskalkulaator, maailmakaart), mis kuvatakse reljeefsete kaartidena sügavamal lõuendil. Navigeerimine on fikseeritud ülemine riba, millel on logo + 3 navigeerimiselementi + sekundaarsed lingid + peamine tegevusele kutsuv nupp, kõik joondatud paremale. Vertikaalne rütm kasutab sektsioonide vahel 80 pikslit tühimikke sujuva üleminekuga – tumedate sektsioonide vahel pole eraldajaid, ainult pinnatooni muutus.
Visuaalne disain on peamiselt suunatud jaemüüjale: täissuuruses tootefotod ja brändiürituste fotod kannavad visuaalse kaalu põhiosa, sageli suurte taustade kujul, millel on valge tekst. Pildid on tihedalt kärbitud, kontrastsed ja piduliku iseloomuga (Nasdaqi börsi kella helin, grupi tervitused, käeshoitavate toodete lähivõtted). Tume taust loob mulje, nagu oleksid need fotod valgustatud prožektoritega. Illustratsioonid on minimalistlikud – peamise selgitava töö teevad manustatud tootepildid ja poevisaalist tehtud ekraanipildid. Ikoonid on ühevärvilised, joone laiusega 1,5–2 pikslit, tavaliselt valged või aktiivsete olekute puhul #36f4a4.
Palett
Bränd
- Shopify Mint
#36f4a4— Aktiivsed navigeerimisnäidikud, fookusrõngad, siltide esiletõstmised ja linkide hõljumise esiletõstmised on ainsad kromaatilised sädelused, mis loovad tumedal taustal lubatud interaktiivsuse tunde.
Neutraalne
- Midnight Forest
#02090a— Lehekülje lõuend, päise taustapildid, jaotise taustapildid - Deep Lichen
#061a1c— Peamised kaardipinnad, reljeefsed paneelid, sisuplokid. - Shaded Fern
#072720— Navigeerimispaneel, lisakaardid, paneeli vaevumärgatav tõstmine. - Spruce Border
#1e2c31— Õhukesed äärised kaartidele, eraldusjooned, sisestusväljade kontuurid. - Abyss Indigo
#000a1e— Lisapind toodete/demonstratsioonide manustamiseks, funktsioonide kirjeldustega paneelid. - Pure White
#ffffff— Põhitekst, nuppude täitmine, pealkiri, logod.
Tüpograafia
12-st 70 pikslini · 8 sammu
- Neue Haas Grotesk — asendamine: Inter · kontuurid 330, 400, 500, 550, 600 · Tüpograafia põhisüsteemiks on pealkirjad, mille fondi suurus on 70–96 pikslit (330–400), mis on pigem peened kui valjud; põhitekst fondi suurusega 16–18 pikslit (400–500); ning navigatsioon ja kasutajaliides fondi suurusega 14–16 pikslit (500–550). Ülikõrge fondi suurus 330 suurtel ekraanidel on eripära: see annab enesekindlust pigem vaoshoituse kui mahukuse kaudu.
- Inter Variable — asendamine: Inter · kontuurid 400, 420, 450, 550 · Teisene fonditüüp, mida kasutatakse navigeerimisliidese elementides, väikestes märkmetes, tabulaatori juhtelementides ja jaluses olevas mikrotekstis. Selle veidi suuremad väiketähed ja standardsem tähevahe muudavad selle kompaktse suuruse korral loetavamaks. See sobib ka olukordadesse, kus 420-kaaluline font täidab tühimiku tavalise ja keskmise suurusega fondi vahel.
Intervallid ja vorm
| Eesmärk | Tähendus |
|---|---|
| Tihedus | keskmine |
| Põhisamm | 12px |
| Nupu raadius | 9999px |
| Kaardi raadius | 12px |
| Varjud | ei - varjude asemel äärised |
| Sektsioonide vahel | 80px |
| Lehe laius | 1280px |
Tehisintellekt loob teie veebisaidi Shopify 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
- Retool — Soe obsidiaanist töökoda – täppisriistade pind, mida valgustavad hõõguvad söed ja kus kõik luuakse.
- Elektron — Seadme juhtpaneel on keskööl peaaegu must lõuend, kus tootefotod säravad, samas kui liides jääb praktiliselt nähtamatuks.
- REKKI — Lennu juhtimispaneel fotolaboris
- OFFFICE : — monoliitsesse fonti mattunud noir-galerii
- Clyde — Üheainsa prožektoriga müügisalong on peaaegu tume galerii, kus ruumis on ainus värv soe gradientpall.
- Channel Studio — Stuudiofotolabor ühe korallist lambivarjuga
- Electronic Materials Office — Hõõguv sütt söega kaunistatud galeriis
- ORYZO AI — Fotoessee pimedast toast. Üksildane objekt hõljub soojas pimeduses, kreemikas font ainsaks kaunistuseks.
- Factory — „Sõjaruumi” terminal keskööl. „Tehas” on karmmust juhtpaneel, kuhu maandub üks valge kaart nagu taskulambiga valgustatud teade – ainus objekt ruumis on töö ise.
- Hungry Tiger — Kurkumivärviline grafiti tandoori seinal. Ühtne kuldse ja roostepruuni värvipalett, mille font on nii suur, et see meenutab pigem vürtsituru silti kui veebisaiti.
- Bibliothèque — Must kuubikujuline galerii prožektorivalguses – üksildane valgustatud plaat avaras, pimedas saalis
- Apple (España) — must teater valgustatud sisustusega