Duyarlı Tasarım

Konu Anlatımı

Duyarlı Tasarım

Duyarlı tasarım; aynı sayfanın telefon, tablet, dizüstü ve geniş ekranda içeriği kaybetmeden kendini yeniden düzenlemesidir. Amaç her cihaz için ayrı sayfa yapmak değil, tek bir düzen mantığı kurup ekran genişliğine göre sütun sayısını ve yerleşimi değiştirmektir. 11. sınıf düzeyinde buna, kampanya görsellerinin farklı platform ölçülerinde de üretilmesi eklenir; çünkü tek görsel hem feed'e hem story'e sığmaz.

1. Birimler ve Kullanım Yerleri

Birimler işlevine göre ayrılır. Piksel çerçeve ve sınır gibi sabit ölçüler içindir. Yüzde, elemanın üst kutuya göre oranını verir ve pencere küçüldükçe kendiliğinden daralır. rem yazı ölçeğini yönetir; kök elemanın boyutu değiştiğinde tüm sayfa ölçeklenir. vw ve vh ekranın genişlik ve yüksekliğinin yüzdesidir. Yarım ekranlık bölüm için yüksekliğin yüzde 50'si, yani 50vh yazılır. Birim karıştırıldığında sayfa tek bir ekranda düzgün görünür, diğerlerinde taşar.

Ölçekli yazı için clamp üç değer ister: en küçük, esnek ve en büyük. clamp(16px, 2,5vw, 24px) ifadesi, 800 piksel genişlikte 2,5 x 8 = 20 piksel çıkar ve 16 ile 24 piksel arasında kaldığı için 20 piksel uygulanır. Böylece hem küçük ekranda okunurluk hem geniş ekranda denge korunur.

2. Kesim Noktaları ve Sıra

Kesim noktası, içeriğin bozulduğu genişliktir; cihaz listesinden değil, tasarımdan geriye doğru bulunur. Yaygın başlangıç değerleri 480, 768, 1024, 1280 ve 1440 pikseldir, ancak asıl ölçü sayfanın kendi bozulduğu yerdir. Çalışma sırası önce mobil yaklaşımıdır: en dar ekranda tek sütunlu temel düzen yazılır, geniş ekranlara eklenerek zenginleştirilir. Tersi yapıldığında telefonda kullanılmayan devasa kurallar taşımaya başlar.

3. Dijital Pazarlama Görselleri: Sosyal Medya Formatları

Her platform kendi ölçüsünü dayatır ve görseli kendi oranına göre kırpar. Bu yüzden tek bir kaynak görsel değil, oranları bilinen bir set hazırlanır.

4. Güvenli Alan ve Kırpma Payı

Platform arayüzü, hikâye ekranının üst ve alt bölümlerini düğme ve yazılarla işgal eder. Yaklaşık 250 piksellik üst ve alt alan dışında kalan bölüm, görselin gerçekten okunan bölgesidir; 1920 piksel yükseklikten 500 piksel düşüldüğünde kullanılabilir yükseklik 1420 piksel kalır. Bu yüzden logo ve başlık merkeze yakın tutulur. Besleme (feed) paylaşımlarında ise kırpma payı tahmin edilmez; platformun gösterdiği kılavuz sınır dışına metin konmaz.

5. Optimizasyon, Test ve Sınav Odaklı Notlar

Görseller ekranda gösterildiği kadar çözünürlük ister: 600 piksel genişlikte gösterilecek bir görsel, yoğun ekranlarda net kalsın diye 1200 piksel olarak hazırlanır. Dosya biçimi ve kalite, hem yüklenme hızı hem de berraklık arasında denge kurar. Sınavda bu konudan oran denetimi, birim dönüşümü, kesim noktası mantığı ve güvenli alan hesabı sorularıyla ölçülür; atölyede kontrol edilen çıktı, her platform için ayrı ölçüde üretilmiş görsel setidir.

Ne Öğreneceğiz

11. sınıfta birimler, kesim noktaları, güvenli alan ve dijital pazarlama görsel formatları hesaplarıyla ele alınır. Bu konuda ögrenme çıktıları:

• Ekran birimlerini (px, %, rem, vw) kullanım alanına göre seçer.
• İçeriğe dayalı kesim noktalarını belirler ve artımlı iyileştirmeyle tasarlar.
• Sosyal medya görsel ölçülerini oran denetimiyle doğrular.
• Güvenli alan ve kırpma paylarını dikkate alarak görsel yerleştirir.
• Ekran ve cihaz farklarında dosyayı test ederek yayın uygunluğunu denetler.

Ön Bilgi

Bu konuya başlamadan önce temel kavram ve ön koşulları kavramanız yardımcı olacaktır. Konunun çerçevesinde şu kavramlar dikkat ister:

