Dub
Link'in mat pirinç kağıdı kontrol paneli
Dub'ın görsel sistemi, sade, neredeyse editoryal bir SaaS estetiğine sahip: çıkıntılı öğeler yerine ince kenarlarla bir arada tutulan neredeyse beyaz bir tuval, yapısal destek sağlayan yoğun tek renkli tipografi ve tek bir parlak mavi renk (#2563eb) ile dikkat çekiyor. Yüzeyler ilk bakışta düz ve çerçevesiz görünse de, her bir konteynerin 1 piksel #e5e5e5 kenar boşluğu, basılı bir belge hissi uyandırıyor. Kişilik, nötr paletin üzerinde yüzen küçük bir dizi renkli "hap" vurgusu (turuncu, yeşil, mor) ve gösterişli olmadan kendinden emin ve modern hissettiren başlıklar aracılığıyla elde ediliyor. Bileşenler kompakt ve yoğun: 8 piksel boşluklar, 12 piksel kart yarıçapı, 9999 pikselde hap şeklinde etiketler ve ağır, dolu düğmeler yerine görünmez kontroller.
Sayfa, yaklaşık 1200 piksel maksimum genişliğe sahip ortalanmış bir düzen üzerine kurulmuştur. Ana öğe, büyük bir ürün düzeninin üzerinde yatay olarak konumlandırılmış üç kayan öğe (Ortaklık Programları, Dönüşüm Analizi, Kısa Bağlantılar) içeren ortalanmış bir metin bloğudur. Bölümler, ton ayrımı için beyaz tuval ve #f5f5f5 kağıt bulanıklığı arasında değişen, tutarlı 64 piksellik boşluklarla dikey olarak düzenlenmiştir. Alt bölüm Z şeklinde bir düzen kullanır: editoryal metin orta üçte birlik kısımda ortalanmıştır ve kayan kullanıcı arayüzü kartları sol ve sağ kenar boşluklarına sabitlenerek asimetrik, dergi benzeri bir ritim oluşturur. Logo bulutu, sayfanın ortasına yerleştirilmiş basit bir 5x2 ızgaradır. Navigasyon, sabit veya mega menü içermeyen minimalist bir üst çubuktur—solda logo, ortada navigasyon, sağda iki düğme grubu (hayalet bir "Giriş" düğmesi + dolu bir "Kayıt Ol" düğmesi). Ana pencerenin kontrol paneli düzeni, klasik iki sütunlu bir uygulama düzenini sergiliyor: sabit bir kenar çubuğu (240 piksele benzer) + ziyaretçilerin kaydırmaya başlamadan önce ürün bilgilerinin yoğunluğunu belirleyen bir içerik alanı.
Görseller, yaşam tarzına değil, ürüne odaklıdır. Ana ekran, gerçek dünya ürün maketini temsil eden büyük bir kontrol paneli ekran görüntüsüne odaklanmıştır; bu ekran görüntüsünde yan menü navigasyonu, veri tablosu ve kayan kullanıcı arayüzü öğeleri, beyaz bir zemin üzerinde düz bir panel olarak yer almaktadır. Müşteri logoları (arı kovanı, süper güç, Chatbase vb.), sosyal medya performanslarını vurgulamak için doygunluğu azaltılmış gri tonlamalı bir ızgarada gösterilir ve sayfanın tek mavi vurgusunun baskın kalması için renklerden arındırılmıştır. Kayan iş ortağı kartları (gelir/ödeme verilerini içeren küçük profiller ve kutucuklar), alttaki editoryal metin bloklarının etrafında hareket ederek, metnin kendisinde gölge kullanılmadan derinlik hissi yaratır. Noktalı ızgara arka plan deseni, imza niteliğinde bir özelliktir: çok düşük opaklığa sahip ince bir sıra küçük nokta, doku ve tasarım sistemi/çizim yüzeyi hissi yaratır ve sitenin "modern bir bağlantı ilişkilendirme platformu" olarak konumlandırılmasını vurgular. İkonografi minimaldir, konturlar ve dolgular kullanılır ve özellik etiketleri için vurgu renk paleti (mandalina turuncusu, lavanta moru, nane yeşili) kullanılır. Fotoğraf, illüstrasyon veya 3D model kullanılmaz; ürünün kullanıcı arayüzü kendi başına görsel bir dildir.
Palet
Marka
- Electric Blue
#2563eb— Ana marka rengi—logo, bağlantılar, temel performans göstergeleri, aktif durumlar ve simge vurguları—kullanılıyor. Beyaz bir arka plan üzerinde zengin bir mavi, sistemin tek görsel çekiciliğini oluşturuyor. - Deep Sapphire
#1e40af— Eylem düğmesinin ana arka planı, eylem çağrısının kalın dolgusu (eylemi belirten tek renk), dikkat çekmek için az miktarda kullanılmıştır.
Doğal
- Canvas White
#ffffff— Sayfa arka planı, kart yüzeyi, açılır paneller her ekranın mutlak temelidir. - Paper Mist
#f5f5f5— İç içe geçmiş kartlar, ek paneller ve dolgular için fareyle üzerine gelindiğinde değişen ince renk efektleri. - Ash
#e5e5e5— Kartların, giriş konektörlerinin ve ayırıcıların üzerindeki ince kenarlar, sistemi bir arada tutan yapısal çizgiyi oluşturur. - Smoke
#d4d4d4— Seçilen konteynerler için daha keskin kenarlar ve ek düğme çerçeveleri. - Pebble
#c8c8c8— Orta kontrastlı kenarlıklar, kontrol hatları ve yapısal ayırıcılar. Bu renk, harekete geçirici mesajlarda ana renk olarak kullanılmamalıdır. - Midnight Ink
#0a0a0a— Düğmelerin ana metni, vurgulanan düğmeler ve gezinme metni, maksimum kontrast için neredeyse siyahtır.
Tipografi
11 ila 48 piksel arası · 9 adım
- Satoshi — yenisiyle değiştirme: Inter (weight 500 · ana hatlar 500 · Başlıkları Görüntüleme – yalnızca başlık ve bölüm başlıkları için 36–48 piksel satır genişliğinde kullanılır. Yazı tipi kalınlığı – 500 (orta, kalın değil): Başlıklar kendinden emin ve modern görünür, ancak asla baskın değildir. Satoshi'nin geometrik oranları, yazı tipine Inter'in metin gövdesinin taklit edemediği hafif editoryal, modern bir hava katıyor.
- Inter — yenisiyle değiştirme: Inter (native) · ana hatlar 400, 500, 600 · Gövde metni, kullanıcı arayüzü etiketleri, navigasyon, alt başlıklar ve küçük başlıklar. Inter, 11 piksellik mikro etiketlerden 30 piksellik ikincil başlıklara kadar her şeyi işleyen birincil çalışma aracıdır. Gövde metni için varsayılan ağırlık 400, vurgulanan öğeler ve düğme etiketleri için 500 ve önemli kullanıcı arayüzü etiketleri için 600'dür. 1,5 satır yüksekliğine sahip 16 piksel, en sık karşılaşılan tek adımlı boyuttur (1220 kez), bu da 16 pikselin standart gövde metni boyutu olduğunu doğrular.
- Geist Mono — yenisiyle değiştirme: JetBrains Mono or IBM Plex Mono · ana hatlar 400, 500 · Kod bloklarında 12-14 piksel, büyük kod görüntüleme öğelerinde ise 24 piksel boyutunda kod parçacıkları, teknik meta veriler ve tek aralıklı metin içeren belirteçler kullanılır. Bu, Dub'ın ürün konumlandırmasıyla tutarlı olarak geliştirici aracının güvenilirliğini sağlar.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | ortalama |
| Temel adım | 8px |
| Düğme yarıçapı | 8px |
| Kart yarıçapı | 12px |
| Gölgeler | hayır - gölgeler yerine kenarlıklar |
| Bölümler arasında | 64px |
| Sayfa genişliği | 1200px |
Yapay zeka, web sitenizi Dub 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
- ElevenLabs — Sıcak krem tonlarında, incelikli başlıklarla hazırlanmış bir fotoğraf denemesi. Bauhaus tarzı bir defter: yumurta kabuğu renginde kağıt, siyah mürekkep ve ürün sergilemek için tek bir mor ve turuncu vurgu.
- Awesomic — Turuncu noktalama işaretleriyle konfetiyi andıran, editoryal amaçlı çinko ağ.
- Monad — sıcak parşömen üzerine editoryal teknik dergi
- Seline Analytics — Sıcak kağıt üzerinde sessiz, analitik bir masa.
- Notion — Öğlen güneşinde ısınmış bir kağıt defter
- Anthropic — Sıcak parşömen kağıda basılmış bilimsel bir saha dergisi; sakin fildişi yüzeyler, tırnaklı yazı tipi başlıkları ve yalnızca harekete geçilmesi gerektiğinde ortaya çıkan tek bir kil rengi vurgu.
- Calendly — Soğuk mermer üzerine koyu mavi mürekkep
- Augen Pro — Apple'ın beyaz sunumunda, tek renkli bir alanda tek vurgu olarak klinik, ağırlıksız, elektrik mavisi bir renk öne çıkıyor.
- Antimetal — Krem rengi kağıda basılmış bir editörlük günlüğü—bilimsel bir dergide sakin bir sabah; burada ölçülülük özgüveni ifade eder ve serif yazı tipleri ağır işleri üstlenir.
- Perk — Sıcak parşömen kağıdı üzerinde elektrikli kireç
- Ditto — Güneş ışığı altında kır çiçeği örnekleri oluşturulan bir atölye. Sıcak krem rengi yüzeyler, canlı sarı bir taban rengi, koyu lacivert mürekkepler, eserin arkasında açan organik renk formları.
- Officevibe — Sıcak krem rengi kağıda basılmış bir editoryal dergi. İnsan kaynakları yönetimi üzerine düşünceli bir makalenin, modern mavi bir arayüz üzerinden fısıldayan el yazısı bir serif yazı tipiyle bir ürün olarak sunulduğunu hayal edin.