Web siteniz için doğru görselleri nasıl seçersiniz?

Önce görselin görevini belirleyin

Fotoğraf seçmeden önce kendinize şunu sorun: “Ziyaretçi sayfanın bu bölümünde neyi anlamalı veya nasıl hissetmeli?”

Ana sayfa görseli işletmenizi tanıtabilir. Hizmet görseli yaptığınız işi veya sonucunu gösterebilir. Ekip fotoğrafı, müşterilerin karşılaşacakları kişileri tanımasını sağlar. Bu amaca hizmet eden bir görsel seçin.

Aramaya başlamadan önce ihtiyacınızı tek cümleyle yazın: “Bu görsel, yenilediğimiz küçük bir banyoyu göstermeli ve solda başlık için yer bırakmalı.” Net bir tanım, güzel olsa da sayfaya uymayan fotoğrafları elemenizi kolaylaştırır.

Seçenekleri üç soruyla karşılaştırın: Görsel ziyaretçiye ne anlatıyor? Bu bilgi burada yararlı mı? Ayrılan alanda da aynı mesajı veriyor mu? Yararlı bir bilgi veya uygun bir atmosfer katmıyorsa, bölümde yalnızca metin kullanmak daha uygun olabilir.

İşletmenize uygun bir ana görsel seçin

Sayfanın başındaki büyük tanıtım alanı, yani hero bölümü, birçok ziyaretçinin ilk gördüğü yerdir. Görsel başlığı desteklemeli, onunla yarışmamalıdır.

Bir tadilat firması tamamlanmış bir odayı veya çalışan bir ustayı gösterebilir. Fizyoterapi kliniği, bir görüşme ya da egzersiz sırasında çekilmiş doğal bir fotoğraf kullanabilir. Yerel bir kafe, mekânını veya tanınabilir bir yemeğini sergileyebilir.

Başlık ve düğmeler için yeterince sade alan bırakın. Görselin çarpıcılığı, sunulan hizmetin anlaşılmasını engelliyorsa daha basit bir görsel seçin.

Fotoğrafı gerçek sayfa düzeni içinde değerlendirin. Tek başına güzel görünen bir fotoğrafın arka planı, başlığın geleceği yerde çok hareketli olabilir. Başlık ve düğmeyi görselin içine yerleştirmek yerine sayfa metni olarak kullanın; böylece düzene uyum sağlayabilirler.

Örnek: aynı ana sayfa için üç görseli karşılaştırın

Ana sayfa başlığı “Küçük evler için banyo tadilatı” olan bir firma düşünün. Üç fotoğraf arasından seçim yapıyor:

• Büyük ve lüks bir banyoya ait özenli bir stok fotoğraf. Işık güzel, ancak oda firmanın göstermek istediği küçük alanları temsil etmiyor. Yapılan iş hakkında yanlış beklenti oluşturabilir.
• Firmanın tamamladığı bir banyonun fotoğrafı; fakat kadraj dar ve ortalık dağınık. Konu uygun olsa da yerleşimi anlamak zor. Başka bir kadrajı veya aynı projeden başka bir fotoğrafı deneyin.
• Tamamlanmış küçük bir banyonun net fotoğrafı. Depolama alanı, duş ve kullanılabilir alan kolayca görülüyor. Başlığa da yer bırakıyorsa bu sayfa için en uygun seçenek budur.

Üçüncü fotoğraf telefona göre kırpıldığında duş kayboluyorsa farklı bir mobil kırpma hazırlayın veya metni yanına taşıyın. Kararı konu, mesaj ve son sayfa düzeni birlikte belirler.

Hizmeti veya sonucunu gösterin

Hizmet görselleri, yapılan işi ziyaretçinin gözünde canlandırabildiğinde en faydalıdır. Bir tesisatçı tamamlanmış bir kurulumu veya müşterinin evindeki teknisyeni gösterebilir. Bir fotoğrafçı kendi işinden gerçek bir örnek sunabilir. Bunlar, dizüstü bilgisayarda çalışan birinin genel fotoğrafından daha fazla bilgi verir.

Müşterinin sorabileceği bir soruya yanıt veren görseli seçin. Bitmiş oda sonucu, yakın çekim bir bağlantıyı veya işçiliğin ayrıntısını, çalışan birinin fotoğrafı ise sürecin bir bölümünü gösterir. Bölümün neyi açıklamayı amaçladığına göre karar verin.

Proje görseline işi ve dikkat edilmesi gereken ayrıntıyı anlatan kısa bir açıklama ekleyin. “Eğimli tavan altında özel depolama çözümü”, “Bir mutlu müşteri daha” ifadesinden daha çok şey anlatır. Yalnızca projenin gerçekten gösterdiği şeyleri tarif edin; kalite ve sonuçlarla ilgili ifadeleri somut tutun.

Gerçek ekibinizin doğal fotoğraflarını kullanın

Ekip fotoğrafı, müşterilerin gerçekten tanışacağı kişileri gösterdiğinde küçük bir işletmeyi daha ulaşılabilir kılabilir. Tanıdık bir iş ortamı, doğal ifadeler ve rahat pozlar genellikle fazla kurgulanmış bir grup fotoğrafından daha inandırıcıdır.

Bireysel portrelerde kadraj ve arka planları benzer tutun. Güncel fotoğraflar kullanın ve müşterilerin bekleyebileceği hizmeti yansıttıklarından emin olun.

Portrenin yanındaki ad ve görev bilgisi, ziyaretçinin sorularını yanıtlayacak veya randevusuyla ilgilenecek kişiyi tanımasını sağlar. Basit ve iyi aydınlatılmış bir portre yeterli olabilir; ayrıntılı bir çekim şart değildir. Fotoğraftaki kişilerden yayımlamadan önce izin isteyin; arka planda müşterilerin veya özel bilgilerin istemeden görünmesini önleyin.