• Duyarlı tasarım, ayrı sayfa değil tek düzen mantığının genişliğe göre yeniden kurulmasıdır.
• Sabit piksel genişliği verilen kutu, dar ekranda yatay kaydırmaya ve metnin taşmasına neden olur.
• Yazı ölçeği rem ile yönetilirse kök boyut değiştiğinde bütün sayfa birlikte ölçeklenir.
• Tek görsel her platforma sığmaz; feed, hikâye ve bağlantı önizlemesi ayrı ölçülerde hazırlanır.
• Hikâye ekranında üst ve alt yaklaşık 250 piksel arayüz elemanlarıyla örtülür, metin buraya konmaz.
• Görsel, gösterildiği genişliğin iki katı çözünürlükte üretilmezse yoğun ekranlarda bulanık görünür.

Basit Örnek ve Günlük Yaşam

Günlük yaşamda ve mesleki bağlamda bir uygulama:

Soru: Hazırlanan dikey paylaşım görseli 1080 x 1350 pikseldir. Bu ölçü hangi orana uyar?

1. Adım 1: Oran için genişlik bölü yükseklik alınır: 1080 / 1350 = 0,80.
2. Adım 2: 0,80 değeri kesir olarak 4 / 5 biçiminde yazılır (4 / 5 = 0,80).
3. Adım 3: Platformun beklediği 4: 5 ölçüsüyle karşılaştırılır ve eşleşme doğrulanır.

Sonuç/cevap: Cevap: Oran 4: 5'tir ve ölçü platformun dikey feed ölçüsüne uyar.

Adım Adım Çözülmüş Örnek

Örnek 1: Görsel Oranının Doğrulanması konusunun adımları:

1. Adım 1: Oran için genişlik bölü yükseklik alınır: 1080 / 1350 = 0,80.
2. Adım 2: 0,80 değeri kesir olarak 4 / 5 biçiminde yazılır (4 / 5 = 0,80).
3. Adım 3: Platformun beklediği 4: 5 ölçüsüyle karşılaştırılır ve eşleşme doğrulanır.

Karşılaştırma Tablosu

Sık Yapılan Hatalar

Tek görseli tüm platformlarda kullanmak: Kare feed görseli story'e girdiğinde kırpılır; başlık ve logo kaybolur, bu yüzden her ölç ayrı hazırlanır.

Genişlik yerine sabit piksel kullanmak: Sabit piksel verilen kutu dar ekranda taşar, yüzde veya esnek birim kullanıldığında kendiliğinden daralır.

Kesim noktasını cihaz listesinden seçmek: Sayfanın bozulduğu gerçek genişlik ölçülmeden seçilen değer, gereksiz ve eksik kurallar üretir.

Hikâye görselinde metni kenara yaslamak: Üst ve alt yaklaşık 250 piksellik alanda platformun düğmeleri durur; metin bu alanda okunmaz hâle gelir.

Görseli gösterilen genişlikte tasarlamak: Yoğun ekranlarda iki kat çözünürlük gerekir; aksi hâlde logo ve ince çizgiler bulanık görünür.

Özet

Duyarlı tasarım; birimlerin işlevine göre seçilmesi, kesim noktalarının içeriğin bozulduğu yerden belirlenmesi ve önce mobil sırasıyla kurulması demektir. Sosyal medya görselleri 1080 x 1080, 1080 x 1350, 1080 x 1920, 1600 x 900 ve 1200 x 630 piksel gibi bilinen ölçülerde ayrı ayrı üretilir, hikâyede üst ve alt 250 piksellik güvenli alan korunur. Görsel, gösterilen genişliğin iki katı çözünürlükte hazırlanırsa yoğun ekranlarda da netlik sürer.

Kendini Dene

Soru: Bir kampanyada 6 farklı görsel bulunmaktadır. Her görsel feed kare (1080 × 1080), hikâye (1080 × 1920) ve bağlantı önizlemesi (1200 × 630) olarak üretilecektir. Toplam hazırlanacak dosya sayısını, her platformun en-boy oranını, hikâyede üst ve alt kaç piksellik güvenli alan bulunduğunu ve görsellerin neden iki kat çözünürlükte üretilmesi gerektiğini yazınız.

Örnek cevap: Puanlama anahtarı: Toplam dosya sayısının 6 × 3 = 18 olarak bulunması 5 puan; oranların 1: 1, 9: 16 ve 1200 ÷ 630 ≈ 1,91: 1 olarak doğru yazılması 5 puan; hikâyede üst ve alt yaklaşık 250 piksellik güvenli alanın kritik metne konmaması gerektiğinin belirtilmesi 5 puan; görselin gösterildiği genişliğin iki katı çözünürlükte üretilmesinin yoğun ekranlarda bulanıklığı önlediğinin açıklanması 5 puan. Toplam 20 puan.