Görsel Tasarımın Ölçülebilir Kısmı: Kontrast, Tipografi, Grid
İlk izlenim tasarımın en pahalı anı. Kullanıcı sayfayı okumaya başlamadan bir karar veriyor, sonra okuduğu her şeyi o karara göre yorumluyor. Bu kararı belirleyen şeylerin çoğu da zevk meselesi değil, ölçülebilir: kontrast oranı, tipografik hiyerarşi, hizalama, boşluk ritmi. Aşağıdakiler o ölçülebilir kısmın pratikteki karşılığı.
Kontrastı gözle ayarlamayı bırakın
Metin kontrastının sayısal bir eşiği var, tahmin etmeye gerek yok. WCAG normal boyutlu metin için 4.5:1, büyük metin için 3:1 istiyor; büyük metnin tanımı da 24px normal ya da 18.66px kalın. Tarayıcının geliştirici araçlarında renk seçiciyi açtığınızda bu oran zaten yazıyor.
Uygulamada en sık şurada patlıyor: açık gri zemin üzerine biraz daha açık gri ikincil metin. Ofis ekranında zarif duruyor, güneşte telefonda kayboluyor. WCAG'in kontrast maddesi bunun neden bir erişilebilirlik konusu olduğunu ayrıntısıyla anlatıyor, ama günlük işte tek kural yeter: ikincil metni ayırmak için rengini açmayın, boyutunu ya da ağırlığını düşürün.
Renk paletini role göre kurun
Renk seçimini "kırmızı heyecan, mavi güven" tablolarına bağlamam. Aynı mavi bir banka sitesinde ciddiyet, bir oyun arayüzünde soğukluk okunur; anlamı taşıyan şey rengin kendisi değil, nerede ve ne sıklıkta göründüğü.
İşleyen yaklaşım şu: tek bir vurgu rengi belirleyin, onu yalnızca birincil eyleme ayırın, geri kalan her şeyi nötr bir gri skalasına bırakın. Sayfada üç tane turuncu buton varsa hiçbiri vurgu değildir. Paleti de doğrudan bileşenlerin içine yazmak yerine CSS değişkeni olarak tanımlayın. Marka rengi değiştiğinde iş tek satıra iner, stil dosyalarında hex avına çıkmazsınız.
İki aile yeter, maliyet ağırlıklarda
Font ailesi saymak yanıltıcı bir ölçü. Yükleme maliyetini belirleyen şey ağırlık ve stil sayısı: dört ağırlığı ve italikleri olan tek bir aile, tarayıcı için sekiz ayrı dosya demek.
İki ağırlıkla başlayın. Hiyerarşiyi punto, satır aralığı ve boşlukla kurun; kalın yazı bir vurgu aracı, varsayılan değil.
Türkçe içerikte ayrıca subset'i kontrol edin. ğ, ş, ı ve İ latin bloğunda değil, latin-ext'te. Fontu kendi sunucunuzdan servis ediyorsanız ve elinizdeki woff2 yalnızca latin içeriyorsa bu harfler yedek fonta düşer; başlığın ortasında harf kalınlığı ve satır hizası değişir, çoğu kişi neyin bozulduğunu anlamadan sayfayı yanlış bulur.
12 kolonun sebebi bölünebilirlik
Grid tercihleri genelde estetikle açıklanır, oysa 12 sayısının yaygınlaşma nedeni aritmetik. 12'yi 2, 3, 4 ve 6'ya tam bölebilirsiniz, yani yarım, üçte bir, dörtte bir ve altıda bir yerleşimlerin hepsi tam kolonlara oturur. 10 kolonda üçte bir yoktur: 10/3 kesirli çıkar, yan yana üç kart koymak istediğinizde ya kolonu bölersiniz ya da gridi kırarsınız. Üç sütunlu özellik bölümleri, ürün ızgaraları, kart listeleri bu yüzden 12'de rahat çalışıyor.
CSS Grid geldikten sonra kolon sayısını baştan sabitlemek çoğu düzende zorunlu değil; repeat(auto-fit, minmax(260px, 1fr)) mobil ile masaüstü arasındaki geçişi kendi başına halleder. Sabit tutulması gereken şey boşluk. Tek bir ölçek seçin, 4 ya da 8'in katlarıyla ilerleyin, ara değer uydurmayın. Düzeni derli toplu gösteren şey kolon sayısından çok bu tutarlılık.
Kuralı ne zaman bozacaksınız
Gridi bozmak işe yarar, ama tek bir yerde: sayfanın zaten en çok dikkat çeken öğesinde. Hero görseli kolon sınırından taşabilir, büyük başlık ızgaranın dışına çıkabilir, çünkü kullanıcı oraya nasılsa bakıyor ve sapmayı kasıt olarak okuyor. Aynı serbestliği form alanlarında ya da tablo başlıklarında kullanırsanız kasıt gibi değil hata gibi görünür, kullanıcı da hatalı sandığı arayüze daha az güvenir.