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
- Apple iPhone 18 Pro — Kesköö riistvara galerii. Mõelge igale sektsioonile kui tumedale, muuseumilaadsele soklile, kus üks tooteosa on täpselt esile tõstetud ning tüpograafia ja sinised juhtnupud toimivad diskreetsete siltidena selle ümber.
- Apple Watch Ultra 4 — Öise testimise tööriist. Looge ekraanid mustade näitusealade jadana, kus tohutud SF Pro päised raamivad täppisseadmeid, aktiivandmeid ja hoolikalt doseeritud elektrivärve.
- Apple Watch Series 12 — Pronksist andur pimedas. Kujutage ette kella riistvara ja olekunäidikuid kui valgustatud objekte, mis ripuvad peaaegu pimedas galeriis.
- Bedouin's Daughter — Päikesevalgus mustal sametil. Kasutage visuaalse kompositsiooni võrdsete osadena helendavaid võikollaseid, kõvasid musti pindu ja teralisi, päikesevalgusega pilte.
- ORYZO AI — Fotoessee pimedast toast. Üksildane objekt hõljub soojas pimeduses, kreemikas font ainsaks kaunistuseks.