Bir web sitesine giren ziyaretçi, tek bir satır okumadan önce bir karar verir: "Burası güvenilir mi, profesyonel mi, bana göre mi?" Bu kararı en çok etkileyen iki unsur, sitenin renkleri ve yazı tipleridir. Doğru seçildiklerinde fark edilmezler, sadece "iyi görünen" bir site hissi verirler. Yanlış seçildiklerinde ise en iyi içerik bile okunmaz.
Bu yazıda web sitesi tasarımında renk paleti ve tipografi seçimini; marka uyumu, okunabilirlik ve kullanılabilirlik açısından ele alıyoruz.
Renk Seçimi: Markadan Başlayın
Web sitesinin renk paleti çoğu zaman sıfırdan seçilmez; markanın logosundan ve mevcut kurumsal kimliğinden türetilir. Logonuzda kullanılan ana renk, sitenin vurgu rengi olmaya en güçlü adaydır. Ancak logodaki her rengi sitede eşit ağırlıkta kullanmak, karmaşık bir görünüme yol açar.
Basit bir palet yapısı
- Ana (vurgu) renk: Düğmeler, bağlantılar ve önemli vurgular için. Genellikle markanın en tanınan rengi.
- Nötr renkler: Arka planlar, metinler, çizgiler. Beyaz, açık gri, krem tonları ve koyu gri ya da laciverte yakın bir metin rengi.
- Destek rengi (isteğe bağlı): Ana rengi tamamlayan ikinci bir ton; bölümleri ayırmak ya da ikincil vurgular için.
- Durum renkleri: Başarı (yeşil), uyarı (sarı/turuncu) ve hata (kırmızı) mesajları için.
Tasarımcılar arasında sık anılan bir yaklaşım, sayfanın büyük bölümünü nötr renklerle, daha küçük bir bölümünü destek rengiyle ve en küçük ama en dikkat çekici bölümünü vurgu rengiyle oluşturmaktır. Böylece vurgu rengi gerçekten "vurgu" olarak kalır.
Renklerin Çağrışımları
Renklerin anlamları kültüre ve bağlama göre değişir; ama bazı genel çağrışımlar tasarım kararlarında yol gösterebilir:
- Lacivert ve mavi: Güven, kurumsallık, teknoloji. Finans, hukuk, sanayi ve teknoloji firmalarında sık kullanılır.
- Yeşil: Doğa, sağlık, büyüme. Tarım, gıda, sağlık ve sürdürülebilirlik odaklı markalarda tercih edilir.
- Kırmızı: Enerji, dikkat, aciliyet. Gıda, perakende ve kampanya vurgularında güçlüdür; fazla kullanıldığında yorucu olabilir.
- Turuncu ve sarı: Samimiyet, enerji, uygun fiyat algısı.
- Siyah ve koyu tonlar: Lüks, şıklık, premium algısı.
- Toprak tonları: Doğallık, el emeği, sıcaklık. Butik markalar, mimarlık ve iç tasarım firmaları için uygundur.
Bu çağrışımlar kural değildir. Asıl hedef, sektörünüzde fark edilirken müşterinize doğru duyguyu vermektir. Tüm rakipleriniz mavi kullanıyorsa, farklı bir renk sizi daha akılda kalıcı yapabilir.
Kontrast ve Okunabilirlik
Renk seçiminde en sık göz ardı edilen konu kontrasttır. Açık gri zemin üzerine açık gri yazı ya da renkli bir fotoğrafın üzerine ince beyaz yazı, tasarım programında şık görünebilir; ama telefonda, güneş altında ya da görme güçlüğü olan bir kullanıcı için okunmaz hâle gelir.
- Metin ile arka plan arasında yeterli kontrast olmalıdır. Web erişilebilirlik yönergeleri (WCAG), normal boyuttaki metinler için en az 4.5:1 kontrast oranı önerir.
- Düğme yazısı, düğme renginin üzerinde net okunmalıdır.
- Bilgi yalnızca renkle verilmemelidir. Örneğin bir formdaki hatalı alan sadece kırmızıyla değil, bir açıklama metniyle de belirtilmelidir.
Yazı Tipi (Tipografi) Seçimi
Kaç yazı tipi kullanılmalı?
Çoğu web sitesi için bir ya da iki yazı tipi yeterlidir: başlıklar için karakterli bir yazı tipi, gövde metni için okunaklı bir yazı tipi. Bazen tek bir yazı ailesinin farklı kalınlıkları da tüm ihtiyacı karşılar. Üçten fazla yazı tipi, sayfanın dağınık görünmesine ve yavaş açılmasına yol açar.
Serifli mi, serifsiz mi?
- Serifsiz (sans-serif) yazı tipleri: Modern, sade ve ekranda okunaklı. Kurumsal ve teknoloji sitelerinde yaygındır.
- Serifli yazı tipleri: Klasik, ağırbaşlı, editoryal. Hukuk, yayıncılık ve lüks markalarda başlıklar için güçlü bir seçimdir.
Türkçe karakter desteği şart
Türkçe bir site için seçilen yazı tipinin ğ, ı, İ, ş, ç, ö, ü karakterlerini eksiksiz ve uyumlu şekilde desteklemesi gerekir. Bazı yazı tiplerinde bu karakterler eksiktir; tarayıcı eksik harfi başka bir yazı tipinden getirir ve kelimelerin içinde farklı görünen harfler oluşur. Yazı tipini seçmeden önce Türkçe bir paragrafla test etmek bu sorunu baştan önler.
Boyut ve satır aralığı
- Gövde metni mobilde genellikle 16 piksel civarında ya da daha büyük olmalıdır.
- Satır aralığı, yazı boyutunun yaklaşık 1,5 katı civarında olduğunda metin rahat okunur.
- Bir satırın çok uzun olması okumayı zorlaştırır; geniş ekranlarda metin sütunu sınırlandırılmalıdır.
- Başlık hiyerarşisi (H1, H2, H3) boyut ve kalınlıkla net şekilde ayrılmalıdır.
Büyük harf kullanımına dikkat
Tüm metni büyük harfle yazmak, okumayı yavaşlatır ve bağırıyormuş hissi verebilir. Türkçede ayrıca teknik bir tuzak vardır: CSS ile otomatik büyük harfe çevrilen metinlerde "i" harfi, sayfa dili doğru tanımlanmamışsa "İ" yerine "I" olarak görünebilir. Bu küçük hata, sitenin özensiz görünmesine yol açar.
Hız ve Yazı Tipleri
Web yazı tipleri, sayfa açılırken indirilen dosyalardır. Çok sayıda yazı tipi ve kalınlık yüklemek sayfa hızını düşürür. Sadece kullanılan kalınlıkları yüklemek, modern dosya biçimlerini tercih etmek ve yazı tipi yüklenene kadar metnin görünür kalmasını sağlamak, hem hızı hem de kullanıcı deneyimini iyileştirir. Hızın satışa etkisini ayrı bir yazıda ele aldık.
Tutarlılık: Küçük Bir Tasarım Sistemi
Renk ve yazı tipleri belirlendikten sonra bunların sitenin her yerinde tutarlı kullanılması gerekir. Düğmelerin hep aynı renkte ve biçimde olması, başlıkların hep aynı ölçüde olması, ziyaretçinin siteyi daha kolay anlamasını sağlar. Profesyonel tasarım süreçlerinde bu kurallar küçük bir "tasarım sistemi" olarak tanımlanır ve yeni sayfalar eklendikçe aynı sistem kullanılır.
Sık Sorulan Sorular
Logomun renkleri web için uygun değilse ne yapmalıyım?
Bazı logo renkleri ekranda fazla parlak ya da düşük kontrastlı olabilir. Bu durumda logodaki rengin biraz koyulaştırılmış ya da açılmış tonları sitede vurgu rengi olarak kullanılabilir. Marka tanınırlığı korunurken okunabilirlik sağlanır.
Koyu tema mı, açık tema mı?
İki tema da doğru uygulandığında iyi sonuç verir. Açık temalar genellikle içerik ağırlıklı ve kurumsal sitelerde daha rahat okunur; koyu temalar ise premium, teknoloji ya da yaratıcı markalarda güçlü bir atmosfer oluşturur. Önemli olan seçilen temanın marka ve içerikle uyumlu olmasıdır.
Ücretsiz yazı tipleri ticari sitede kullanılabilir mi?
Birçok ücretsiz yazı tipi ticari kullanıma izin veren lisanslarla dağıtılır; ama her ücretsiz yazı tipi için bu geçerli değildir. Kullanmadan önce lisans koşullarını kontrol etmek gerekir.
Sonuç
Renkler ve yazı tipleri, web sitenizin kişiliğidir. Markanızdan türetilen sade bir renk paleti, iyi kontrast, Türkçeyi eksiksiz destekleyen okunaklı yazı tipleri ve tutarlı bir uygulama; sitenizin hem güzel görünmesini hem de rahat kullanılmasını sağlar. İyi bir tasarımın temel ilkelerini web tasarım nedir yazımızda da bulabilirsiniz.
Markanıza özel bir web sitesi tasarımı için web sitesi tasarımı hizmetimizi inceleyebilir ya da bizimle iletişime geçebilirsiniz.
