Shop
Ağ mərmər üzərində üzən ticarət bürcü
Onlayn mağaza "ağ kətan" modelində işləyir və məhsullar kiçik şəkillər torları əvəzinə böyük, ağır əyri şəkil kartları kimi göstərilir. Bütün interfeys inanılmaz dərəcədə hamardır: hər tərəfdə 20-28 piksel radius, həb formalı idarəetmə düymələri və mətni aydın və qalın edən sıx neqativ izləmə ilə kompakt 16 piksel GT Standard gövdəsi. Sistemin yeganə qalın vurğusu loqotipdə, dairəvi axtarış nəticələri sahəsində və eyni düymədə rəngli kölgə kimi görünən canlı bənövşəyi rəngdir (#5433eb). Palitranın qalan hissəsi isti neytraldır: ağ səthlər, incə soyuq boz kətan, incə haşiyələr və demək olar ki, qara mətn. Sıxlıq 12 piksellik novlarla kompakt olaraq qalır, lakin qəhrəman və kateqoriya zolaqları 64-80 piksellik geniş şaquli ritm sayəsində nəfəs alır və ticarət təcrübəsini kataloqdan daha çox gəzməyə bənzədir.
Maksimum eni 1200 pikseldir, mərkəzdə şəffaf #f2f4f5 kətan üzərində yerləşir, solda isə yalnız naviqasiya nişanları olan 64 piksel enində yan panel var. Əsas element tam enli zolaqdır, məhsul kartları mərkəzdə bənövşəyi "mağaza" loqosunun üstündə, birbaşa altında isə həb formalı axtarış çubuğu yerləşir. Kateqoriya həbləri axtarış çubuğunun altındakı tək mərkəzli sətirdə düzülmüşdür. Məzmun bölmələri (Qadınlar, Kişilər, Gözəllik, Ev, Körpə və Uşaqlar) təyin olunmuş zolaqlar kimi izlənilir, hər biri məhsul şəkilləri olan 4 sütunlu şəbəkə və ya 2 sütunlu "əsas element və şəbəkə" kompozisiyasını ehtiva edir. Şaquli ritm genişdir: əsas bölmələr arasında 64–80 piksel. Altbilgi səhifənin altındakı sütun formalı keçid qrupları olan tünd zolaqdır. Üfüqi məhsul panellərinin sağ tərəfindəki karusel oxları səhifələmə nöqtələri olmadan sürüşdürülə bilən məzmunu göstərir.
Fotoqrafiya dominant vizual elementdir: ağ fonda tam ekran məhsul fotoşəkilləri, 1:1 nisbətində kəsilmiş və isti torpaq tonları (bej, terrakota, adaçayı, fil sümüyü) olan həyat tərzi şəkilləri. Məhsul şəkillərinin öz rəngi var — istifadəçi interfeysi axromatik olaraq qalır və bu da məhsul çalarlarının vizual müxtəliflik təmin etməsinə imkan verir. Brend loqotipləri fərdi nişanlar kimi deyil, tünd və ya açıq əsas şəkillərdə üst-üstə düşən mətn kimi görünür. Əsas kompozisiyada məhsul kartları söz işarəsinin üstündə üzən, bir az üst-üstə düşən bürc kimi yerləşdirilir. Tək bir marka rəngindən istifadə edən kateqoriya nişanları istisna olmaqla, nişanlar minimalist və monoxromdur (qara konturlar). Məhsul şəkillərində illüstrasiyalar, 3D effektlər və ya qradiyentlər yoxdur.
Palitra
Brend
- Shop Violet
#5433eb— Göndər düyməsi, nöqtəli mətn işarəsi və brend loqotipi ağ fonda hərəkəti və fərdiliyi vurğulayan yeganə vurğulardır. - Violet Wash
#c0b5f3— Bənövşəyi göndərmə düyməsinin arxasında rəngini dəyişmədən parıltısını qoruyan şəffaf halə.
Neytral
- Canvas Mist
#f2f4f5— Səhifənin arxa planı və qaldırılmış kartların arxasında əlavə səth işlənməsi. - Pure White
#ffffff— Kartlar, giriş sahələri, üzən işarələr və həb formalı düymələr üçün əsas səth. - Ink Black
#000000— Qaranlıq rejimdə əsas mətn, başlıqlar, nişanlar, naviqasiya simvolları və məhsul kartları. - Faint Border
#ebebeb— Kartlarda, giriş sahəsinin konturlarında və həb formalı düymə çərçivələrində nazik ayırıcı xətlər. - Muted Gray
#787574— Qeyri-aktiv olduqda ikinci dərəcəli mətn, naviqasiya etiketləri, ikon konturları - Cool Stone
#cccccc— Yer tutucuları, deaktiv vəziyyətlər və qeyri-aktiv ikon fonları
Tipoqrafiya
11-dən 16 pikselə qədər · 4 addım
- GT Standard — əvəzetmə: Inter · konturlar 400 · Bütün ölçülərdə əsas şrift — həm əsas mətn, həm də başlıqlar üçün. 16px/-0.031em ölçülü GTStandard-MRegular əsas mətn, düymələr və etiketlər üçün əsas şriftdir. 20px/-0.05em ölçülü GTStandard-MSemibold bir neçə böyük başlıq üçün istifadə olunur; 11–12px ölçülü GTStandard-MMedium isə mikrobaşlıqlar üçün istifadə olunur. Hər bir şrift variantı 400 optik çəki ilə göstərilir — şrift iyerarxiyasına qalın kontrast əvəzinə incə qradiyentlər və sıx mənfi hərf aralığı vasitəsilə nail olunur. Bu, imza stilidir: Shop qalın şriftlərlə qışqırmır, əksinə mətni hərf aralığı vasitəsilə formalaşdırır.
- Shopify Sans — əvəzetmə: Inter · konturlar 400, 700 · Tətbiq yükləmə bannerləri və kuki razılığı mətni kimi sistem səviyyəli mesajlar üçün qorunur.
İntervallar və forma
| Məqsəd | Mənası |
|---|---|
| Sıxlıq | orta |
| Əsas addım | 12px |
| Düymə radiusu | 9999px |
| Kart radiusu | 28px |
| Kölgələr | yumşaq kölgələr |
| Bölmələr arasında | 64px |
| Səhifə eni | 1200px |
Süni intellekt veb saytınızı Shop ü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
- Cursor — Kömürlərlə işıqlandırılan rahat perqament emalatxanası
- Slush — pastel kağız üzərində şişmə stikerlər kainatı
- MindMarket — Kremli kağız üzərində rahat bir nağıl kitabı - günəş işığına batmış, stiker kimi yumşaq bir səthdə böyük İnter başlıqlarının və kəsilmiş kağız personajlarının yanaşı yerləşdiyi səmimi bir redaksiya kətan.
- Airbnb — Tək mərcan qırmızı əlfəcinli sakit ağ qalereya divarı
- Superr — Günortadan sonra yumşaq işığında isti məktəb dəftəri. Krem rəngli səhifə, qapaqsız narıncı marker və soyulmasını gözləyən laminat ad stikerləri yığını.
- Apple (España) — Muzey qalereyası, yumşaq gün işığında, hər bir eksponatın yüngül rəngli divara qarşı işıqlandırma ilə işıqlandırıldığı tək, valehedici, çəkisiz ağ bir məkandır.
- Lamborghini — Sərgi salonunda, işıqforların altında qara kuzov rəngi - bir sarı avtomobil
- Amplemarket — Konfeti ilə örtülmüş günəş işığı altında iş yeri
- Getharvest — Qızıl saatda masa – isti krem rəngli kətan, kətan üzərində asılmış ağ açıqcalar və tək parlaq narıncı alov
- Agence Foudre — Jurnalın üz qabığı dodaq boyasını xatırladan solğun çəhrayı rəngdədir.
- Drive Capital — İsti kağız üzərində retro yol səyahəti afişası
- Apple (España) — ağ qalereya vitrin qutusu