Doğru alanı seçmek: boyut, konum ve en boy oranı

Tuvalde 2.400 pixellik bir bütçen var. Bunu 60 × 40 pixellik tek bir alana da verebilirsin, 240 × 10'luk ince uzun bir şeride de. İkisi de aynı sayıda pixel, aynı fiyat — ama sonuçları aynı değil.

Kiralama ekranında verdiğin şey tek bir karar değil, birbirine bağlı dört karar: kaç pixel, hangi oranda, tuvalin neresinde, kaç hafta. Sırayla.

Boyut: okunabilirlik eşiği

Pixel sanatında yazı için pratik bir alt sınır vardır: harf yüksekliği en az 5–7 pixel. Bunun altında yazı okunmaz, lekeye dönüşür.

Bu sayı keyfi değil, geometriden çıkıyor. Bir harfin okunması için gövdesinin ve içindeki boşluğun ayrı ayrı görünmesi gerekir. Dikeyde en az üç şerit lazım: üst çizgi, iç boşluk, alt çizgi. Hepsi 1'er pixel olsa 3 eder. "B"yi "8"den ayıran ikinci iç boşluk dördüncü şeridi, harfin oturduğu taban da beşinciyi getirir. Yani 5 pixel, yalnızca büyük harflerle ve kusursuz bir kesimle çalışan teorik tabandır; "b" ile "d", "o" ile "e" ancak 7 pixelde gerçekten ayrışır.

Buna göre kaba bir rehber:

• 10 × 10 (100 pixel) — tek bir sembol, logo işareti veya renkli bir nokta. Nefes payı düşünce yatayda üç dar harf ancak sığar. Yazı koymaya çalışma.
• 30 × 20 (600 pixel) — kısa bir kelime ya da sadeleştirilmiş bir logo. İkisi birlikte sınırda.
• 60 × 40 (2.400 pixel) — logo ve bir kelimelik mesaj rahat sığar: üstte 60 × 26'lık bir işaret, altta 60 × 12'lik bir yazı şeridi, 8 pixellik harfler.
• 100 × 60 (6.000 pixel) — logo, kısa slogan ve bir renk vurgusu. Burada 10 pixellik harf bile mümkün.

Kararsızsan: yazıyı at, işareti büyüt. Küçük alanda tanınan bir sembol, okunmayan bir isimden çok daha iyi çalışır.

Bunun sayıyla görünüşü şöyle. 30 × 20'lik bir alanı dikey bölersin: üstte 30 × 12 işaret, altta 30 × 6 yazı. 6 pixellik harf zaten sınırda ve yatayda 30 pixele, harf başına 4 + 1 pixel aralıkla en fazla altı harf giriyor. Marka adın altı harfliyse tamam. On bir harfliyse harf başına 1,8 pixel düşer ve elinde yazı değil, gri bir şerit kalır. Aynı alanda yazıyı tamamen silersen işaret, kenarlarda 2'şer pixel boşlukla 26 × 16'ya çıkar — yüksekliği 12'den 16'ya, yani üçte bir büyür ve alan tek bir nesne olarak okunur. Bir kelime uğruna feda ettiğin şey bu.

En boy oranı: boşluk ya da esneme olmasın diye

Görselin, kiraladığın alanın tam pixel karşılığında olmalı. 6 × 4 blok aldıysan görsel 60 × 40 pixel olmalı.

Aritmetiği tek satır: blok sayısı × 10 = gereken pixel. 3 × 3 blok 30 × 30, 12 × 9 blok 120 × 90. Yüklediğin dosya ne olursa olsun sunucu tarafında tam bu ölçüye yeniden kodlanıyor, o yüzden ölçüyü sen tutturmazsan sistem tutturur. Görselin kırpılmaz; oranı farklıysa yüklerken nasıl yerleşeceğini seçersin:

• Sığdır: görselin tamamı görünür, oranı bozulmaz, ama alanın bir kısmı boş kalır. 600 × 600'lük kare bir logoyu 60 × 40'lık bir alana sığdırırsan logo 40 × 40 olur ve iki yanında 10'ar pixel boşluk kalır — kiraladığın alanın üçte biri boş durur.
• Uzat: görsel alanın tamamını doldurur ama esner. Aynı kare logo 60 × 40'a uzatılınca yatayda yayılır; yuvarlak bir amblem yumurtaya döner. 1920 × 1080'lik geniş bir görseli 30 × 30'a uzatırsan her şey yarı genişliğine sıkışır.

Kontrolü yüklemeden önce yap, sonra değil: tasarıma başlarken tuvali doğrudan hedef ölçüde aç. Daha büyük çalışmak istiyorsan tam katında çalış — 60 × 40 için 600 × 400, 120 × 90 için 1200 × 900. Bu hem oranı garantiler hem de küçültme sırasında kenarların daha temiz kalmasını sağlar.

Yükleme ekranı, en boy oranın tutmuyorsa seni uyarır ve sığdırma ile uzatma arasında seçtirir. İkisi de bir tavizdir; görseli doğru oranda hazırlamak ikisinden de iyidir.

Konum: köşeler ucuz değil

Tuvalde her pixel aynı fiyat — ama her pixel aynı ilgiyi görmez. Ziyaretçinin gözü önce merkeze, sonra üst banda gider. Alt köşeler en son bakılan yerlerdir.

Üst bandın somut avantajı aşağı kaydırmadan görünmesi; merkezin avantajı ise bir hiyerarşi iddiası taşıması. Sağ alt köşe, soldan sağa okuyan birinin gözünün bittiği yer. Bunlar ölçüm değil: bölge bölge bakılma oranı gösteren bir ısı haritası yayınlamıyoruz, elimizde öyle bir veri yok. Bu bir çıkarım, ve doğrulaman gereken yer tuvalin kendisi.

