Shopify
Gecəyarısı İstixanası - Ticarət nişanları tünd firuzəyi fonunda çiçək açır və tək bir nanə qığılcımı ilə işıqlandırılır
Shopify-ın dizayn sistemi ticarət üçün gecə yarısı emalatxanasıdır: tünd firuzəyi yaşıl rəngə boyanmış, demək olar ki, qara rəngli kətan, geniş, özünəinamlı sans-serif şrifti və interaktiv anları aktivləşdirən tək canlı nanə vurğusu. İnterfeys, məhsul və brendlərin işıq mənbəyi olduğu qaranlıq otağa bənzəyir - fotoşəkillər və vitrinlər demək olar ki, qara səthlərə qarşı parıldayır, xrom elementlər isə geri çəkilir. Komponentlər həndəsi, lakin yumşaqdır: nazik haşiyələri olan 12 piksel radiuslu kartlar, həb şəkilli düymələr və qışqırıqlar əvəzinə pıçıldayan miqyaslı 330 çəkilik şrift. Tək bir xromatik durğu işarəsi (#36f4a4) linklərdə, etiketlərdə və fokus vəziyyətlərində az istifadə olunur, tacir hekayələrinin vizual fokus nöqtəsi olaraq qalmasını təmin etmək üçün funksional anlar üçün rəng saxlayır.
Maksimum eni təxminən 1280 pikseldir, mərkəzdə, tam enli sıçrayış blokları foto konteynerindən kənara çıxır. Səhifə ritmi növbələşir: (1) üst-üstə düşən başlıq və hərəkətə çağırış düymələri olan tam enli tünd sıçrayış səhifəsi, (2) 2 sütunda maksimum enli mətn və şəkil blokları və ya 3 sütunda şəkil şəbəkələri olan rahat tünd hissələr, (3) daha dərin kətan üzərində qaldırılmış kartlar kimi göstərilən interaktiv vitrin panelləri (məhsul kartı, çatdırılma kalkulyatoru, dünya xəritəsi). Naviqasiya, loqotip + 3 naviqasiya elementi + ikinci dərəcəli keçidlər + əsas hərəkətə çağırış düyməsi olan sabit üst zolaqdır, hamısı sağa doğru düzülmüşdür. Şaquli ritm, hamar bir keçid ilə bölmələr arasında 80 piksel boşluqlardan istifadə edir - tünd hissələr arasında bölücü yoxdur, yalnız səth tonunda dəyişiklik var.
Vizual dizayn əsasən pərakəndə satış şirkətinə yönəlib: tam ölçülü məhsul fotoşəkilləri və brend tədbirlərindən fotoşəkillər vizual çəkisinin əsas hissəsini daşıyır və tez-tez ağ mətnlə örtülmüş böyük fonlar şəklində olur. Şəkillər sıx şəkildə kəsilmiş, yüksək kontrastlı və bayram xarakterli (Nasdaq zənginin çalınması, qrup salamlamaları, əllərdə məhsulların yaxın planları) olur. Tünd fon bu fotoşəkillərin işıqlandırma ilə işıqlandırıldığı təəssüratını yaradır. İllüstrasiyalar minimalistdir - əsas izahat işi daxil edilmiş məhsul şəkilləri və vitrinlərin ekran görüntüləri tərəfindən yerinə yetirilir. İkonlar monoxromdur, xətt eni 1,5-2 pikseldir, adətən ağ və ya aktiv vəziyyətlər üçün #36f4a4.
Palitra
Brend
- Shopify Mint
#36f4a4— Aktiv naviqasiya göstəriciləri, fokus halqaları, etiket vurğuları və linklərdə hover vurğuları qaranlıq fonda aktiv interaktivlik hissi yaradan yeganə xromatik parıltıdır.
Neytral
- Midnight Forest
#02090a— Səhifə kətan, başlıq fon şəkilləri, bölmə fon şəkilləri - Deep Lichen
#061a1c— Əsas kart səthləri, qaldırılmış panellər, məzmun blokları. - Shaded Fern
#072720— Naviqasiya paneli, əlavə kartlar, panelin çətinliklə nəzərə çarpan şəkildə qaldırılması. - Spruce Border
#1e2c31— Kartlar, ayırıcı xətlər, giriş sahəsinin konturları üçün nazik sərhədlər. - Abyss Indigo
#000a1e— Məhsulların/nümayişlərin, funksiyaların təsvirləri olan panellərin yerləşdirilməsi üçün əlavə səth. - Pure White
#ffffff— Əsas mətn, düymə doldurma, başlıq, loqotiplər.
Tipoqrafiya
12-dən 70 pikselə qədər · 8 addım
- Neue Haas Grotesk — əvəzetmə: Inter · konturlar 330, 400, 500, 550, 600 · Əsas tipoqrafik sistem, səs-küylü deyil, incə şrift qalınlığı 70–96 piksel (330–400) olan başlıqlar; şrift qalınlığı 16–18 piksel (400–500) olan əsas mətn; və şrift qalınlığı 14–16 piksel (500–550) olan naviqasiya və istifadəçi interfeysidir. Böyük ekran ölçülərində 330 ultra yüngül şrift qalınlığı fərqli bir xüsusiyyətdir: o, həcmli deyil, təmkinli şəkildə özünəinam bəxş edir.
- Inter Variable — əvəzetmə: Inter · konturlar 400, 420, 450, 550 · Naviqasiya interfeysi elementlərində, kiçik qeydlərdə, sekme idarəetmələrində və altbilgilərdəki mikromətnlərdə istifadə olunan ikinci dərəcəli şrift növü. Bir az böyük kiçik hərfləri və daha standart hərf aralığı onu kompakt ölçülərdə daha oxunaqlı edir. Həmçinin, 420 çəkilik şriftin adi və orta ölçülü şrift arasındakı boşluğu doldurduğu hallar üçün də uyğundur.
İntervallar və forma
| Məqsəd | Mənası |
|---|---|
| Sıxlıq | orta |
| Əsas addım | 12px |
| Düymə radiusu | 9999px |
| Kart radiusu | 12px |
| Kölgələr | kölgələr əvəzinə sərhədlər yoxdur |
| Bölmələr arasında | 80px |
| Səhifə eni | 1280px |
Süni intellekt veb saytınızı Shopify üslubunda quracaq və onu dolduracaq
- Məhsullar və paylaşımlar ilə Instagram, TikTok, Facebook linkləri vasitəsilə tanış olun.
- Köhnə saytınızdan məzmunu köçürün — sadəcə ünvanı göstərin.
- Ən yaxşı mühərrikdə müasir dizayn: Server render və SEO optimallaşdırması ilə React ( Next.js).
- Axtarış nəticələri və neyron şəbəkə tövsiyələri üçün tam avtomatlaşdırılmış SEO optimallaşdırması.
Oxşar üslublar
- Retool — İsti obsidian emalatxanası - hər şeyin yaradıldığı, közlə işıqlandırılan, dəqiq alətlər üçün bir səth
- Elektron — Gecə yarısı avadanlıq idarəetmə paneli, demək olar ki, qara bir kətandır və məhsul fotoşəkilləri parıldayır, interfeys isə demək olar ki, görünməz qalır.
- REKKI — Fotolaboratoriyada uçuş idarəetmə paneli
- OFFFICE : — monolit şriftlə əhatə olunmuş qara qalereya
- Clyde — Tək proyektorlu sərgi salonu, otaqdakı yeganə rəngin isti qradiyent topu olduğu demək olar ki, qaranlıq bir qalereyadır.
- Channel Studio — Bir mərcan abajurlu studiya fotolaboratoriyası
- Electronic Materials Office — Kömürlə bəzədilmiş qalereyada parlayan köz
- ORYZO AI — Qaranlıq otaq haqqında foto esse. İsti qaranlıqda dalğalanan tənha bir obyekt, yeganə bəzək krem şriftdir.
- Factory — Gecəyarısı "müharibə otağı" terminalı. "Fabrik" qara rəngli idarəetmə panelidir, burada tək bir ağ kart fənərlə işıqlandırılmış mesaj kimi düşür — otaqdakı yeganə obyekt əsərin özüdür.
- Hungry Tiger — Tandoor divarında zerdeçal kimi parlaq qrafiti. Qızılı və paslı qəhvəyi rənglərin vahid palitrası, o qədər böyük şriftlə veb saytdan daha çox ədviyyat bazarı lövhəsinə bənzəyir.
- Bibliothèque — Projektor altında qara kub şəkilli qalereya – geniş, qaranlıq salonda tək işıqlandırılmış lövhə
- Apple (España) — işıqlı armaturları olan qara teatr