Shopify
Omah Kaca Tengah Wengi - Merek dagang mekar kanthi latar mburi warna biru toska sing peteng, disinari dening percikan mint
Sistem desain Shopify kaya bengkel tengah wengi kanggo perdagangan: kanvas meh ireng sing diwarnai ijo pirus tuwa, jinis huruf sans-serif sing amba lan percaya diri, lan aksen mint sing cerah sing ngaktifake momen interaktif. Antarmuka kasebut meh padha karo kamar peteng, ing ngendi produk lan merek minangka sumber cahya—foto lan etalase sumunar ing permukaan sing meh ireng, dene elemen krom surut. Komponen kasebut geometris nanging alus: kertu radius 12px kanthi wates tipis, tombol awujud pil, lan jinis huruf bobot 330 sing bisik-bisik skala tinimbang bengok. Tandha wacan kromatik tunggal (#36f4a4) digunakake kanthi hemat ing pranala, tag, lan status fokus, nyimpen warna kanggo momen fungsional kanggo mesthekake yen crita pedagang tetep dadi titik fokus visual.
Ambane maksimal yaiku ~1280px, ing tengah, kanthi blok splash ambane lengkap ngluwihi wadhah foto. Irama kaca ganti-ganti: (1) kaca splash peteng ambane lengkap kanthi judhul sing ditumpuk lan tombol ajakan tumindak, (2) bagean peteng sing nyaman kanthi teks ambane maksimal lan blok gambar ing 2 kolom utawa kisi gambar ing 3 kolom, (3) panel showcase interaktif (kertu produk, kalkulator pengiriman, peta donya) ditampilake minangka kertu sing diangkat ing kanvas sing luwih jero. Navigasi minangka bilah ndhuwur tetep kanthi logo + 3 elemen navigasi + pranala sekunder + tombol ajakan tumindak utama, kabeh sejajar ing sisih tengen. Irama vertikal nggunakake celah 80px antarane bagean kanthi transisi sing lancar—ora ana pembagi antarane bagean peteng, mung owah-owahan ing nada permukaan.
Desain visual utamane fokus ing pengecer: foto produk ukuran lengkap lan foto saka acara merek nduweni bobot visual sing paling gedhe, asring awujud latar mburi gedhe kanthi teks putih sing ditumpuk. Gambar-gambar kasebut dipotong rapet, kontras dhuwur, lan nduweni sifat meriah (bunyi lonceng Nasdaq, salam klompok, close-up produk ing tangan). Latar mburi peteng nggawe kesan yen foto-foto kasebut disinari dening lampu sorot. Ilustrasi minimalis—karya panjelasan utama ditindakake dening gambar produk sing disematkan lan tangkapan layar etalase. Ikon awujud monokrom, kanthi jembar garis 1,5–2px, biasane putih utawa #36f4a4 kanggo status aktif.
Palet
Merek
- Shopify Mint
#36f4a4— Indikator navigasi aktif, cincin fokus, sorotan tag, lan sorotan hover ing pranala minangka siji-sijine cemlorot kromatik sing nggawe rasa interaktivitas sing aktif nglawan latar mburi peteng.
Netral
- Midnight Forest
#02090a— Kanvas kaca, gambar latar mburi header, gambar latar mburi bagean - Deep Lichen
#061a1c— Lumahing kertu utama, panel sing ditinggikake, blok konten. - Shaded Fern
#072720— Panel navigasi, kertu tambahan, panel sing munggah meh ora katon. - Spruce Border
#1e2c31— Wates tipis kanggo kertu, garis pamisah, garis luar kolom input. - Abyss Indigo
#000a1e— Lumahing tambahan kanggo nyematkan produk/demonstrasi, panel kanthi katrangan fungsi. - Pure White
#ffffff— Teks utama, isi tombol, judhul, logo.
Tipografi
saka 12 nganti 70px · 8 langkah
- Neue Haas Grotesk — panggantos: Inter · garis besar 330, 400, 500, 550, 600 · Sistem tipografi inti yaiku judhul kanthi bobot font 70–96px (330–400) sing alus tinimbang banter; salinan awak kanthi bobot font 16–18px (400–500); lan navigasi lan antarmuka panganggo kanthi bobot font 14–16px (500–550). Bobot font ultra-ringan 330 ing ukuran layar gedhe minangka fitur sing khas: nuduhake kapercayan liwat pengekangan tinimbang kebesaran.
- Inter Variable — panggantos: Inter · garis besar 400, 420, 450, 550 · Jinis font sekunder sing digunakake ing elemen antarmuka navigasi, cathetan cilik, kontrol tab, lan mikroteks ing footer. Huruf cilik sing rada gedhe lan jarak huruf sing luwih standar ndadekake luwih gampang diwaca ing ukuran sing ringkes. Iki uga cocok kanggo kahanan ing ngendi font bobot 420 ngisi kesenjangan antarane font ukuran biasa lan medium.
Interval lan wujud
| Tujuan | Tegese |
|---|---|
| Kapadhetan | rata-rata |
| Langkah dhasar | 12px |
| Radius tombol | 9999px |
| Radius kertu | 12px |
| Bayangan | ora ana wates tinimbang bayangan |
| Antarane bagean | 80px |
| Ambane kaca | 1280px |
AI bakal mbangun situs web sampeyan nganggo gaya Shopify lan ngisi situs kasebut
- Isi nganggo produk lan kiriman liwat pranala - Instagram, TikTok, Facebook.
- Transfer konten saka situs lawasmu—cukup sebutna alamate.
- Desain modern nganggo mesin paling apik: React ( Next.js) nganggo rendering server lan optimasi SEO sing wis ana.
- Optimasi SEO otomatis kanggo asil panelusuran lan rekomendasi jaringan saraf.
Gaya sing padha
- Retool — Bengkel obsidian sing anget - permukaan kanggo piranti presisi, dipadhangi dening bara sing ngebul, ing ngendi kabeh digawe
- Elektron — Panel kontrol peralatan ing tengah wengi kaya kanvas sing meh ireng, ing ngendi foto produk sumunar nalika antarmuka meh ora katon.
- REKKI — Panel kontrol penerbangan ing lab foto
- OFFFICE : — galeri noir sing kebak font monolitik
- Clyde — Showroom-e, kanthi siji lampu sorot, minangka galeri sing meh peteng ing ngendi siji-sijine warna ing ruangan kasebut yaiku bal gradien sing anget.
- Channel Studio — Lab foto studio nganggo siji kap lampu koral
- Electronic Materials Office — Bara geni sing murub ing galeri sing dihias nganggo areng
- ORYZO AI — Esai foto babagan kamar peteng. Barang tunggal sing ngambang ing pepeteng anget, font krim minangka siji-sijine dekorasi.
- Factory — Terminal "ruang perang" ing wayah tengah wengi. "Pabrik" kuwi panel kontrol ireng polos ing ngendi ana kertu putih siji sing tiba kaya lampu senter—siji-sijine barang ing ruangan kasebut yaiku karyane dhewe.
- Hungry Tiger — Grafiti padhang kaya kunir ing tembok tandoor. Palet emas lan coklat teyeng sing manunggal, kanthi font sing gedhe banget nganti luwih mirip tandha pasar rempah-rempah tinimbang situs web.
- Bibliothèque — Galeri awujud kubus ireng ing sangisore sorotan lampu – piring siji-sijine sing madhangi ing aula sing jembar lan peteng
- Apple (España) — teater ireng nganggo lampu gantung