Blog görsellerini yazının konusuna göre seçin

Blog görseli yalnızca yer doldurmamalı, konuyu tanınabilir kılmalıdır. Boya rengi seçimiyle ilgili bir yazıda, rengi açıkça gösteren bir oda fotoğrafı, fırça tutan birinin genel fotoğrafından daha uygun olabilir.

Basit bir şema, gerçek bir örnek veya kendi işinizin fotoğrafı, konuya bir stok fotoğraftan daha uygun olabilir. Görsel türünü açıklamaya göre seçin: karşılaştırma yazısı yan yana iki örnek, öğretici yazı ise tam o adımın ekran görüntüsünü gerektirebilir. Dekoratif kapak konuyu tanıtabilir ama talimatları anlamak için gereken örneklerin yerini tutmaz.

Kırpmayı bilgisayarda ve telefonda kontrol edin

Geniş bir görsel telefonda çok farklı görünebilir. Tarayıcı yanları kırpabilir; kenara yakın bir kişi, ürün veya önemli ayrıntı kaybolabilir.

Görseli sayfada gösterileceği boyutta önizleyin. Ana konunun her iki ekranda da görünür kaldığından emin olun. Metin görselin üzerindeyse arkasında sade bir alan bırakın. Uygun alan yoksa metni görselin yanına koyun.

1. Görseli kullanılacağı sayfa bölümüne yerleştirin. Fotoğrafı tek başına değerlendirmek yerine son başlığı, düğmeyi ve çevresindeki metni de ekleyin.
2. Sayfa düzenini geniş ve dar ekran görünümlerinde kontrol edin. Kesilen yüzlere, eksik ürün ayrıntılarına ve karmaşık alanların üzerindeki metne dikkat edin.
3. Kırpmayı veya konunun konumunu ayarlayın. Düzenleyicinizde odak noktası ayarı varsa önemli ayrıntıya taşıyın ve yeniden önizleyin.
4. Sayfayı telefonda kontrol edin. Görselin anlamı ve gerekli etiketler gerçek gösterim boyutunda anlaşılır kalmalıdır.

Tek bir kırpma her iki boyutta konuyu net tutamıyorsa site, farklı ekranlar için farklı kırpmalara ihtiyaç duyabilir. MDN’nin duyarlı görseller rehberi, art direction adı verilen bu yaklaşımı sayfayı hazırlayan kişi için açıklar.

Stok fotoğrafları dikkatle seçin

Uygun bir fotoğrafınız yoksa stok fotoğraflar yararlı olabilir. Seçmeden önce şunları sorun:

• Bu işletme veya hizmetle açıkça bağlantılı mı?
• Doğal ve inandırıcı görünüyor mu?
• Aynı fotoğraf neredeyse herhangi bir rakibin sitesinde bulunabilir mi?

Görsel fazla genel geliyorsa daha özel bir seçenek arayın veya işinizin, ürünlerinizin, mekânınızın ya da ekibinizin gerçek fotoğrafını kullanın. Kendi fotoğraflarınız ziyaretçiye ne bekleyeceğini gösterebilir.

Stok görsel genel bir konuyu anlatabilir veya atmosfer oluşturabilir. Gerçek ekibinizi, mekânınızı ya da tamamlanmış işinizi göstermesi gereken yerde daha az uygundur. Onu gerçekleştirdiğiniz bir projenin kanıtı gibi sunmayın. Yine de uygun bir stok fotoğraf, kendi çektiğiniz ancak fazla karanlık, dikkat dağıtıcı veya anlaşılması güç olduğu için işlevini yerine getiremeyen bir fotoğraftan daha iyi olabilir.

Sitede tutarlı bir görsel dil oluşturun

Farklı kaynaklardan gelen görseller birbiriyle uyumlu olabilir. Doğal ışık, benzer renk paleti veya tutarlı fotoğraf tarzı gibi ortak bir özellik arayın.

Her fotoğrafa aynı işlemi uygulamanız gerekmez. Her görselin kendi bölümüne uyduğu, bir bütün olarak tutarlı görünen bir sayfa hedefleyin.

İki veya üç basit ilkeyle başlayın: ekip portrelerinde benzer kadrajlar, blog kapaklarında tutarlı kırpmalar ve proje fotoğraflarında doğal ışık. Görselleri sayfada birlikte değerlendirin. Tüm koleksiyona yoğun bir filtre uygulamadan önce uyumsuz duran görseli değiştirin.

Yayımlamadan önce kontrol listesi

• Görselin bölüme ne kattığını açıklayabiliyorsunuz.
• İşletmeyi, konuyu veya gösterdiği örneği doğru temsil ediyor.
• Ana konu gerçek masaüstü ve mobil düzenlerde görünür kalıyor.
• Metin ve düğmeler okunabiliyor; temel bilgi sayfa metninde de yer alıyor.
• Işık, kadraj veya renk çevresindeki görsellerle uyumlu.
• Kullanım iznini ve kaynağın istediği olası atıfları kontrol ettiniz.

Seçtiğiniz görselleri siteye hazırlayın

Seçimden sonra rehberlerimizle uygun görsel boyutlarını belirleyin, görseli bozmadan yeniden boyutlandırın ve yararlı alternatif metinler ve dosya adları yazın.

Görseli göremeyen birinin bilgiye nasıl ulaşacağını da düşünün. Anlam taşıyan görseller uygun bir metin alternatifi gerektirir; yalnızca dekoratif olanlarda alternatif metin genellikle boş bırakılır. W3C’nin görsel rehberi, görselin amacının bu seçimi nasıl etkilediğini açıklar.