Bu iki stratejiye açık:

1. Merkeze yakın küçük bir alan. Az pixel, çok görünürlük. Sembolün tanınıyorsa en verimli seçim.
2. Kenarda geniş bir alan. Aynı bütçeyle daha fazla pixel. Mesajın okunmak zorundaysa mantıklı.

Komşuluk da önemli: yoğun ve renkli bir bölgede sade bir alan öne çıkar, boş bir bölgede parlak bir alan tek başına kalır. Tersi de doğru: kalabalığın içinde küçük bir alan gürültüye karışır, ama kalabalığın kenarında aynı alan komşularının çektiği bakıştan faydalanır. Boş bölgede ise seni kimse gölgelemez, ama gözü oraya çeken bir şey de yoktur — orada kontrastı yükseltmek zorundasın. Üst bant, merkez ve köşelerin tek tek dökümü için tuvalin neresini kiralamalı.

Renk: zemin siyah

Tuvalin zemini koyu. Koyu renkli bir görsel zeminle birleşir ve alanının nerede bittiği belli olmaz. Sınırı belli olan bir çerçeve ya da parlak bir zemin, aynı görselin fark edilirliğini ciddi biçimde artırır.

Zemin tam olarak #0a0a0f ve değişmiyor. Buradan üç somut kural çıkıyor:

• Değişken renk değil, kontrast. Markanın birincil rengi koyuysa onu zemin olarak değil, açık bir plakanın üstünde şekil olarak kullan. Koyu lacivert bir kurumsal ton bu zeminde pratikte görünmez.
• Küçük alanda plaka, çerçeveden ucuzdur. 60 × 40'lık bir alanda 1 pixellik çerçeve 196 pixel harcar — alanın yaklaşık %8'i. Tek blokta aynı çerçeve alanın üçte birinden fazlasını yer; orada bloğu tek renk plaka yapmak daha doğru.
• Çerçeve rengini zeminle aynı aileden seçme. Belirgin olmayan bir çerçeve, harcanmış pixelden başka bir şey değil.

Hangi hex'in zeminden ne kadar ayrıştığını koyu zeminde renk seçimi yazısında sayıyla bulabilirsin.

Süre ve bütçe: önce kısa dene

İlk kiralamanı uzun tutma. Bir hafta al, sonucu gör. İşe yaradıysa uzatırsın — uzatma mevcut bitiş tarihinin üstüne eklenir, baştan başlamaz. Süren dolmadan uzatırsan aynı yeri kaybetme riskin de olmaz.

Bununla birlikte süre, bütçenin ne kadar alan aldığını da belirliyor; çünkü uzun dönem kademeli indirime giriyor. Daha uzun bir süre hiçbir zaman daha kötü bir orana düşmez. Pixel fiyatını ve indirim kademelerini yönetim belirler; bugünkü hâllerini Nasıl çalışır sayfasında görürsün. Aşağıdaki hesap, pixeli haftada 1 dolar ve 4 hafta %10, 12 hafta %15, 26 hafta %20, 52 hafta %25 kademelerini varsayan bir örnek.

10.800 dolarlık tek bir kampanya bütçesini üç farklı biçimde harcayalım:

• A — 1 hafta, 120 × 90 pixel. 10.800 pixel, indirim kademesi yok, tam 10.800 dolar. Tuvalin yaklaşık yüzde biri, yedi gün boyunca. Her şey okunur, ama hafta bitince geriye bir şey kalmaz.
• B — 4 hafta, 100 × 30 pixel. 3.000 pixel, liste 12.000 dolar, %10 indirimle 10.800 dolar. 30 pixellik yükseklik işaret ve tek kelime için yeter.
• C — 12 hafta, 50 × 20 pixel. 1.000 pixel, liste 12.000 dolar, %15 indirimle 10.200 dolar. Üç aylık süreklilik; alan yalnızca bir işaret taşıyabilir.

İndirimin pratik anlamı B'de görünüyor: aynı 10.800 dolar, indirim olmasaydı dört hafta için 2.700 pixel (90 × 30) alırdı. %10 kademesiyle 3.000 pixel alıyor — bir blok sütunu, yani 10 × 30'luk bir şerit fazladan. Uzun dönem burada sadece süre değil, alan da kazandırıyor.

Mesajın okunmak zorundaysa A'ya yakın dur, tanınırlık peşindeysen C'ye. Kararsızsan B: dört hafta hem indirim kademesine giriyor hem de bir tasarım kararını gerçek tuvalde sınamaya yetiyor. Buradaki rakamlar örnek bir bütçe planı; ödeyeceğin tutarı her zaman kiralama ekranı gösterir.

Yüklemeden önce kontrol listesi

1. Blok sayını 10 ile çarptın mı? Dosyanın ölçüsü tam o sayı mı, ya da tam katı mı?
2. En küçük harfin yüksekliği 5 pixelin altına düşüyor mu? Düşüyorsa o yazıyı at.
3. Tasarımı #0a0a0f dolgulu bir zeminin üstüne koyup baktın mı?
4. Alanının nerede bittiği görünüyor mu? Görünmüyorsa plaka ya da çerçeve ekle.
5. Dosyayı tam ölçüsünde kaydedip %100 yakınlaştırmada, bir kol boyu uzaktan gördün mü?
6. GIF yüklüyorsan yalnızca ilk kare kullanılır; kompozisyonun o karede tamam mı?
7. Linkin http ya da https ile başlayan gerçek bir alan adına mı gidiyor?

Alanını seç