Shop
Beyaz mermer üzerinde yüzen bir ticaret takımyıldızı
Çevrimiçi mağaza, ürünlerin küçük resim ızgaraları yerine büyük, oldukça kavisli resim kartları olarak sergilendiği "beyaz tuval" modeliyle çalışıyor. Tüm arayüz inanılmaz derecede akıcı: 20-28 piksel yarıçaplar, hap şeklinde kontroller ve metni net ve kalın hale getiren sıkı negatif izleme özelliğine sahip kompakt 16 piksel GT Standard gövde. Sistemin tek cesur vurgusu, logoda, dairesel arama sonuçları alanında ve aynı düğmenin üzerinde renkli bir gölge olarak görünen canlı bir mor (#5433eb). Paletin geri kalanı sıcak nötr tonlardan oluşuyor: beyaz yüzeyler, ince bir soğuk gri tuval, ince kenarlıklar ve neredeyse siyah metin. Yoğunluk 12 piksel boşluklarla kompakt kalırken, kahraman ve kategori şeritleri 64-80 piksellik cömert bir dikey ritim sayesinde nefes alıyor ve ticaret deneyimini bir katalogdan ziyade bir göz atma deneyimine dönüştürüyor.
Maksimum genişlik 1200 piksel olup, yarı saydam #f2f4f5 tuval üzerine ortalanmıştır ve sol tarafta yalnızca gezinme simgelerini içeren 64 piksel genişliğinde kalıcı bir kenar çubuğu bulunmaktadır. Ana öğe, ortalanmış mor bir "mağaza" logosunun üzerinde ürün kartlarının ve hemen altında hap şeklinde bir arama çubuğunun yer aldığı tam genişlikte bir şerittir. Kategori hapları, arama çubuğunun altında tek bir ortalanmış satırda düzenlenmiştir. İçerik bölümleri (Kadın, Erkek, Güzellik, Ev, Bebek ve Çocuk), her biri ürün resimleri içeren 4 sütunlu bir ızgara veya 2 sütunlu "ana öğe ve ızgara" kompozisyonu içeren belirlenmiş şeritler olarak yer almaktadır. Dikey ritim cömerttir: ana bölümler arasında 64-80 piksel. Altbilgi, sayfanın altındaki koyu bir şerit olup, sütun şeklinde bağlantı grupları içermektedir. Yatay ürün panellerinin sağ tarafındaki döner oklar, sayfalama noktaları olmadan kaydırılabilir içeriği göstermektedir.
Fotoğrafçılık, baskın görsel öğedir: beyaz bir arka plana karşı tam ekran ürün fotoğrafları, 1:1 oranında kırpılmış ve sıcak toprak tonlarında (bej, toprak rengi, adaçayı yeşili, fildişi) yaşam tarzı görselleri. Ürün görsellerinin kendi renkleri vardır; kullanıcı arayüzü renksiz kalır ve ürün tonlarının görsel çeşitlilik sağlamasına olanak tanır. Marka logoları, ayrı simgeler yerine koyu veya açık ana görsellerin üzerine bindirilmiş metin olarak görünür. Ana kompozisyonda, ürün kartları, marka adının üzerinde yüzen, hafifçe üst üste binen bir takımyıldız şeklinde konumlandırılmıştır. Simgeler minimalist ve tek renklidir (siyah çerçeveler), tek bir marka rengi kullanan kategori simgeleri hariç. Ürün görsellerinde illüstrasyon, 3D efekt veya gradyan bulunmamaktadır.
Palet
Marka
- Shop Violet
#5433eb— Gönderme düğmesi, noktalı metin işareti ve marka logosu, beyaz arka planda eylemi ve bireyselliği vurgulayan tek unsurlardır. - Violet Wash
#c0b5f3— Mor gönder düğmesinin arkasında, rengi değişmeden parlaklığını koruyan saydam bir hale bulunuyor.
Doğal
- Canvas Mist
#f2f4f5— Sayfa arka planı ve kabartmalı kartların arkasındaki ek yüzey işlemi. - Pure White
#ffffff— Kartlar, giriş alanları, kayan tabelalar ve hap şeklindeki düğmeler için ana yüzey. - Ink Black
#000000— Ana metin, başlıklar, simgeler, gezinme sembolleri ve ürün kartları koyu modda. - Faint Border
#ebebeb— Kartlar üzerindeki ince ayırma çizgileri, giriş alanı çerçeveleri ve hap şeklinde düğme çerçeveleri. - Muted Gray
#787574— İkincil metin, gezinme etiketleri, etkin değilken simge çerçeveleri - Cool Stone
#cccccc— Yer tutucular, devre dışı bırakılmış durumlar ve etkin olmayan simge arka planları
Tipografi
11 ila 16 piksel arası · 4 adım
- GT Standard — yenisiyle değiştirme: Inter · ana hatlar 400 · Tüm boyutlarda, hem gövde metni hem de başlıklar için birincil yazı tipi kullanılır. 16 piksel/-0.031em boyutundaki GTStandard-MRegular, gövde metni, düğmeler ve etiketler için birincil yazı tipidir. 20 piksel/-0.05em boyutundaki GTStandard-MSemibold, birkaç büyük başlık için kullanılır; 11-12 piksel boyutundaki GTStandard-MMedium ise mikro yazılar için kullanılır. Her yazı tipi varyantı 400 optik ağırlıkla görüntülenir; yazı tipi hiyerarşisi, kalın kontrast yerine ince gradyanlar ve yoğun negatif harf aralığı ile elde edilir. Bu, imza niteliğinde bir stildir: Shop, kalın yazı tipleriyle bağırmaz, bunun yerine harf aralığıyla metni şekillendirir.
- Shopify Sans — yenisiyle değiştirme: Inter · ana hatlar 400, 700 · Uygulama yükleme banner'ları ve çerez onay metni gibi sistem düzeyindeki mesajlar için ayrılmıştır.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | ortalama |
| Temel adım | 12px |
| Düğme yarıçapı | 9999px |
| Kart yarıçapı | 28px |
| Gölgeler | yumuşak gölgeler |
| Bölümler arasında | 64px |
| Sayfa genişliği | 1200px |
Yapay zeka, web sitenizi Shop tarzında oluşturacak ve içeriğini dolduracak.
- Ürünlerinizi ve gönderilerinizi aşağıdaki bağlantılar aracılığıyla paylaşın: Instagram, TikTok, Facebook.
- Eski sitenizdeki içeriği aktarın; sadece adresi belirtmeniz yeterli.
- En iyi motor üzerinde modern tasarım: Sunucu tarafı işleme ve SEO optimizasyonu özellikleriyle birlikte React ( Next.js).
- Arama sonuçları için tamamen otomatik SEO optimizasyonu ve sinir ağı tabanlı öneriler.
Benzer stiller
- Cursor — Köz halindeki kömürlerin aydınlattığı, samimi bir parşömen atölyesi.
- Slush — Pastel kağıt üzerine çıkartmalardan oluşan şişme evren
- MindMarket — Krem rengi kağıda basılmış, sıcak ve samimi bir masal kitabı; büyük Inter başlıklarının ve kesilmiş kağıt karakterlerin güneş ışığıyla yıkanmış, yumuşak bir yüzeyde bir arada bulunduğu, dostane bir editoryal tuval.
- Airbnb — Tek bir mercan kırmızısı kitap ayracıyla süslenmiş, sakin beyaz bir galeri duvarı.
- Superr — Öğleden sonraki yumuşak ışıkta, sıcak bir okul defteri. Krem rengi bir sayfa, kapağı olmayan turuncu bir kalem ve soyulmayı bekleyen bir yığın lamineli isim etiketi.
- Apple (España) — Müze galerisi, yumuşak gün ışığında, her serginin hafifçe renklendirilmiş bir duvara karşı spot ışığıyla aydınlatıldığı, büyüleyici, ağırlıksız beyaz bir mekândır.
- Lamborghini — Showroomda, spot ışıkları altında, siyah gövdeli bir sarı araba.
- Amplemarket — Güneş ışığıyla yıkanmış, her yeri konfetiyle kaplı bir iş yeri.
- Getharvest — Altın saatte bir masa – sıcak krem rengi bir tuval, tuvalin üzerine asılmış beyaz kartpostallar ve tek bir parlak turuncu alev.
- Agence Foudre — Derginin kapağı, ruj rengini anımsatan yumuşak bir pembe tonunda.
- Drive Capital — Sıcak kağıda basılmış retro yolculuk posteri
- Apple (España) — beyaz galeri vitrini