Shopify
Ýarym gijeki ýyladyşhana - Söwda nyşanlary çuňňur firuze reňkli fonda gülleýär, ýalpyzyň ýekeje uçguny bilen ýagtylandyrylýar
“Shopify”-yň dizaýn ulgamy söwda üçin gijeki okuw maslahatydyr: gara reňkli tuwal, çuňňur firuze ýaşyl reňk bilen örtülen, giň, ynamly sans-serif şrifti we interaktiw pursatlary işjeňleşdirýän ýeke-täk janly ýalpyz aksenti. Interfeýs garaňky otaga meňzeýär, bu ýerde önümler we brendler ýagtylygyň çeşmesi bolup durýar — suratlar we dükanlar gara reňkli ýüzlere garşy ýalpyldap durýar, hrom elementleri bolsa yza çekilýär. Komponentler geometrik, ýöne ýumşak: inçe çäkli 12 piksel radiusly kartoçkalar, tabletka şekilli düwmeler we gygyrmagyň ýerine ölçek pyşyrdaýan 330 agramlyk şrift. Baglanyşyklarda, teglerde we fokus ýagdaýlarynda ýekeje hromatik punktuasiýa belgisi (#36f4a4) seýrek ulanylýar, söwda hekaýalarynyň wizual merkez nokady bolup galmagyny üpjün etmek üçin funksional pursatlar üçin reňk saklanýar.
Maksimum giňlik ~1280px, merkezleşdirilen, doly giňlikdäki sepleme bloklary surat konteýnerinden daşary çykýar. Sahypanyň ritmi üýtgeýär: (1) üst-üst edilen sözbaşy we çagyryş düwmeleri bolan doly giňlikdäki garaňky sepleme sahypasy, (2) 2 sütünli iň ýokary giňlikdäki tekst we surat bloklary ýa-da 3 sütünli surat torlary bolan rahat garaňky bölekler, (3) has çuň kanwada galdyrylan kartlar hökmünde görkezilen interaktiw witrina panelleri (önüm karty, iberiş kalkulýatory, dünýä kartasy). Nawigasiýa logotip + 3 nawigasiýa elementi + ikinji derejeli baglanyşyklar + esasy çagyryş düwmesi bolan berk ýokarky panel bolup, hemmesi sag tarapda deňleşdirilen. Dik ritm bölümleriň arasynda 80px aralyklaryny ulanýar we ýumşak geçiş bolýar - garaňky bölümleriň arasynda bölüjiler ýok, diňe ýüziň reňki üýtgeýär.
Wizual dizaýn, esasan, söwda dükanyna gönükdirilendir: doly ölçegli önüm suratlary we brend çärelerinden alnan suratlar wizual agramyň esasy bölegini tutýar, köplenç uly fonlar we ak tekstler bilen örtülen. Suratlar berk kesilen, ýokary kontrastly we baýramçylyk häsiýetine eýedir (Nasdaq jaňynyň çalynmagy, toparyň gutlaglary, ellerdäki önümleriň ýakyn suratlary). Garaňky fon bu suratlaryň prožektorlar bilen ýagtylandyrylan ýaly täsir galdyrýar. Suratlar minimalistdir - esasy düşündiriş işi içerki önüm suratlary we dükanlaryň skrinşotlary tarapyndan ýerine ýetirilýär. Nyşanlar monohromdyr, çyzyk giňligi 1,5–2 piksel, adatça ak ýa-da işjeň ýagdaýlar üçin #36f4a4.
Palitra
Brend
- Shopify Mint
#36f4a4— Aktiw nawigasiýa görkezijileri, fokus halkalary, teg ýagtylandyrmalary we baglanyşyklardaky skrinşotyň aýlanýan ýagtylandyrmalary garaňky fonda işjeň interaktiwlik duýgusyny döredýän ýeke-täk hromatik ýalpyldawuklykdyr.
Neýtral
- Midnight Forest
#02090a— Sahypanyň kanwasy, başlyk fon suratlary, bölüm fon suratlary - Deep Lichen
#061a1c— Esasy kart ýüzleri, galdyrylan paneller, mazmun bloklary. - Shaded Fern
#072720— Nawigasiýa paneli, goşmaça kartlar, paneliň gaty görünmeýän galdyrylyşy. - Spruce Border
#1e2c31— Kartoçkalar, bölüji çyzyklary, giriş meýdanynyň konturlary üçin inçe serhetler. - Abyss Indigo
#000a1e— Önümleri/demonstrasiýalary, funksiýalaryň düşündirişi bolan panelleri ýerleşdirmek üçin goşmaça ýüz. - Pure White
#ffffff— Esasy tekst, düwme doldurmak, at, logotipler.
Tipografiýa
12-den 70 piksele çenli · 8 ädim
- Neue Haas Grotesk — çalyşmak: Inter · konturlar 330, 400, 500, 550, 600 · Esasy tipografik ulgam 70–96 piksel (330–400) şrift agramly we sesli däl-de, inçe bolan sözbaşylardan; 16–18 piksel (400–500) şrift agramly esasy tekstden; we 14–16 piksel (500–550) şrift agramly nawigasiýa we ulanyjy interfeýsinden ybaratdyr. Uly ekran ölçeglerinde 330-yň örän ýeňil şrift agramy tapawutly aýratynlykdyr: ol ynamy göwrümli däl-de, çäklendirijilik arkaly berýär.
- Inter Variable — çalyşmak: Inter · konturlar 400, 420, 450, 550 · Nawigasiýa interfeýsi elementlerinde, kiçi belliklerde, tab dolandyryşlarynda we aşaky kolonkalardaky mikrotekstde ulanylýan ikinji derejeli şrift görnüşi. Onuň kiçi harplarynyň birneme uly bolmagy we has standart harp aralygy ony kiçi ölçeglerde has okamaga mümkinçilik berýär. Şeýle hem, ol 420 agramly şriftiň adaty we orta ölçegli şriftleriň arasyndaky boşlugy doldurýan ýagdaýlar üçin hem amatlydyr.
Aralyklar we görnüş
| Maksat | Manysy |
|---|---|
| Dykyzlyk | ortaça |
| Esasy ädim | 12px |
| Düwme radiusy | 9999px |
| Kart radiusy | 12px |
| Kölegeler | kölegeleriň ýerine serhetler ýok |
| Bölümleriň arasynda | 80px |
| Sahypanyň giňligi | 1280px |
Süni intellekt web sahypaňyzy Shopify stilinde gurar we ony doldurar
- Instagram, TikTok, Facebook salgylary arkaly önümler we ýazgylar bilen dolduryň.
- Köne saýtyňyzdan mazmuny göçüriň — diňe salgyny görkeziň.
- Iň gowy motorda döwrebap dizaýn: React ( Next.js) serwer renderi we SEO optimizasiýasy bilen gyssagly ýagdaýda.
- Gözleg netijeleri we neýron tor maslahatlary üçin doly awtomatlaşdyrylan SEO optimizasiýasy.
Meňzeş stiller
- Retool — Obsidian ussahanasynyň ýylylygy - ähli zadyň döredilýän, ýanýan közler bilen ýagtylandyrylan takyk gurallar üçin ýer.
- Elektron — Ýary gije enjamlaryň dolandyryş paneli diýen ýaly gara reňkli mata bolup, önümiň suratlary ýalpyldap durýar, interfeýs bolsa görünmeýän ýagdaýda galýar.
- REKKI — Surat laboratoriýasyndaky uçuş dolandyryş paneli
- OFFFICE : — monolit şrift bilen örtülen noir galereýasy
- Clyde — Diňe bir prožektorly sergi zaly, otagdaky ýeke-täk reňk ýyly gradient top bolan diýen ýaly garaňky galereýadyr.
- Channel Studio — Bir mercan abajurly studiýa fotolaboratoriýasy
- Electronic Materials Office — Kömür bilen bezelen galereýada ýalpyldap duran köz
- ORYZO AI — Garaňky otag barada surat oçerk. Ýyly garaňkylykda aýlanyp ýören ýekeje obýekt, krem reňkli şrift ýeke-täk bezeg.
- Factory — Gije gijesindäki "uruş otagy" terminaly. "Fabrik" gara reňkli dolandyryş paneli bolup, ol ýerde ýekeje ak kartoçka fonar yşyklandyrylan habar beriş gullugy ýaly düşýär - otagdaky ýeke-täk zat işiň özi.
- Hungry Tiger — Tandooryň diwaryndaky zerdeçal ýaly ýagty grafiti. Altyn we pasly goňur reňkleriň bitewi palitrasy, şrifti şeýle uly bolup, websaýtdan has köp baharat bazarynyň nyşanyna meňzeýär.
- Bibliothèque — Projektoryň aşagyndaky gara kub şekilli galereýa – giň, garaňky zalda ýalňyz ýagtylandyrylan plastinka
- Apple (España) — yşyklandyrylan armaturaly gara teatr