Duyarlı Tasarım — Çalışma Sayfası

Bu konuda öğrenecekleriniz

• 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.

Önemli noktalar

• 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.

Formüller ve kurallar

• Oran denetimi: genişlik / yükseklik; 1080 / 1080 = 1, 1080 / 1350 = 0,8 yani 4 / 5.
• clamp(en küçük, esnek, en büyük): 800 pikselde 2,5 vw = 20 piksel, 16-24 piksel sınırı içindeyse 20 piksel uygulanır.
• 1 rem = 16 piksel; 1,5 rem = 24 piksel olarak dönüşür.
• Hikâye kullanılabilir yüksekliği = 1920 - 250 - 250 = 1420 pikseldir.
• Yoğun ekrandaki görsel genişliği = gösterilen genişlik x 2; 600 piksel için 1200 piksel.
• Izgara sütun genişliği = (genişlik - (sütun - 1) x aralık) / sütun; 480 pikselde 2 sütun için 232 piksel.
• Sıra önce mobil: temel düzen en dar ekranda yazılır, geniş ekranlara eklenir.
• Kesim noktası cihaz listesinden değil, içeriğin bozulduğu genişlikten geriye doğru belirlenir.

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.

Hızlı tekrar ipuçları

• Ölçüleri yazıyla değil oranla doğrula: 1080 / 1350 işlemini yap, sonucun 0,8 çıktığını gör.
• Tasarıma en dar ekrandan başla; geniş ekran yalnızca eklemek içindir, eksiltmek için değil.
• Kritik metin ve logoyu hikâyede merkez üçte birde tut; kenarlara yaslanan bilgi kaybolur.
• Görselleri dosya adında ölçüyle etiketle: kampanya_1080x1920 gibi; yükleme sırasında karışıklık önlenir.
• Sınavda güvenli alan sorularında toplam kaybı önce hesapla, sonra yükseklikten düşür; iki adımı karıştırma.

Kendini dene

Bu sayfayı okuduktan sonra konu anlatımını tekrar oku ve kendi cümlelerinle özetle.

Konu anlatımına dön · Hesap aç, ilerlemen kaydedilsin