Shopify
Gece Yarısı Serası - Markalar, tek bir nane ışıltısıyla aydınlatılan koyu turkuaz bir arka plan üzerinde çiçek açıyor.
Shopify'ın tasarım sistemi, ticaret için bir gece atölyesi gibidir: koyu turkuaz yeşiliyle renklendirilmiş neredeyse siyah bir tuval, geniş ve kendinden emin bir sans-serif yazı tipi ve etkileşimli anları etkinleştiren tek bir canlı nane yeşili vurgu. Arayüz, ürünlerin ve markaların ışık kaynağı olduğu bir karanlık odayı andırır; fotoğraflar ve vitrinler neredeyse siyah yüzeylere karşı parıldarken, krom öğeler geri plana çekilir. Bileşenler geometrik ancak yumuşaktır: ince kenarlıklı 12 piksel yarıçaplı kartlar, hap şeklinde düğmeler ve bağırmak yerine ölçeği fısıldayan 330 ağırlığında bir yazı tipi. Tek bir kromatik noktalama işareti (#36f4a4) bağlantılarda, etiketlerde ve odak durumlarında az miktarda kullanılır ve renk, satıcı hikayelerinin görsel odak noktası olarak kalmasını sağlamak için işlevsel anlara saklanır.
Maksimum genişlik ~1280 piksel olup, ortalanmış ve fotoğraf konteynerinin ötesine uzanan tam genişlikte açılış bloklarına sahiptir. Sayfa ritmi şu şekilde değişir: (1) üst üste bindirilmiş başlık ve harekete geçirici düğmeler içeren tam genişlikte koyu bir açılış sayfası, (2) 2 sütunda maksimum genişlikte metin ve resim blokları veya 3 sütunda resim ızgaraları içeren rahat koyu bölümler, (3) daha derin bir tuval üzerinde yükseltilmiş kartlar olarak görüntülenen etkileşimli vitrin panelleri (ürün kartı, kargo hesaplayıcı, dünya haritası). Navigasyon, logo + 3 navigasyon öğesi + ikincil bağlantılar + birincil harekete geçirici düğme içeren sabit bir üst çubuktan oluşur ve tümü sağa hizalanmıştır. Dikey ritim, bölümler arasında 80 piksellik boşluklar ve yumuşak bir geçiş kullanır; koyu bölümler arasında ayırıcı yoktur, yalnızca yüzey tonunda bir değişiklik vardır.
Görsel tasarım öncelikle perakendeciye odaklanmıştır: Tam boyutlu ürün fotoğrafları ve marka etkinliklerinden alınan fotoğraflar, genellikle üzerine beyaz metin yerleştirilmiş büyük arka planlar şeklinde, görsel ağırlığın büyük bölümünü oluşturur. Görseller dar kesimli, yüksek kontrastlı ve şenlikli bir yapıya sahiptir (Nasdaq zilinin çalması, grup selamlaşmaları, eldeki ürünlerin yakın çekimleri). Koyu arka plan, bu fotoğrafların spot ışıklarıyla aydınlatıldığı izlenimini yaratır. İllüstrasyonlar minimalisttir; ana açıklayıcı işlev, yerleştirilmiş ürün görselleri ve mağaza vitrinlerinin ekran görüntüleriyle gerçekleştirilir. Simgeler tek renklidir, çizgi genişliği 1,5–2 pikseldir ve genellikle beyaz veya aktif durumlar için #36f4a4 rengindedir.
Palet
Marka
- Shopify Mint
#36f4a4— Aktif gezinme göstergeleri, odak halkaları, etiket vurguları ve bağlantılar üzerindeki fareyle üzerine gelindiğinde beliren vurgular, koyu bir arka plana karşı etkileşimlilik hissi yaratan tek renkli ışıltıdır.
Doğal
- Midnight Forest
#02090a— Sayfa tuvali, başlık arka plan resimleri, bölüm arka plan resimleri - Deep Lichen
#061a1c— Ana kart yüzeyleri, kabartmalı paneller, içerik blokları. - Shaded Fern
#072720— Gezinti paneli, ek kartlar, panelin neredeyse fark edilmeyen şekilde yükselmesi. - Spruce Border
#1e2c31— Kartlar için ince kenarlıklar, ayırma çizgileri, giriş alanı çerçeveleri. - Abyss Indigo
#000a1e— Ürün/tanıtım materyallerinin yerleştirilebileceği ek yüzey, işlev açıklamaları içeren paneller. - Pure White
#ffffff— Ana metin, düğme dolgusu, başlık, logolar.
Tipografi
12 ila 70 piksel arası · 8 adım
- Neue Haas Grotesk — yenisiyle değiştirme: Inter · ana hatlar 330, 400, 500, 550, 600 · Temel tipografik sistem, gösterişli olmaktan ziyade incelikli olan 70–96 piksel (330–400) yazı tipi ağırlığına sahip başlıklar; 16–18 piksel (400–500) yazı tipi ağırlığına sahip gövde metni; ve 14–16 piksel (500–550) yazı tipi ağırlığına sahip gezinme ve kullanıcı arayüzünden oluşmaktadır. Büyük ekran boyutlarında kullanılan ultra ince 330 yazı tipi ağırlığı ayırt edici bir özelliktir: hacimli olmaktan ziyade ölçülülük yoluyla güven duygusu iletir.
- Inter Variable — yenisiyle değiştirme: Inter · ana hatlar 400, 420, 450, 550 · Gezinti arayüzü öğelerinde, küçük notlarda, sekme kontrollerinde ve altbilgilerdeki mikro metinlerde kullanılan ikincil bir yazı tipidir. Biraz daha büyük küçük harfleri ve daha standart harf aralığı, kompakt boyutlarda daha okunaklı olmasını sağlar. Ayrıca, 420 kalınlığındaki bir yazı tipinin normal ve orta boyutlu bir yazı tipi arasındaki boşluğu doldurduğu durumlar için de uygundur.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | ortalama |
| Temel adım | 12px |
| Düğme yarıçapı | 9999px |
| Kart yarıçapı | 12px |
| Gölgeler | hayır - gölgeler yerine kenarlıklar |
| Bölümler arasında | 80px |
| Sayfa genişliği | 1280px |
Yapay zeka, web sitenizi Shopify 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
- Retool — Kor halindeki közlerle aydınlatılmış, hassas aletler için bir yüzey olan, her şeyin yaratıldığı sıcak bir obsidyen atölyesi.
- Elektron — Gece yarısı ekipman kontrol paneli neredeyse simsiyah bir tuval gibidir; ürün fotoğrafları parıldar, arayüz ise neredeyse görünmez kalır.
- REKKI — Fotoğraf laboratuvarındaki uçuş kontrol paneli
- OFFFICE : — Tek parça yazı tipiyle kaplanmış bir kara film galerisi
- Clyde — Tek bir spot ışığıyla aydınlatılan teşhir salonu, odadaki tek rengin sıcak tonlarda bir renk küresi olduğu neredeyse karanlık bir galeri gibidir.
- Channel Studio — Mercan rengi bir abajuru olan stüdyo fotoğraf laboratuvarı.
- Electronic Materials Office — Kömürle dekore edilmiş bir galerideki kor halindeki bir köz.
- Apple iPhone 18 Pro — Gece yarısına ait donanımların sergilendiği bir galeri. Her bölümü, ürünün bir parçasının özenle vurgulandığı ve tipografi ile mavi kontrollerin etrafında zarif etiketler görevi gördüğü, karanlık, müze benzeri bir kaide olarak düşünün.
- Apple Watch Ultra 4 — Gece testleri için bir araç. Büyük SF Pro başlıklarının yüksek hassasiyetli ekipmanları, aktif verileri ve dikkatlice ayarlanmış elektrik renklerini çerçevelediği, siyah sergi alanlarından oluşan bir dizi ekran oluşturun.
- Apple Watch Series 12 — Karanlıkta bronz bir sensör. Saatin donanımını ve durum göstergelerini, neredeyse karanlık bir galeride asılı duran aydınlatılmış nesneler olarak düşünün.
- Bedouin's Daughter — Siyah kadife üzerinde güneş ışığı. Görsel kompozisyonun eşit parçaları olarak parlak, tereyağı sarısı, sert siyah yüzeyler ve grenli, güneş ışığıyla aydınlanmış görüntüler kullanın.
- ORYZO AI — Bir karanlık odayı konu alan fotoğraf denemesi. Sıcak karanlığın içinde tek başına duran bir obje, tek dekorasyonu krem rengi yazı tipi.