Web görsel en boy oranı, fotoğrafı her sayfada yeniden kesmek değil; kart, kahraman ve galeri kutusunun sabit penceresini yazmaktır. Konu merkezi kuralı, yüzün veya ürünün bu pencerede nerede duracağını önceden kararlaştırır. Böylece kırpma, tasarımcı ile içerik ekibi arasında gizli bir pazarlık olmaktan çıkar.
Bir görsel her sayfada farklı kesilince kart başlığı kayar, kahraman alanı boşalır, galeri ızgarası titrer. Sorun çoğu zaman fotoğrafın kalitesi değil; web görsel en boy oranı için ortak bir kuralın olmamasıdır. Tasarımcı geniş bir kare kırpar, geliştirici kutuyu başka bir oranda doldurur, içerik ekibi de konuyu ortadan değil logonun durduğu köşeden yükler.
Aynı markanın sayfalarında yüzler kesilir, ürün kayar, düzen her ekranda yeniden pazarlık edilir. Bu rehber, her sayfada ayrı kırpma yerine kart, kahraman ve galeri için sabit oran ve konu merkezi kuralı yazmayı anlatır. Oranı bir stil tercihi değil, bileşenin sözleşmesi olarak ele alırsınız.
Sayfa bazlı kırpma neden düzeni bozar
Kırpma kararı sayfaya bırakılınca her ekran kendi istisnasını üretir. Ana sayfada kahraman 21:9 gibi geniş durur, blog listesinde kart 4:3 olur, ilgili yazılar şeridinde aynı fotoğraf kareye sıkışır. Kaynak dosya birdir; görünen konu üç kez değişir.
Bu kayma yalnızca estetik değildir. Kart ızgarasında bir görsel gökyüzünü, diğeri ürün etiketini, öteki de kesik bir omuzu gösterir. Bakış sırası dağılır. Metin katmanı yüzün üzerine biner. Galeride satır yüksekliği dalgalanır. Düzen, içeriğin kendisinden çok tesadüfi kesime bağlanır.
Tipik bir zincir şöyledir: tasarım dosyasında kahraman güvenli bir bantla çizilir, geliştirme sırasında kutu esnek yükseklik alır, editör de dikey bir stok fotoğraf yükler. Hiçbir adım kötü niyetli değildir; eksik olan, görsel kutusunun tüketen tarafa verdiği sözdür. Oran yazılmayınca herkes kendi kırpma penceresini icat eder.
- Aynı fotoğraf üç bileşende üç farklı konuyu öne çıkarır.
- Kart başlığı ile görselin ağırlık merkezi hizasız kalır.
- Kahraman metni, yüzü veya ürünü örter.
- Galeri satırı bir karede kısa, diğerinde uzun durur.
Web görsel en boy oranını bileşen sözleşmesine bağlamak
Web görsel en boy oranı, kaynak dosyanın piksel ölçüleri değildir. Bileşenin ekranda açtığı pencerenin genişlik-yükseklik ilişkisidir. Kaynak daha büyük olabilir; kutu, o kaynaktan hangi dilimin görüneceğini belirler. Bu yüzden oranı sayfaya değil bileşene yazarsınız: kart her geçtiği yerde aynı pencereyi kullanır.
Sözleşme fikri, bir alanın adını ve tipini önceden sabitlemeye benzer. Tüketen taraf, kutunun hangi oranı vaat ettiğini bilir; üreten taraf da ona göre çeker, seçer ve yükler. Küçük ekiplerde bu sade vaat, REST API tasarımındaki sade sözleşme ile aynı işi görür: sürpriz alan kalmaz.
Sayfa bazlı kural ise tersine çalışır. “Bu kampanya sayfasında görsel daha sinematik olsun” dendiğinde kart da, galeri de, kahraman da kendi oranını kaybeder. Ertesi hafta başka bir sayfa aynı istisnayı ister. Sistem, istisnanın üzerine kurulmuş olur.
Kart görseli 3:2, kahraman 16:9, galeri 1:1. Konu merkezi varsayılan olarak çerçevenin orta noktasıdır; yüz ve ürün bu noktadan kaydırılmaz. Sayfa, oranı değiştirmez.
Bu cümle kısa durur; asıl gücü tekrarında gizlidir. Yeni bir landing, yeni bir kategori veya yeni bir vaka sayfası açılınca tartışılacak şey “bu sefer nasıl keselim” değil, “bu blok hangi bileşen” sorusudur. KepezWeb ekipleri bu kararı sayfa bazında değil bileşen bazında alır.
Kart, kahraman ve galeri için sabit oran seti
Üç rol yeter. Daha fazlası çoğu sitede istisna üretir; daha azı kahraman ile kartı birbirine karıştırır. Oranlar birer dogma değil, ekibin yazdığı başlangıç sözleşmesidir. Önemli olan, her rolün tek pencereye sahip olmasıdır.
| Bileşen | Başlangıç oranı | Konu merkezi | Metin katmanı | Tekrar |
|---|---|---|---|---|
| Kart | 3:2 | ürün gövdesi veya yüz, orta | yok; başlık altta | ızgarada yan yana |
| Kahraman | 16:9 | konu üst-orta | var; alt bant boş bırakılır | sayfada tek |
| Galeri | 1:1 | konu tam orta | yok | eşit hücreler |
| Avatar / ikonik kare | 1:1 | yüz | yok | liste ve yorum |
Kart 3:2 seçilmesinin nedeni, hem ürünü hem kişiyi okunur bırakması ve başlığı görselin altına aldığınızda ızgaranın nefes almasıdır. 1:1 kart, metni sıkıştırır; 16:9 kart ise dar sütunda konu kaybeder. Kahraman 16:9, metin bandı için yatay pay bırakır. Çok geniş bir şerit, konu merkezini uçlara iter; kare kahraman da başlığı görselin içine zorlar.
Galeri için kare, hücre yüksekliğini sabitler. Masonry (farklı yükseklikli dizi) ayrı bir bileşendir; onu “galeri” diye kart ızgarasına karıştırmayın. İki düzeni aynı isimle çağırırsanız editör yine serbest kırpma ister.
Oranı seçerken bakılacak üç soru
- Görselin işi ne: bakışı çekmek, ürünü tanıtmak, bir diziyi taramak mı?
- Üzerinde yazı var mı? Varsa konuyu yazının durduğu bölgeden uzak tutun.
- Bileşen tekrar ediyor mu? Tekrarda oran değişirse ızgara titrer.
Bu üç sorunun cevabı aynıysa oran da aynı kalır. Cevap değişiyorsa yeni bir bileşen adı açın; mevcut kartın oranını o sayfa için bozmayın. Ana sayfa tasarımında bölüm sırası hedefe göre dizilir; kahraman görseli de o sıradaki tek geniş pencere olarak kalmalıdır.
Konu merkezi kuralı: yüz, ürün ve sahne
Sabit oran, yanlış noktadan kesilmiş bir görseli kurtarmaz. object-fit cover (kutuyu dolduracak şekilde taşırmalı yerleştirme) boşluk bırakmaz; taşıyan kenarı keser. Kesilen yer konu merkezine bağlıdır. Merkez yazılmazsa tarayıcı geometrik ortayı kullanır. Geometrik orta, yüzün veya ürünün olduğu yer olmayabilir.
Konu merkezi, kırpma penceresinin “nerenin görünmesi gerektiği” kuralıdır. Her görselde bir birincil konu seçin. İkincil öğe (dekor, manzara, logo köşesi) kesilebilir. Birincil konu kesilemez. Bu ayrım yazılmadığında herkes kendi önceliğini savunur.
- Yüz: Göz hizası çerçevenin üst yarısında kalsın. Alın ve çene, kutu değişince ilk kaybolan paylardır; onları kenara yaslamayın.
- Ürün: Gövde ve siluet ortada dursun. Etiket, ambalaj köşesi veya gölge birincil konu değildir.
- Sahne: Anlamı taşıyan nesne (makine, mekân girişi, eldeki iş) merkezde olsun. Gökyüzü ve zemin kesilebilir paydır.
Kahramanda metin çoğu zaman alt bantta durur. Konuyu üst-ortaya alın; aksi halde başlık yüzü örter. Kartta başlık zaten altta olduğu için geometrik orta işe yarar. Galeride insanlar varsa göz hizasını satır boyunca yakın tutun; bir kare tavanı, diğeri ayakkabıyı gösterince dizi okunmaz.
Kuralı CMS’e de yazın. Editöre “güzel bir kare seç” demek yetmez. Odak alanı isteyin: yatay ve dikey odak, yüzde olarak. Geliştirici bunu object-position değerine çevirir. Odak yoksa varsayılan orta noktadır; istisna, gerekçesiyle kayda geçer.
Sözleşmeyi tasarım sistemi ve CMS’e yazmak
Sözleşme üç yerde aynı cümleyi kurmalıdır: arayüz kiti, stil katmanı ve içerik formu. Biri boş kalırsa kırpma yine sayfaya kaçar.
Arayüz kitinde kart, kahraman ve galeri çerçevelerini kilitli oranda çizin. Serbest yükseklik vermeyin. Yer tutucu görsel, konu merkezini bir artı işaretiyle göstersin. Tasarımcı yeni bir sayfa üretirken bu çerçeveyi kopyalar; oranı sayfada “daha havalı” diye değiştirmez.
Stil katmanında oranı bir token gibi adlandırın: kart, kahraman, galeri. Kutuya aspect-ratio verin, görsele object-fit cover uygulayın, konumu CMS’ten gelen odakla bağlayın. Yükseklik, içeriğin kutusunu itelemesin; kutu oranı saklasın. Böylece görsel geç yüklenince düzenin zıplaması da azalır.
İçerik formunda serbest oran seçici sunmayın. Alanlar sade kalsın: görsel, odak noktası, alternatif metin. “Bu sayfada 21:9 kullan” kutusu açmak, sözleşmeyi ilk günde bozar. Kaynak dosya, en geniş kırılımda kutuyu dolduracak kadar büyük olsun; küçük görseli büyüterek boşluğu kapatmayın.
- Sitedeki görsel kullanımlarını kart, kahraman, galeri ve diğer diye envanterleyin.
- Her role tek oran ve tek konu merkezi varsayılanı yazın.
- Aynı cümleyi Figma bileşenine, stil token’ına ve CMS alanına geçirin.
- Mevcut görselleri tarayın: konu kesiliyorsa kaynağı değiştirin, oranı değil.
- Üç genişlikte kontrol edin: dar telefon, tablet, masaüstü. Overlay metin ve ızgara hizası bozulmamalıdır.
Eski arşivdir, istisna değildir. Dikey çekilmiş bir etkinlik fotoğrafı kahraman olamaz diye zorlanmaz; kart veya galeriye iner, kahramana yatay ve konulu bir kare seçilir. Rol değişir, sözleşme değişmez.
Kırpma, hiyerarşi ve erişilebilirlik birlikte
Sabit oran, bakış sırasını da sakinleştirir. Kart ızgarasında eşit pencereler, ölçü ve konumun öngörülebilir olmasını sağlar. Hangi öğenin önce duracağı o zaman boşluk ve tipografiyle kurulur; rastgele kesilmiş bir yüz, ölçü sistemini bozar. Bu bağ, görsel hiyerarşide ölçü ve konum kararlarıyla aynı dilde konuşur.
Kırpma, anlamı da değiştirir. Yüzün kaybolduğu bir kare, alternatif metinde hâlâ “ekip portresi” diye anlatılıyorsa içerik ile görünür yüzey ayrılır. Erişilebilir web tasarımı yalnızca klavye dolaşması değildir; görselin gerçekten gösterdiği konu ile metin alternatifinin aynı cümleyi kurmasıdır. Konu merkezi kuralı, bu cümlenin görsel tarafını tutar.
Kahraman görseli dekoratifse ve yanındaki başlık işi anlatıyorsa alternatif metin kısa tutulabilir. Kart ve galeri çoğu zaman bilgi taşır; orada konu görünür değilse ya odak kaymıştır ya da yanlış rol seçilmiştir. Düzeltme, oranı o sayfada bozmak değil, doğru bileşene doğru kareyi vermektir.
Yayına almadan önce kısa kontrol listesi
Listeyi bir kişilik bir denetim gibi kullanın. Hepsi evet değilse sözleşme henüz işlemiyordur.
- Kart, kahraman ve galeri için tek tek oran yazılı mı?
- Sayfa bazlı oran istisnası var mı? Varsa ayrı bileşen adı almış mı?
- Konu merkezi varsayılanı ve CMS odak alanı tanımlı mı?
- Metin katmanı, yüzü veya ürünü örtüyor mu?
- Aynı kart ana sayfada ve listede aynı pencereyi mi kullanıyor?
- Galeri hücreleri eşit mi, yoksa masonry başka bir adla mı duruyor?
- Dar ekranda kahraman konusu hâlâ okunuyor mu?
- Alternatif metin, kırpılmış karede görünen konuyu mu anlatıyor?
KepezWeb için tutarlı bir arayüz, görselin her kartta aynı pencereyi kullanmasıyla başlar. Oran ve odak yazıldığında kırpma tartışması tasarım toplantısından çıkar, içerik kalitesine döner: doğru konu seçilmiş mi, kaynak yeterince geniş mi, metin katmanı güvenli bantta mı?
Sıkça Sorulan Sorular
Web görsel en boy oranı her bileşende aynı mı olmalı?
Hayır. Kart, kahraman ve galeri farklı işler yapar; her birinin kendi sabit oranı olur. Aynı olması gereken şey, bir bileşenin geçtiği her sayfada aynı pencereyi kullanmasıdır. Sayfa, oranı değiştirmez.
Kutu doldurulunca yüz kesilirse ne yapılır?
Oranı o sayfada bozmayın. Konu merkezini yüze kaydırın; yetmezse kaynağı değiştirin. Cover yerleştirme boşluk bırakmaz, keser. Kesilmemesi gereken nokta odak alanıdır, istisnai bir en boy oranı değil.
Mobilde kahraman görseli başka orana geçmeli mi?
Varsayılan cevap hayırdır. Oran değişince konu merkezi ve metin bandı yeniden pazarlık edilir. Dar ekranda metni görselin dışına almak, kahraman kutusunu kısaltmak veya konuyu üst-ortada tutmak çoğu zaman yeter. Gerçekten ayrı bir mobil kahraman gerekiyorsa bunu yeni bir bileşen olarak adlandırın.
Eski fotoğraflar yeni sözleşmeye nasıl uyarlanır?
Önce rolü seçin, sonra kaynağı o role göre değerlendirin. Dikey kare kahraman olmazsa karta veya galeriye iner. Odak noktası kaydedilir. Uymayan görsel zorlanmaz; yerine o pencereye uygun bir kare konur. Arşivi “her yere sığdırma” hedefi, sözleşmeyi sessizce çözer.
Galeride farklı oranlar karışırsa ne olur?
Hücre yüksekliği dalgalanır, satır hizası bozulur, bakış bir düzene bağlanamaz. Farklı oran istiyorsanız bu bir galeri ızgarası değil, ayrı bir dizi bileşenidir. İki düzeni aynı formda toplamayın.
Sonuç ve Sonraki Adım
Görsel oranını ve kırpma kuralını kart, kahraman ve galeri sözleşmesine bağlamak istiyorsanız web tasarım işini bu kural setiyle planlayabiliriz. İhtiyacınızı kısaca yazın; KepezWeb teklif al sayfasından ekibe iletin, sabit pencere ve konu merkezi kuralını birlikte yazalım.
