Shopify
Yarim tunda issiqxona - Savdo belgilari yalpizning bitta uchquni bilan yoritilgan chuqur firuza fonida gullaydi
Shopify dizayn tizimi tijorat uchun yarim tunda ishlaydigan ustaxonadir: chuqur firuza yashil rangga bo'yalgan deyarli qora tuval, keng, ishonchli sans-serif shrifti va interaktiv lahzalarni faollashtiradigan bitta yorqin yalpiz aksenti. Interfeys qorong'u xonaga o'xshaydi, bu yerda mahsulotlar va brendlar yorug'lik manbai hisoblanadi — fotosuratlar va do'kon vitrinalari deyarli qora sirtlarga qarshi porlaydi, xrom elementlar esa orqaga chekinadi. Komponentlar geometrik, ammo yumshoq: yupqa chegaralari bo'lgan 12 pikselli radiusli kartochkalar, tabletka shaklidagi tugmalar va baqirish o'rniga shkala pichirlaydigan 330 og'irlikdagi shrift. Havolalar, teglar va fokus holatlarida bitta xromatik tinish belgisi (#36f4a4) kamdan-kam ishlatiladi, savdogar hikoyalari vizual markaz bo'lib qolishini ta'minlash uchun funktsional lahzalar uchun rangni saqlab qoladi.
Maksimal kenglik ~1280px, markazda joylashgan bo'lib, to'liq kenglikdagi bloklar fotosurat konteyneridan tashqariga chiqadi. Sahifa ritmi almashinib turadi: (1) sarlavhasi va harakatga chaqiruv tugmalari bilan to'liq kenglikdagi qorong'u sahifa, (2) 2 ustunda maksimal kenglikdagi matn va tasvir bloklari yoki 3 ustunda tasvir panjaralari bilan qulay qorong'u qismlar, (3) chuqurroq tuvalda ko'tarilgan kartalar sifatida ko'rsatilgan interaktiv vitrina panellari (mahsulot kartasi, yetkazib berish kalkulyatori, dunyo xaritasi). Navigatsiya - bu logotip + 3 ta navigatsiya elementi + ikkilamchi havolalar + asosiy harakatga chaqiruv tugmasi bo'lgan o'rnatilgan yuqori panel bo'lib, barchasi o'ng tomonga hizalanadi. Vertikal ritm bo'limlar orasidagi 80px bo'shliqlardan silliq o'tish bilan foydalanadi - qorong'u bo'limlar orasida bo'linishlar yo'q, faqat sirt ohangida o'zgarish mavjud.
Vizual dizayn asosan chakana sotuvchiga qaratilgan: to'liq o'lchamli mahsulot fotosuratlari va brend tadbirlaridan olingan fotosuratlar vizual og'irlikning asosiy qismini egallaydi, ko'pincha oq matnli katta fonlar ko'rinishida bo'ladi. Tasvirlar zich qirqilgan, yuqori kontrastli va bayramona xarakterga ega (Nasdaq qo'ng'irog'ining jiringlashi, guruh salomlari, qo'lda mahsulotlarning yaqindan ko'rsatilgan suratlari). To'q fon bu fotosuratlar projektorlar bilan yoritilgandek taassurot qoldiradi. Tasvirlar minimalist - asosiy tushuntirish ishlari o'rnatilgan mahsulot tasvirlari va do'kon vitrinalarining skrinshotlari tomonidan bajariladi. Piktogrammalar monoxrom bo'lib, chiziq kengligi 1,5–2 piksel, odatda faol holatlar uchun oq yoki #36f4a4.
Palitra
Brend
- Shopify Mint
#36f4a4— Faol navigatsiya ko'rsatkichlari, fokus halqalari, teglarni yoritish va havolalardagi havolalarni yoritib turish - bu qorong'u fonda faol interaktivlik hissini yaratadigan yagona xromatik uchqun.
Neytral
- Midnight Forest
#02090a— Sahifa kanvasi, sarlavha fon rasmlari, bo'lim fon rasmlari - Deep Lichen
#061a1c— Asosiy karta yuzalari, ko'tarilgan panellar, kontent bloklari. - Shaded Fern
#072720— Navigatsiya paneli, qo'shimcha kartalar, panelning deyarli sezilmaydigan ko'tarilishi. - Spruce Border
#1e2c31— Kartalar, ajratuvchi chiziqlar, kiritish maydonlarining konturlari uchun ingichka chegaralar. - Abyss Indigo
#000a1e— Mahsulotlar/namoyishlarni joylashtirish uchun qo'shimcha sirt, funktsiyalar tavsifi tushirilgan panellar. - Pure White
#ffffff— Asosiy matn, tugmani to'ldirish, sarlavha, logotiplar.
Tipografiya
12 dan 70 pikselgacha · 8 qadam
- Neue Haas Grotesk — almashtirish: Inter · konturlar 330, 400, 500, 550, 600 · Asosiy tipografik tizim 70–96 piksel (330–400) shrift og'irligiga ega sarlavhalar bo'lib, ular baland emas, balki nozik; asosiy matn 16–18 piksel (400–500) shrift og'irligiga ega; va navigatsiya va foydalanuvchi interfeysi 14–16 piksel (500–550) shrift og'irligiga ega. Katta ekran o'lchamlarida 330 ga teng ultra yengil shrift og'irligi o'ziga xos xususiyatdir: u ishonchni hajmli emas, balki vazminlik orqali ifodalaydi.
- Inter Variable — almashtirish: Inter · konturlar 400, 420, 450, 550 · Navigatsiya interfeysi elementlari, kichik eslatmalar, yorliq boshqaruv elementlari va pastki qismdagi mikromatnlarda ishlatiladigan ikkinchi darajali shrift turi. Uning biroz kattaroq kichik harflari va standart harflar oralig'i uni ixcham o'lchamlarda o'qishni osonlashtiradi. Shuningdek, u 420 og'irlikdagi shrift oddiy va o'rta o'lchamdagi shrift orasidagi bo'shliqni to'ldiradigan holatlar uchun ham mos keladi.
Intervallar va shakl
| Maqsad | Ma'nosi |
|---|---|
| Zichlik | o'rtacha |
| Asosiy qadam | 12px |
| Tugma radiusi | 9999px |
| Karta radiusi | 12px |
| Soyalar | soyalar o'rniga chegaralar yo'q |
| Bo'limlar orasida | 80px |
| Sahifa kengligi | 1280px |
Sun'iy intellekt veb-saytingizni Shopify uslubida yaratadi va uni to'ldiradi
- Mahsulotlar va postlarni Instagram, TikTok, Facebook havolalari orqali to'ldiring.
- Eski saytingizdan kontentni o'tkazing — shunchaki manzilni ko'rsating.
- Eng yaxshi dvigatelda zamonaviy dizayn: React ( Next.js) server renderlash va SEO optimallashtirish bilan darhol.
- Qidiruv natijalari va neyron tarmoq tavsiyalari uchun to'liq avtomatlashtirilgan SEO optimallashtirish.
O'xshash uslublar
- Retool — Issiq obsidian ustaxonasi - hamma narsa yaratilgan, yonayotgan cho'g'lar bilan yoritilgan aniq asboblar uchun sirt
- Elektron — Yarim tunda uskunani boshqarish paneli deyarli qora tuval bo'lib, unda mahsulot fotosuratlari porlab turadi, interfeys esa deyarli ko'rinmas bo'lib qoladi.
- REKKI — Fotolaboratoriyada parvozni boshqarish paneli
- OFFFICE : — monolit shrift bilan o'ralgan noir galereyasi
- Clyde — Yagona projektorli ko'rgazma zali deyarli qorong'i galereya bo'lib, xonadagi yagona rang - iliq gradient shar.
- Channel Studio — Bitta marjon abajurli studiya fotolaboratori
- Electronic Materials Office — Ko'mir bilan bezatilgan galereyada yonib turgan cho'g'
- ORYZO AI — Qorong'u xona haqida fotoinsho. Iliq zulmatda suzib yurgan yolg'iz buyum, krem rangli shrift esa yagona bezak.
- Factory — Yarim tunda "urush xonasi" terminali. "Zavod" - bu qora boshqaruv paneli bo'lib, u yerga bitta oq kartochka xuddi chiroq yonib turgan xabarnoma kabi tushadi - xonadagi yagona narsa - bu ishning o'zi.
- Hungry Tiger — Tandir devoridagi zerdeçal rangidagi yorqin grafiti. Oltin va zanglagan jigarrang ranglarning birlashgan palitrasi, shrifti shunchalik kattaki, u veb-saytdan ko'ra ziravorlar bozori belgisiga ko'proq o'xshaydi.
- Bibliothèque — Projektor ostidagi qora kub shaklidagi galereya – ulkan, qorong'u zalda yolg'iz yoritilgan plastinka
- Apple (España) — yoritilgan armatura bilan qora teatr