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.
- 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.
- Factory — Gece yarısı "savaş odası" terminali. "Fabrika", tek bir beyaz kartın el feneriyle aydınlatılmış bir emir gibi düştüğü simsiyah bir kontrol paneli; odadaki tek nesne işin kendisi.
- Hungry Tiger — Tandırın duvarındaki zerdeçal rengi parlak grafiti. Altın ve paslı kahverenginin birleşik bir paleti ve o kadar büyük bir yazı tipi ki, bir web sitesinden çok baharat pazarı tabelasına benziyor.
- Bibliothèque — Spot ışığı altında siyah küp şeklinde bir galeri – geniş, karanlık bir salonda tek başına aydınlatılmış bir tabak.
- Apple (España) — Aydınlatmalı siyah tiyatro