Web tasarımda renk psikolojisi ve tipografi hiyerarşisi nasıl planlanır? Okunabilirlik, marka uyumu, font pairing ve erişilebilirlik standartları. Solid Medya grafik ve web tasarım ekibinden görsel dil rehberi.
Bir web sayfasına bakan kişi, içeriği okumaya başlamadan önce bile renklerden ve yazı karakterlerinden bir izlenim edinir: ciddi mi, samimi mi, modern mi, özensiz mi? Renk ve tipografi bu yüzden süs değil, markanın sesini görsel olarak taşıyan ve okunabilirliği belirleyen temel araçlardır.
Aşağıda renk seçiminin nereden başladığını, renk psikolojisinin sınırlarını, palet kurma yöntemini, kontrast ve erişilebilirlik ölçütlerini, tipografi hiyerarşisini, font eşleştirmesini ve okunabilir metin ayarlarını sırasıyla ele alıyoruz.
Web tasarımda renk seçimi nereden başlar?
Renk seçimi, trend renk listelerinden değil, markanın kimliğinden, sektöründen ve hedef kitlesinden başlar. Logonuzda zaten bir ana renk varsa palet onun üzerine kurulur; yoksa önce markanın nasıl hissettirmesi gerektiğini (güvenilir, enerjik, sakin, prestijli gibi) birkaç kelimeyle yazın, renkleri bu kelimelere göre seçin.
Rakiplerinizin sitelerine de bakın. Aynı sektörde herkes aynı mavi tonunu kullanıyorsa bu bir güven işareti olabilir, ama sizi ayırt etmeyi de zorlaştırır. Amaç rakiplerden bilinçli bir uzaklık ya da bilinçli bir yakınlık kurmaktır. Baskıda, sosyal medya görsellerinde ve tabelada da kullanılacağı için seçilen tonların yalnızca ekranda değil farklı ortamlarda çalışıp çalışmadığını önceden düşünmek gerekir. Karar vermeden önce renk örneklerini, görselleri ve yazı denemelerini tek sayfada toplayan basit bir ilham panosu hazırlamak, ekip içinde ortak bir dil oluşturmanın hızlı yoludur.
Renk psikolojisi web tasarımda ne kadar güvenilirdir?
Renklerin insanlarda uyandırdığı çağrışımlar gerçektir, ancak evrensel ve kesin değildir; kültüre, bağlama ve kişisel deneyime göre değişir. "Mavi güven verir, kırmızı aciliyet yaratır" gibi genellemeler yol göstericidir, fakat tek başına bir tasarım kararını haklı çıkarmaz. Aynı kırmızı bir finans sitesinde uyarı, bir restoran sitesinde iştah ve enerji çağrıştırabilir.
Bu nedenle renk psikolojisini kural değil, hipotez olarak kullanın. Önemli kararlarda, örneğin çağrı butonunun rengi için, kendi ziyaretçilerinizle A/B testi yapmak herhangi bir genel iddiadan daha güvenilirdir. Renk kararını verirken çağrışımdan çok marka uyumuna, kontrasta ve tutarlılığa bakın.
Renk paleti nasıl oluşturulur?
Web sitesi için işlevsel bir renk paleti genellikle bir ana renk, bir ya da iki destek rengi, nötr tonlar ve durum renklerinden oluşur. Çok sayıda renk kullanmak sayfayı dağınık gösterir; sınırlı bir palet tutarlılık sağlar ve vurgunun nereye yapılacağını netleştirir. Tasarımcıların sık kullandığı pratik oran, yüzeylerin yaklaşık yüzde 60'ında nötr, yüzde 30'unda destek, yüzde 10'unda vurgu rengi kullanmaktır; kesin kural değil, başlangıç noktasıdır.
- Ana renk: markayı temsil eden ve başlıklarda, bağlantılarda, ana butonlarda görülen renktir.
- Vurgu rengi: çağrı butonları gibi dikkat çekilecek az sayıda öğede kullanılır; her yerde kullanılırsa vurgu özelliğini kaybeder.
- Nötr tonlar: arka plan, metin ve çizgiler için kullanılan beyaz, gri ve koyu tonlardır; sayfanın büyük kısmını oluşturur.
- Durum renkleri: başarı, uyarı ve hata mesajlarında kullanılır ve anlamı sitenin her yerinde aynı kalmalıdır.
- Her renk için açık ve koyu varyasyonlar tanımlayın; hover, pasif ve odak durumlarını bu varyasyonlarla çözün.
Renk kontrastı ve erişilebilirlik standartları nelerdir?
WCAG erişilebilirlik yönergesi, normal boyutlu metin ile arka plan arasında en az 4,5:1, büyük metin için ise en az 3:1 kontrast oranını AA seviyesinde gerekli görür. Büyük metin, yaklaşık 24 piksel ve üzeri ya da 18,66 piksel ve üzeri kalın yazıyı kapsar. Gri üzerine açık gri yazı estetik görünebilir, fakat düşük görme yeteneği olanlar kadar parlak ışıkta ekrana bakan herkes için okunmaz hale gelir.
Kontrast oranını WebAIM Contrast Checker gibi ücretsiz araçlarla saniyeler içinde ölçebilirsiniz. Şu kuralları da uygulayın:
- Bilgiyi yalnızca renkle iletmeyin; hata mesajına simge ya da metin ekleyin, çünkü ziyaretçilerin bir kısmı kırmızı ile yeşili ayırt edemez.
- Form alanı kenarlıkları ve buton sınırları gibi arayüz bileşenlerinde de arka planla en az 3:1 kontrast sağlayın.
- Fotoğraf üzerine yazılan metinlerde yarı saydam bir katman ekleyerek okunabilirliği garanti altına alın.
- Koyu mod sunuyorsanız renkleri otomatik tersine çevirmek yerine ayrı bir palet tanımlayıp kontrastı orada da test edin.
Tipografi hiyerarşisi nasıl kurulur?
Tipografi hiyerarşisi, sayfadaki yazıları önem sırasına göre boyut, ağırlık ve renkle ayırarak okuyucunun gözünü yönlendirmektir. Taranan bir sayfada ziyaretçi önce başlıkları okur; bu yüzden H1, H2, H3 ve gövde metni arasındaki fark bir bakışta anlaşılmalıdır. Ölçü olarak 1,2 ile 1,333 arasında sabit bir oran kullanan bir tip ölçeği (örneğin 16, 20, 25, 31 piksel) tutarlılık sağlar.
Hiyerarşide boyut tek araç değildir: kalınlık, harf aralığı ve renk de seviye farkı yaratır. Her şeyi kalın yapmak ya da çok fazla farklı boyut kullanmak hiyerarşiyi bozar. Mantıklı bir yapıda genellikle üç ya da dört seviye yeterlidir. Başlık yapısını görsel olduğu kadar anlam olarak da doğru kurun; boyutu büyütmek için H3 yerine H2 etiketi kullanmak hem erişilebilirlik hem SEO açısından yanlıştır. Büyük harfle yazılan başlıkları CSS ile üretiyorsanız sayfanın dil bilgisini Türkçe olarak tanımlayın; aksi halde tarayıcı "i" harfini "I" yapabilir ve "İ" yerine yanlış karakter görünebilir.
Font eşleştirmesi (font pairing) nasıl yapılır?
Font eşleştirmesinin en güvenli yolu, birbirinden belirgin biçimde farklı ama aynı ruhu paylaşan iki yazı tipini seçmek ya da tek bir yazı ailesinin farklı ağırlıklarını kullanmaktır. Örneğin başlıkta karakterli bir serif, gövde metninde sade bir sans-serif iyi çalışır. Birbirine çok benzeyen iki fontu eşleştirmek ise bilinçli bir tercih gibi değil, yanlışlık gibi görünür.
Türkçe için ayrıca ı, İ, ğ, ş, ç, ö ve ü harflerinin yazı tipinde tam desteklendiğinden emin olun; eksik karakterler yedek fonta düşer ve satırda uyumsuzluk yaratır. Hızı korumak için en fazla iki aile ve her aileden iki ya da üç ağırlık kullanın. Yazı tipi dosyalarını WOFF2 biçiminde ve mümkünse kendi sunucunuzdan sunmak, hem yükleme süresi hem veri gizliliği açısından avantaj sağlar; font-display ayarı da metnin yazı tipi yüklenirken görünür kalmasına yardımcı olur.
Okunabilir metin için hangi ölçüler kullanılmalı?
Okunabilir bir metin için gövde yazısı genellikle 16 piksel veya üzerinde, satır yüksekliği yazı boyutunun yaklaşık 1,4 ila 1,6 katı ve satır uzunluğu da yaklaşık 45 ile 75 karakter arasında tutulur. Satırlar bundan uzun olursa göz bir sonraki satırın başını bulmakta zorlanır; çok kısa olursa okuma ritmi bozulur. Paragraflar arasında yeterli boşluk bırakmak ve metni sola yaslamak da okumayı kolaylaştırır; Türkçe gibi uzun kelimeler içeren dillerde tam yaslama (justify) çoğu zaman düzensiz boşluklar üretir.
Renk ve tipografi kararlarını masaüstünde bırakmayıp telefonda, düşük parlaklıkta ve farklı tarayıcılarda da deneyin. Markanıza uygun bir görsel dil oluşturmak ve bunu web sitesine uygulamak için grafik ve web tasarım desteği isterseniz Solid Medya ekibiyle çalışabilirsiniz.