Responsive Tasarımda Art Direction: Ne Zaman Farklı Görsel Gerekir
Bir görselin masaüstünde mükemmel görünmesi, onu mobilde otomatik olarak kullanılabilir yapmaz. Konu salt boyut değil; sahnedeki odak noktasının küçük ekranda kaybolması, önemli ayrıntıların kırpma nedeniyle yok olması ya da yatay kompozisyonun dikey alanda hiçbir anlam taşımamasıdır. Tüm bu sorunları tek bir görsel dosyasını farklı boyutlarda göndererek çözmek mümkün değildir.
Art direction (sanat yönetimi), aynı içeriğin farklı bağlamlarda farklı görsel formlarla sunulması kararıdır. Buradaki "farklı form" kimi zaman odak noktasını ön plana taşıyan bir kırpma, kimi zaman tamamen başka bir kompozisyon, kimi zaman ise dikey yerine yatay çekim anlamına gelir. Teknik açıdan bu karar picture etiketi ve source öğeleri aracılığıyla uygulanır; tarayıcı hangi koşulun karşılandığını hesaplar ve uygun kaynağı seçer.
Karar vermek için önce şu soruyu sormak gerekir: "Bu görseli yüzde kırk daha küçük çizersek anlam kaybolur mu?" Yanıt "hayır" ise standart srcset yeterlidir. Yanıt "evet, ve nedenini açıklayabilirim" ise art direction devreye girer.
picture etiketi ile art direction kurulumu
picture etiketinin amacı tarayıcıya birden fazla kaynak seçeneği sunmak ve hangi koşulda hangisinin kullanılacağını belirtmektir. Format uyumu için kullanılan type özniteliği ile art direction için kullanılan media özniteliği farklı görevler üstlenir; ikisi aynı anda da kullanılabilir.
<picture>
<source
media="(min-width: 900px)"
srcset="kahraman-genis.webp 1200w, kahraman-genis-600.webp 600w"
sizes="(min-width: 900px) 100vw"
>
<source
media="(min-width: 600px)"
srcset="kahraman-orta.webp 800w"
sizes="100vw"
>
<img
src="kahraman-kare.webp"
alt="Stüdyo ürün çekimi, beyaz zemin"
width="400"
height="400"
loading="lazy"
>
</picture>Tarayıcı source öğelerini yukarıdan aşağıya tarar ve ilk eşleşen koşulda durur. Koşul sırası kritiktir: geniş ekran koşulunu ilk sıraya, dar ekran koşulunu alt sıraya yazmak gerekir; aksi takdirde dar ekran koşulu geniş ekranda da tetiklenebilir. img etiketi her zaman son sıraya gelir ve zorunlu alt, width, height özniteliklerini taşır.
media özniteliğinde kullanabileceğiniz koşullar CSS medya sorgularıyla birebir aynıdır. Genişlik, yükseklik, ekran yönü ve piksel yoğunluğu oranı bunlar arasında sayılabilir. En yaygın kullanım min-width ile geniş ekran koşulu belirtmek; fallback olarak img etiketinde mobil uyumlu görseli sunmaktır.
Kırpma mı, farklı sahne mi?
İki senaryo birbirinden ayrı değerlendirme ister. Birincisi: aynı fotoğrafın farklı bir bölümünü göstermek, yani merkez kırpma ya da yüz yakın planı. İkincisi: konuyu tamamen farklı bir kompozisyonla ya da ayrı bir çekimle sunmak.
Kırpma basit bir çözümdür; görsel üretim maliyeti düşüktür. Masaüstünde geniş açılı çekimde arka plan bağlamı görünür, mobil için yüz ya da ürün yakın planına odaklanılır. Farklı sahne kararı ise çok daha yüksek maliyetlidir: stüdyo zamanı, ek çekim ve içerik yönetimi gerektirir.
Yine de bazı durumlarda başka çıkar yol yoktur. Masaüstünde bir gruba odaklanan afiş, mobilde aynı kırpmayı küçülterek gösterdiğinde yüzdeki ifadeler kaybolur ve görsel duygusal etkisini yitirir. Farklı bir çekim, ön plandaki bir ya da iki yüzü büyük gösterir ve mesaj bütünlüklü kalır.
Karar ağacı şöyle kurulabilir: Kırpma sonucunda görselin iletmesi gereken bilgi veya duygu hâlâ tam mı? Evet ise kırpma yeterlidir. Hayır ise farklı bir kompozisyon gerekir.
Art direction ne zaman gereksiz ya da yanlıştır
Her görsel için art direction uygulamak hem bant genişliği hem yönetim yükü anlamında israftır. Birkaç koşulda gerekli değildir.
Yüz ya da nesne içermeyen doku ve arka plan görselleri için kırpma ve ölçekleme genellikle yeterlidir; odak noktası kaybolmaz çünkü sahnede tanımlı bir odak noktası yoktur. İkonlar ve basit illüstrasyonlar da bu kategoriye girer; bunlar için SVG tercih edilmeli, farklı kaynak üretilmemelidir.
Görselin tamamı eşit önem taşıyorsa ve küçültülmüş hali aynı anlam yükünü koruyorsa, srcset ile farklı boyut sunmak yeterlidir. Responsive boyutlama, art direction'ın bir alt kümesi değil; tamamen farklı bir araçtır. İkisini karıştırmak bütçe ve zaman kaybına yol açar.
Ayrıca akıllı kırpma hizmetleri belirli durumlarda art direction'ın yerini alabilir. Ürün görseli beyaz zeminde, merkezde ve tek nesne içeriyorsa otomatik kırpma hiçbir kayıp üretmez. Art direction kararı, otomatikleştirilemeyecek kompozisyon farkları için saklı tutulmalıdır.
Editoryal ve haber içeriklerinde kırpma kararları
Haber siteleri ve blog yazıları kahraman görsel (hero image) kullanır ve bu görseller çoğu zaman geniş yatay formattadır. 16:9 bir fotoğraf mobilde 4:3 ya da kare biçiminde gösterildiğinde kırpmanın nereye yapılacağı anlam taşır.
Bir siyasi konuşma fotoğrafı düşünün. Masaüstünde kürsü, arka plan ve kalabalık görünür. Mobilde aynı görsel küçültüldüğünde konuşmacının yüzü tanınamaz hale gelir. Otomatik merkez kırpma burada işe yaramaz çünkü merkez kürsüdür, yüz sola kaymıştır. Art direction ile mobil kaynak özneye odaklanmış, masaüstü kaynak ise geniş bağlamı koruyacak şekilde hazırlanmış olur.
Editoryal kararlar şu soruları kapsar: Görselin amacı bağlamı mı aktarmak, özneyi mi? Küçük ekranda bağlam gereksiz hale geldiğinde farklı kırpma üretmek doğru seçimdir. Öznenin zaten merkez olduğu ve yeterince büyük göründüğü durumlarda art direction yerine yalnızca srcset kullanmak yeterlidir.
E-ticaret ürün görsellerinde art direction senaryoları
Ürün görselleri art direction açısından en öngörülebilir alandır. Beyaz zeminde, merkezi kare formatta çekilen ürün görselleri ölçeklenirken sorun yaşamaz; masaüstü ve mobil için aynı görsel, yalnızca farklı boyutlarda sunulur.
Sorun yaşam tarzı (lifestyle) görsellerinde başlar. Masaüstünde bir mutfak tezgahını gösteren fotoğraf, odak ürünü, çevresindeki aksesuarları ve genel atmosferi aktarır. Aynı fotoğraf mobilde küçültüldüğünde ürün fark edilmeyecek kadar küçük kalabilir. Burada art direction, ürünü ön plana çeken yakın çekim için ayrı bir kaynak üretmeyi zorunlu kılar.
<picture>
<source
media="(min-width: 768px)"
srcset="urun-yasam-tarzi-genis.webp 1400w, urun-yasam-tarzi-700.webp 700w"
sizes="60vw"
>
<img
src="urun-yakin-plan.webp"
alt="Mat siyah termos, kapak açık, yan görünüm"
width="600"
height="600"
loading="lazy"
>
</picture>Bileşen listesi veya detay vurgusu gerektiren görsellerde de benzer durum geçerlidir. Masaüstünde tüm detaylar okunabilirken mobilde yazılı bilgi okunamaz hale gelir. Mobil kaynak yalnızca ürünü büyük gösterir; bileşen listesi ayrı bir metin bloğuna taşınır. Görsel anlam kaybı olmaz, ekstra bir çekim de gerekmez.
Ekran yönü farkı: yatay mobil senaryosu
Yatay (landscape) mobil kullanım çoğu zaman göz ardı edilir; ancak video içerik, oyun ya da ürün slaytı sunan sitelerde önemli bir bağlamdır. media özniteliğinde orientation: landscape koşulu bu durumu ele alır.
<picture>
<source
media="(orientation: landscape) and (max-width: 767px)"
srcset="kahraman-yatay-mobil.webp"
sizes="100vw"
>
<source
media="(min-width: 1024px)"
srcset="kahraman-masaustu.webp 1400w, kahraman-masaustu-700.webp 700w"
sizes="100vw"
>
<img
src="kahraman-dikey-mobil.webp"
alt="Dağ manzarası, sabah ışığı, dikey kompozisyon"
width="800"
height="1000"
loading="lazy"
>
</picture>Yatay mobilde görselin dikey versiyonu orantısız ya da kırpık görünebilir. Çoğu durumda farklı bir çekim üretmek yerine yatay kırpma hazırlamak yeterlidir. Farklı çekim yalnızca sahnenin tamamının yeniden kurgulanmasını gerektirdiği özel durumlarda harcanan zamanın karşılığını verir.
srcset ile art direction arasındaki sınır
İki kavramı karıştırmak sıkça karşılaşılan bir hatadır. srcset, aynı görselin farklı boyutlarda sunulması için kullanılır; tarayıcı ekran yoğunluğuna ve görüntü alanına göre en uygun boyutu seçer. Görsel değişmez, yalnızca çözünürlük ve dosya boyutu değişir.
Art direction ise görselin kendisinin değiştiği durumdur. Aynı içeriğin farklı kompozisyonu, farklı kırpması ya da farklı çekimidir. Karar insan tarafından verilir; tarayıcıya "şu koşulda şu görseli kullan" denilir.
Pratik sınav şudur: Görseli farklı bir boyutta çizdiğinizde hâlâ anlamlı ve işlevsel midir, yalnızca daha küçük müdür? Evet ise srcset kullanın. "Bu görsel küçüldüğünde amacını yitiriyor" diyorsanız art direction gereklidir.
İkisi bir arada da çalışır. picture etiketi içindeki her source öğesi kendi srcset listesini taşıyabilir. Masaüstü kaynağı için üç farklı boyut, mobil kaynağı için iki farklı boyut tanımlamak mümkündür; dolayısıyla iki yaklaşım birbirini dışlamaz.
Art direction kararları içerik üretim maliyetini doğrudan artırır; bu nedenle her görsel için değil, anlamsal açıdan zorunlu olan durumlar için uygulanır. Bir görselin mobilde anlam ya da işlev yitirdiği nokta, farklı kaynak üretme kararının tetikleyicisidir. Bunu ölçmek için karmaşık test senaryoları gerekmez; görseli küçülterek ya da kırparak kontrol etmek yeterlidir.
picture etiketi, bu kararları uygulamak için tam anlamıyla tasarlanmış bir araçtır. Söz dizimi ilk bakışta karmaşık görünse de mantığı basittir: koşul, kaynak, yedek. Koşul sayısı arttıkça kaynak yönetimi ağırlaşır; en fazla iki ya da üç kırılım noktası için art direction uygulamak, geri kalanlar için otomatik kırpma veya srcset kullanmak sürdürülebilir bir yaklaşımdır.
Mimarı karar şu soruya verilecek yanıttan doğar: "Mobil kullanıcı bu görselden aynı bilgiyi, aynı duyguyu alıyor mu?" Yanıt "evet" ise mevcut yaklaşım yeterlidir. Yanıt "hayır, ve bunu kanıtlayabilirim" ise art direction için harcanan çaba karşılığını verir.