Web sitesinin ilk ekranında büyük bir fotoğraf, üzerinde başlık ve bir düğme. Bu düzen o kadar yaygın ki fotoğrafın kendisi çoğu zaman sıradan kalıyor. Duotone bu noktada işe yarıyor: fotoğrafı marka renklerine boyuyor, başlık okunurluğunu artırıyor ve farklı sayfalardaki görselleri tek bir aileye bağlıyor.
Ama web’de duotone yalnızca bir tasarım kararı değil, teknik bir karar da. Efekti fotoğrafın içine mi gömeceksiniz, yoksa tarayıcıda mı uygulayacaksınız? Hız, erişilebilirlik ve bakım kolaylığı bu seçime bağlı.
Yöntem 1: Efekti dosyaya gömmek
En basit yol, fotoğrafı tasarım programında duotone yapıp hazır dosyayı siteye koymak. Avantajı, her tarayıcıda aynı görünmesi ve teknik bir risk taşımaması. Dezavantajı ise esneklik: renk çiftini değiştirmek istediğinizde dosyayı yeniden üretmeniz gerekiyor. Beş görselli bir sitede bu sorun değil; elli görselli bir sitede can sıkıcı.
Bu yöntemi, renk çifti kesinleşmiş ve az sayıda görsel kullanılan sitelerde öneririz. Dosyayı WebP ya da AVIF gibi modern biçimlerde dışa aktarın; iki renkli görseller genellikle sıkıştırmaya çok iyi tepki verir, çünkü renk çeşitliliği az.
Yöntem 2: CSS ile renklendirme
Fotoğraf siyah-beyaz olarak yüklenir, CSS ile üstüne renk katmanı eklenir. Karışım modları (blend mode) sayesinde siyah-beyaz görselin üstüne bir renk bindirildiğinde duotone benzeri bir görüntü elde edilir. Bunun güzel yanı, aynı siyah-beyaz dosyanın farklı sayfalarda farklı renklerle kullanılabilmesi. Kampanya sayfası mora, blog turuncuya boyanabiliyor ve dosya sayısı artmıyor.
Zayıf yanı, tarayıcılar arası ufak farklar olabilmesi ve karışım modlarının bazı durumlarda beklenmedik parlaklık değişimi yaratması. Kesin renk sadakati gerekiyorsa bu yöntemi test etmek gerekiyor; marka renginin birebir tutması bir zorunluluksa dosyaya gömme daha güvenli.
Yöntem 3: SVG filtresi
SVG filtreleri, fotoğrafın renk kanallarını iki renk arasında eşleyerek gerçek bir duotone üretiyor. Kod tarafında biraz uzmanlık ister ama sonuç yüksek kaliteli ve renk değiştirmek tek satırlık iş. Filtre tanımı bir kez sayfaya konuyor, sonra istenen tüm görsellere sınıf olarak uygulanıyor.
Bu yöntem, markanın renk teması sık değişen ya da açık/koyu mod desteği olan sitelerde işe yarıyor: koyu temada farklı, açık temada farklı bir renk çifti otomatik geçiş yapabiliyor. Bir web geliştiricisi bu kurulumu bir defa yapıp bırakabilir. SVG’nin logo tarafındaki gücünü SVG formatı üzerine yazdığımız içerikte ayrıca anlattık.
Hız: fotoğraf ağırlığı nasıl etkilenir?
Ana sayfanın en büyük öğesi genellikle kapak fotoğrafı ve sayfanın yüklenme hissini o belirliyor. Duotone’un burada iki etkisi var. Dosyaya gömülü duotone görseller renk çeşitliliği az olduğu için küçük dosya boyutuna inebiliyor. Filtreyle uygulanan yöntemde ise fotoğraf normal boyutta iniyor ve tarayıcı işi yapıyor; çok büyük görsellerde bu, düşük güçlü telefonlarda hafif bir gecikme yaratabilir.
Hangi yöntemi seçerseniz seçin, kapak görselini sayfada öncelikli yükleyin, doğru boyutta sunun ve sayfa yüklenirken yer tutucu bırakın ki içerik kaymasın. Hız konusuna daha genel bakmak için web tasarım hizmetimizde bu ayrıntılara nasıl yaklaştığımızı görebilirsiniz.
Yazı okunurluğu: asıl sınav
Duotone’un en büyük sözü, üstüne yazı koymayı kolaylaştırması. Ama söz kendiliğinden gerçekleşmez. Başlığın yerleştiği alan, fotoğrafın en koyu ya da en açık bölgesine denk gelmeli. Portre fotoğrafında yüzün üstüne yazı gelirse okunurluk düşer; boş gökyüzü ya da düz duvar alanına yazı koymak daha güvenli.
Kontrast oranını ölçün. Başlık rengi ile arka plan arasında yeterli fark yoksa, yalnızca güzel görünmesi yetmiyor; görme zorluğu olan ziyaretçiler için erişilemez oluyor. Gerekirse fotoğrafın üzerine yarı saydam koyu bir katman ekleyin. Erişilebilirlik konusunu dijital kimlikte renk kontrastı yazımızda ayrıca ele aldık.
Mobilde kırpma tuzağı
Masaüstünde yatay olan geniş fotoğraf, telefonda dikey bir çerçeveye kırpılıyor. Bu, duotone görselde konunun kaybolmasına yol açabilir; yüz kırpılır, ürün kadraj dışında kalır. Odak noktasını belirleyin: hangi bölgenin her ekran boyutunda görünmesi gerektiğini tanımlayın. Gerekirse mobil için ayrı bir kırpım hazırlayın.
Telefonda ayrıca duotone’un renk yoğunluğu farklı algılanıyor; ekran parlaklığı ve açık hava koşulları koyu tonları daha da koyulaştırıyor. Kendi telefonunuzda, dışarıda ve iç mekânda kontrol etmek iyi bir alışkanlık.
Örnek senaryo: bir hukuk bürosunun ana sayfası
Bir hukuk bürosunun ana sayfası düşünün. Kurumsal, ciddi bir ton istiyorlar ama stok fotoğraf hissini de istemiyorlar. Kapak alanında, büronun kendi ofisinde çekilmiş bir toplantı masası fotoğrafı var; ışık iyi değil, ortam sıradan. Duotone burada bir kurtarıcı: koyu lacivert ve açık gri-mavi bir çiftle görsel sadeleşiyor, ofisin dağınık ayrıntıları geri planda kalıyor ve başlık net okunuyor. Sitede sonraki bölümlerde aynı çift, ekip fotoğraflarında da kullanılınca sayfa bütünlük kazanıyor.
Burada dikkat edilmesi gereken bir nokta, hukuk gibi güven odaklı alanlarda ekip portrelerinin doğal renkte de bulunmasıdır. İnsanlar avukatı gerçek yüzüyle görmek ister. Duotone’u atmosfer için, portreleri ise ayrıntı sayfasında doğal renkle göstermek dengeli bir çözüm.
Erişilebilirlik ve hareket azaltma
Duotone kapaklara animasyon eklemek (yavaş zoom, paralaks) cazip. Ama hareket bazı ziyaretçilerde rahatsızlık yaratabiliyor; işletim sistemi düzeyinde “hareketi azalt” ayarı açık olan kullanıcılar için animasyonu kapatan bir kural eklemek iyi bir uygulama. Görselin alternatif metnini de unutmayın: fotoğrafın ne gösterdiğini kısaca yazın; bu hem erişilebilirlik hem de görsel arama için faydalı.
Bir sayfada kaç duotone yeter?
Tüm görselleri duotone yapmak sıkıcı olabilir; hiç kontrast bırakmamak, dikkat çekecek bir öğe kalmaması demek. Kural olarak kapak görseli ve bölüm ayırıcıları duotone olsun, içerik içindeki asıl fotoğraflar (ürün, ekip, mekân) doğal renkte kalsın. Böylece marka atmosferi kuruluyor ama gerçeklik korunuyor.
Bir de tutarlılık: sayfa boyunca yalnızca bir renk çifti ya da en fazla iki tane kullanın. Aynı ana sayfada yeşil-krem, mor-pembe ve mavi-turuncu duotone’lar görmek, ziyaretçiye markanın kendinden emin olmadığı hissini verir.
Arama motorları ne der?
Duotone bir görselin arama motorlarındaki durumunu doğrudan etkilemez. Ama sayfanın yüklenme hızı ve içeriğin anlaşılırlığı dolaylı olarak etkiler. Görsel dosyasına anlamlı bir ad verin (örneğin “ofis-toplanti-masasi.webp”), alternatif metin yazın ve mümkün olan yerde görselin metinle desteklendiğinden emin olun. Kapak görselinin içine gömülü metin (afiş gibi) kullanmak, hem erişilebilirlik hem de arama açısından zayıf; başlığı gerçek metin olarak sayfaya yazın. Sayfa hızını etkileyen görsel boyutları konusunda SEO çalışmalarımızda bu ayrıntılara da bakıyoruz.
Denemeden önce kontrol listesi
- Renk çifti marka paletinden mi çıkıyor?
- Başlık, fotoğrafın en sade alanına oturuyor mu?
- Telefon ekranında konu kırpılmıyor mu?
- Görsel dosyası hız için optimize edilmiş mi?
- Erişilebilirlik için kontrast ölçüldü mü?
Bu beş soruya evet diyebiliyorsanız, duotone kapak alanı hem güzel hem sağlam olur. Sitenizin ilk ekranını yeniden düşünüyorsanız, iletişim sayfamızdan bize yazabilir ya da 0540 022 64 22 numarasından WhatsApp’la mevcut sayfanızı gösterebilirsiniz; hangi yöntemin size uyacağını birlikte belirleyelim.