Peak Design
Kısmen aydınlatılmış galeri duvarı
Peak Design, galeri kalitesinde ticari bir deneyim sunuyor: editoryal tipografi ve ürün fotoğrafçılığının tüm işi yaptığı neredeyse tek renkli bir tuval. Sistem, keskin beyaz yüzeyleri koyu, neredeyse siyah panellerle değiştirerek, bir tarafta italik bir yazı tipinde serif bir başlığın, diğer tarafta ise tam ekran bir ürün veya yaşam tarzı görüntüsünün yer aldığı çarpıcı bölünmüş düzenler oluşturuyor. Tipografi, markanın temel sesidir: başlıklar için uzun, yoğunlaştırılmış, dekoratif bir serif yazı tipi (Exposure tarzında), kullanıcı arayüzü için nötr bir grotesk yazı tipi (Geist) ve harfler, kaşlar ve düğmeler için yoğunlaştırılmış bir sans-serif yazı tipi (bryant) kullanılmıştır. Arayüz temiz kalır: renkli UI öğeleri, dekoratif gradyanlar, gölgeler yok; sadece ince kenarlıklar, iki köşe yarıçapı (4 ve 8) ve yalnızca ara sıra vurgu için kullanılan tek bir kırmızı vurgu bulunur. Bileşenler dekoratif olmaktan ziyade daha düşünülmüş görünüyor: ince ayırıcılar, düz ürün kartları, hap şeklinde filtreler ve mimari detaylar gibi duran görünmez düğmeler.
Sayfanın tam genişlikteki bölümleri beyaz ve neredeyse siyah arasında dönüşümlü olarak yer alır; her bölüm, bölüm düzeyinde maksimum genişlik sınırı olmaksızın, tüm görüntü alanı genişliğini kaplar. Bölümler içindeki içerik, maksimum ~1440 piksel genişliğe sahiptir ve ortalanmıştır. Baskın başlık deseni 50/50 bölünmüştür: bir tarafta metin bloğu (göz atma + başlık + alt metin + düğmeler), diğer tarafta ise tam genişlikte bir ürün veya yaşam tarzı görseli bulunur. Sayfanın alt kısmında, ürün ızgarası, 24-32 piksel genişliğinde boşluklara sahip, eşit genişlikte dört sütunlu ürün kartı kullanır. Kategori filtre panelleri, ana navigasyonun hemen altında, yatay bir "hap" satırında konumlandırılmıştır. Bölümlerin ritmi, bölümler arasında 80 piksel dikey girintiyle dönüşümlü olarak açık/koyu şeritlerle tanımlanır ve bir dergi ritmi oluşturur. Navigasyon, üstünde ince bir reklam şeridi bulunan sabit bir üst çubuktur.
Görsel dil, ürün fotoğrafçılığının hakimiyetindedir: çantalar, kemerler ve kamera ekipmanları, günlük yaşam bağlamından yoksun, tamamen beyaz bir arka plana karşı fotoğraflanır; aydınlatma, malzemenin dokusunu ve donanımın detaylarını vurgular. Günlük görüntüler yalnızca tam ekran editoryal bölümlerde (örneğin, bir daire içinde kamera tutan eller) görünür ve bölünmüş panelin bir tarafındaki görüntü alanının tüm genişliğini kaplar. Ana görüntüde köşe yarıçapı yoktur (kenarlarla aynı hizadadırlar) ve kart görüntüsünde de köşe yarıçapı yoktur. İşlevsel kullanıcı arayüzü simgeleri dışında illüstrasyon, soyut grafik veya simge illüstrasyonu yoktur. Odak noktası ürünün kendisidir—tutarlı açılar, tutarlı aydınlatma ve tutarlı beyaz bir arka plana sahip stüdyo kalitesinde fotoğraflar—kullanıcı arayüzü arka plana karışarak nesnelerin kendilerini ifade etmesine olanak tanır.
Palet
Doğal
- Carbon Ink
#1a211e— Başlıkların her birinin temelini oluşturan ve bölümlere ayrılmış kısımların koyu arka plan panellerini meydana getiren, siyaha yakın bir renk; gövde metni, koyu kenar çubukları, simgeler, açık renkli yüzeyler üzerindeki çerçeveler. - Paper White
#ffffff— Göze batmayan bir arka plan oluşturmak ve bölümleri ayırmak için kullanılan hafif bir destekleyici yüzeydir. Eylem çağrısı için ana renk olarak kullanılmamalıdır. - True Black
#000000— En yüksek kontrastı sağlayan öğeler (beyaz arka plan üzerinde başlık dolgusu, duyuru çubuğu, altbilgi tasarımı, düz simge çerçeveleri) tasarımın en net çizgiler gerektirdiği yerlere yerleştirilir. - Obsidian
#0c0c0c— Derin panel yüzeyleri ve görüntü katmanları - gerçek siyahtan biraz daha yumuşak, tüm ekran yüzeyini kaplayan koyu alanlar için kullanılır ve düz siyah gibi sert değil, sağlam bir his vermelidir. - Fog
#eef1f0— Göze batmayan bir arka plan oluşturmak ve bölümleri ayırmak için kullanılan hafif bir destekleyici yüzeydir. Eylem çağrısı için ana renk olarak kullanılmamalıdır. - Mist
#e0e0e0— Ayırıcı çizgiler, engelli durumları, ince yapısal ayırıcılar - beyaz bir tuval üzerinde bölümler arasındaki sınırları belirleyen orta-açık gri bir renk.
Tipografi
14 ila 80 piksel arası · 6 adım
- Geist — yenisiyle değiştirme: Inter · ana hatlar 400, 600, 700 · Ana metin, ürün başlıkları, açıklamalar, form alanları, bağlantı metni ve altbilgi içeriği. Yazı tipi kalınlığı: Ana metin için 400, vurgular için 600 ve ürün başlıkları ile önemli satır içi notlar için 700. Nötr Grotesque yazı tipi, Display Serif ve Condensed Sans yazı tiplerinin marka stilini yansıtmasına olanak tanırken, Geist işlevsellik ve okunabilirlik sağlar.
- Exposure-style serif (Exposure-10) — yenisiyle değiştirme: Playfair Display · ana hatlar 400 · Başlıklar ve ana başlıklar. İtalik serif yazı tipinde tek bir kalınlık (400) kullanılarak editoryal otorite oluşturulur; bu kelimeler marka tonunu belirler ve sayfanın tüm genişliğini kaplayan koyu panellerde ve önemli bölümlerin başında az miktarda kullanılır. Sıkı harf aralığı (-0.025em), büyük harflerin hafif değil, daha ölçülü görünmesini sağlar.
- Bryant-style condensed sans (bryant) — yenisiyle değiştirme: Druk Wide · ana hatlar 700 · Gezinti etiketleri, kategori filtre düğmeleri, düğme metni, "kaşlar", bölüm etiketleri ve ek başlıklar. Sıkıştırılmış büyük harfler ve pozitif harf aralığı, endüstriyel, etiket benzeri bir stil yaratır; bu kelimeler tanımlar ve talimat verir, ancak asla açıklama yapmaz.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | ortalama |
| Temel adım | 24px |
| Düğme yarıçapı | 4px |
| Kart yarıçapı | 8px |
| Gölgeler | hayır - gölgeler yerine kenarlıklar |
| Bölümler arasında | 80px |
| Sayfa genişliği | 1440px |
Yapay zeka, web sitenizi Peak Design 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
- Arsenijs Fabrica — Galeri ışıkları altında, editoryal içeriğin doğal güzelliği ortaya çıkıyor. Galerinin bembeyaz duvarları, tek renkli arka plana karşı turuncu renkte titreşen sıcak bir flaş ışığı, incecik yazı tipleri ve bol miktarda beyaz alan.
- 21 TSI — Kırmızı bir boşluk, tek bir silüet – kullanıcı arayüzünün atmosferle bütünleştiği yüksek moda bir çekim.
- Aevi Wellness — İskandinav eczacı tarzı, ağırlıksız yazı tipi. Soluk gri-mavi bir vurgu, ürün fotoğraflarının sıcak beyaz bir arka plan üzerinde ince çerçeveli kartlara yerleştirildiği, genel olarak renksiz ve havadar editoryal düzenin havasını bozuyor.
- Palmer — Yumuşak gün ışığı altında bir seramik galerisi – etkileşim duvarla gerçekleşiyor ve objeler birer sanat eseri.
- PLATFORM — White Cube Galerisi ilgi odağı altında.
- Assembly Coffee London — Karanlık bir kavurma fırınındaki kömürler. Sıcak, loş ışıklı ürün fotoğrafları ve el yazısı serif harflerle yazılmış, neredeyse siyah bir zemin; gece yarısı basılmış bir samizdat özel kahve menüsünü andırıyor.
- ARTWORLD — Beyaz keten üzerine moda dergisi başlığı
- Structured — Plastik hamur benzeri kağıt üzerine Rönesans galerisi
- Airbnb — Tek bir mercan kırmızısı kitap ayracıyla süslenmiş, sakin beyaz bir galeri duvarı.
- VISIONNAIRE — Keskin beyaz bir arka plan üzerinde sokak giyim tarzında bir fotoğraf galerisi. Marka, basılı bir katalog gibi davranıyor: düz beyaz bir tuval, keskin siyah mürekkep ve bir ürünü veya logoyu sergilemek için renk bloğu olarak kullanılan tek bir sıcak krem rengi panel.
- Letter — Depodan çıkarılan göz kamaştırıcı eserlerin sergilendiği özel bir galeri. Siyah duvarlı bir sergi alanında, galerinin renkli duvarlarındaki krom heykellerin üzerinde serifli başlıklar beliriyor.
- Ramp — Yayın kurulu finans departmanı, tek bir neon işaretleyiciyle siyah beyaz sayfalar. Yayın organının neredeyse tek renkli yüzeyi, tek bir parlak limon yeşili çizgiyle her etkileşimi parasal bir sinyale dönüştürüyor.