Duyarlı Tasarım nedir?

Bu konuda neler öğreneceksin?

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

Anahtar fikirler

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

Konunun özeti

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.

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.

İlgili konular

• Kullanıcı Deneyimi
• Tasarım Sistemi
• HTML ve CSS
• Kare Animasyon
• Ara Değerleme
• Kurgu Temelleri