Mobilde görselin önemli kısmı kesiliyorsa: doğru kadraj nasıl seçilir?

Görselin koruması gereken bilgiyi tanımlayın

Bir mobilya detayında birleşim noktası, bir mağaza fotoğrafında giriş, bir portrede yüz önemli olabilir. Tasarıma başlamadan önce fotoğraf üzerinde vazgeçilmez alanı işaretleyin. Görsel yalnızca atmosfer veriyorsa daha serbest kırpılabilir; ürünün biçimini anlatıyorsa kesilen bölüm müşteri için temel bilgi olabilir.

Tek bir odak noktası her zaman yeterli değildir. İki kişinin bulunduğu bir fotoğraf veya parça ilişkisini gösteren çizim, farklı ekran oranında bütün olarak korunmak isteyebilir. Böyle bir durumda görselin etrafında boşluk bırakmak, anlamı kaybettiren tam dolu bir kutudan daha uygun olabilir.

Üç kadrajı gerçek metinle değerlendirin

İlk inceleme için geniş kapak, kare kart ve dar telefon alanı hazırlayın. Bu üçü tüm cihazların listesi değil, sorunları erken görmek için örneklerdir. Başlığı ve düğmeyi gerçek uzunluklarıyla yerleştirin. Metin bir fotoğrafın üstündeyse yalnızca ilk satır değil bütün başlık okunmalı.

Türkçe ve İngilizce metin farklı uzunluklarda olabilir. Kadraj onayı verirken iki dili de görün. Fotoğrafın içindeki metni kırparak kaybetmek yerine mümkün olduğunda başlığı HTML metni olarak görselin dışında veya kontrollü bir katmanda sunun. Böylece başlığı değiştirmek için görsel dosyasını yeniden üretmek gerekmez.

Aynı görüntünün boyutu ile farklı görüntüyü ayırın

Aynı kompozisyonun farklı çözünürlükleri ile gerçekten farklı kadrajlar iki ayrı ihtiyaçtır. web.dev, aynı görüntünün uygun boyutunu seçmek için srcset yaklaşımını; farklı kompozisyon veya oran gerektiğinde picture içindeki kaynakları anlatır. Hangi seçeneğin kullanılacağı içerikteki değişime bağlıdır.

Bu ayrımı teslim listesine yazın: “aynı fotoğraf, küçük dosya” ile “mobil için farklı kadraj” aynı dosya görevi değildir. Teknik ekip genişlik ve yükseklik bilgisini de doğru vermeli. Daha fazla dosya üretmeden önce mevcut kadrajın odak ayarıyla çözülüp çözülmediğini kontrol edin.

Kadraj teslim notunu inceleyin

Alternatif metni kadrajla birlikte gözden geçirin

Kırpılan sürüm artık farklı bir ayrıntı gösteriyorsa açıklamanın hâlâ doğru olup olmadığını okuyun. Aynı picture öğesindeki kaynaklar ortak alternatif metni kullanır; seçilen açıklama bütün sürümlere uymalı. Birinde görünmeyen bir ayrıntıyı bütün ekranlar için varmış gibi anlatmayın.

Bir fotoğrafın farklı kırpımlarını aynı içeriğin sunumu olarak düşünün. Mobil için bambaşka bir ürün koyuyorsanız artık yalnızca kadraj düzenlemesi yapmıyorsunuz. Başlık, açıklama, ürün bağlantısı ve görselin aynı şeyi anlattığını yeniden kontrol edin.

Teslimi dosya değil kullanım listesiyle yapın

Her görsel için kaynak dosyayı, kullanım hakkını, sayfadaki yerini, korunacak alanı ve varsa mobil sürümü kaydedin. İçerik yöneticisi yeni fotoğraf yüklediğinde aynı kuralları uygulayabilsin. Yayın sonrası telefonda ürünün bütünlüğünü, metinle çakışmayı ve yatay taşmayı kontrol edin.

Görsel hızını ayrıca performans rehberiyle, çoklu görsel düzenini galeri rehberiyle değerlendirin. Proje arşivindeki sunumlar farklı kullanım alanlarını tartışmak için yararlıdır. Web tasarım iş planında kadraj onayı ile dosya optimizasyonunu ayrı kontrol maddeleri yapın; biri geçince diğerinin de doğru olduğunu varsaymayın.