Dijital Medya ve Arayüz Tasarımı — Ünite 5 Soru-Cevap

Hareket (motion) tasarımı; web sitesi, mobil uygulama ve video gibi dijital medyalarda kullanılmak üzere animasyonlu grafikler ve görsel efektler oluşturma pratiğidir. Animasyonlar, geçişler ve mikro etkileşimler aracılığıyla dijital dünyayı statik olmaktan kurtararak canlandırır. Hareket tasarımı dinamik ve ilgi çekici görsel deneyimler yaratmak için grafik tasarım, animasyon ve etkileşim unsurlarını birleştirir.

Kullanıcıların ilgisini çekmek ve odaklan­malarını sağlamak için güçlü bir araçtır. Bir hikâyenin anlatımını güçlendirir; daha etkili, kalıcı ve kolay anlaşılabilir kılar. Kullanıcı deneyimi iyileştirir; akıcı geçişler ve hareket temelli anlık geri bildirimler sağ­layarak daha sezgisel ve memnun edici hâle getirir. Deneyime konu olan öznenin (arayüz, mar­ka, hikâye, video, film, vb.) kişiliğini ve de­ğerlerini ifade etmeye yardımcı olur.

Kullanıcı arayüzleri (UI), dijital reklamlar, sosyal medya, video ve film prodüksiyonu, sunular.

Latince anima kökünden türetilmiş olan animasyon kelimesi özünde can, ruh veya hayat anlamına gelir. 16. yüzyılda “canlandırmak” veya “hareketlendirmek” anlamlarıyla kullanılmaya başlanmıştır. Animasyon, birbiri ardına gösterilen resimler veya çizimler aracılığıyla hareket illüzyonu yaratma­ya dayalı bir sanattır. Animasyonun temel çalışma mantığı, hareket illüzyonunu yaratmak üzere oluş­turulmuş küçük farklılıklara sahip görsel kompo­zisyonların (kare ya da İngilizce adıyla frame) ardı ardına, hızla oynatılması fikrine dayanır.

Sıkıştırma ve germe, öncülük, sahneleme, doğrudan hareket ve pozdan poza, takip ve üst üste binme hareketi, yavaş başla ve yavaş bitir, yaylar, ikincil hareket, zamanlama, abartma, sağlam çizim ve çekicilik prensipleridir.

Dijital ortamlarda veya elle çizim yaparak iki boyutlu uzayda karakterlerin ve sahnelerin can­landırılması sürecidir. Geleneksel çizgi filmlerden modern dijital animasyonlara kadar geniş bir yel­pazeyi kapsar, çok çeşitli araçlar ve teknikler kulla­nılarak gerçekleştirilir.

• Kare kare (frame by frame) animasyon tekniğinde, animasyonun her bir karesi tek tek elle çizilir veya bilgisayarda oluşturulur.
• Tweening (diğer adıyla in-betweening) tekniğinde, ana kareler (keyframe) animatör tarafından tasarlandıktan sonra hareketi meydana getirecek ara kareler (frame) animasyon yazılımı tarafından otomatik olarak oynatılır.
• Rigging tekniğinde, karaktere bir iskelet sistemi eklenerek doğal insan hareketleri simüle edilir. Hızlı ve kolay bir şekilde daha doğal insansı hareketler yaratmayı mümkün kılar.

3B animasyon, izleyicilere daha derinlikli ve gerçekçi bir görünüm sunar. Tasarım ve geliştirme süreçleri açısından 3B animasyon, çoğunlukla daha zaman alıcı ve maliyetlidir. 3B animasyon, izleyicilere sunulan deneyimi zenginleştirme konusunda daha fazla esneklik ve olanak sunar.

Bu yöntemler Stop motion ve motion capture yöntemleridir. Stop motion, animasyona el yapımı ve organik bir dokunuş sunarken motion capture gerçekçilik ve doğallıkta mükemmelliği hedefler. Her iki teknik de hikâye anlatımı ve karakter geliştirme açısından benzersiz avantajlar sunar. Kullanım sıklıkları; animasyon projelerinin amacına, istenen estetiğe ve bütçeye bağlı olarak değişir.

Amaç Belirlemek: Her geçişin bir amacı olmalıdır; Sadelik: Gereksiz veya aşırı kullanım, kullanıcıları yorabilir ve amaçtan sapabilir. Tutarlılık: Uygulama veya web sitesi ge­nelinde geçişler tutarlı olmalıdır. Performans: Geçişlerin pürüzsüz ve hızlı olması önemlidir. Yavaş veya takılan ani­masyonlar, kullanıcı deneyimini olumsuz etkiler. Test: Farklı cihazlarda ve ekran boyutların­da geçişlerin nasıl göründüğünü test etmek olası hataların önüne geçecektir.

Yükleme Ekranları, Menü Geçişleri, İçerik Geçişleri, Sayfa Geçişleri

Kullanıcıların dijital plat­formlarla etkileşimini daha keyifli hâle getiren ani­masyon temelli unsurlardır. Kullanıcıya geri bildi­rim sağlamak, aksiyonun sonucunu göstermek ve bir işlemin durumu hakkında bilgi vermek amacıy­la kullanılırlar.

Hareketli grafikler bilgiyi aktarmak, marka kimliğini güç­lendirmek veya reklam ve tanıtım amaçlı kullanılır. Özellikle web siteleri, sosyal medya, reklam pano­ları ve televizyon reklamlarında etkili bir şekilde kullanılan hareketli grafikler, mesajı hızlı ve etkile­yici bir şekilde iletmeyi amaçlar.

• Animasyonlar, tasarımcıların metne başvurmadan kullanıcılarla iletişim kurabilmesine imkân tanır.
• Animasyonlar, sadece bilgi aktarımı değil aynı zamanda estetik bir değer de sunar.
• Arayüz animasyonları, farklı kültürlerden ve dil­lerden kullanıcılara ulaşmada da etkilidir.
• Animasyonlar, tasarım psikolojisi ve bilişsel yükü azaltma konusunda kritik bir role sahip­tir.

• Slide In/Out: Slide (kaydırma) animasyon­ları
• Fade In/Out: Bir öge­nin yavaşça görünür hâle gelmesini (fade in) veya görünmez hâle gelmesini (fade out) sağlar.
• Zoom In/Out: Zoom in, bir ögenin veya görüntünün yakınlaştırılmasını; zoom out ise uzaklaştırılmasını ifade eder.
• Dissolve: Bir ögenin yavaşça kaybolup başka bir görüntü veya ögeyle değişmesini ifade eder.
• Bounce: Bir ögenin hedefine ulaştığında hafifçe geri sekmesiyle karakterize edilen animasyonlardır.
• Elastic: Ögelerin esnek bir şekilde genişle­diği ve daraldığı animasyonlardır.
• Parallax: Kullanıcı sayfayı kaydırdıkça arka planın ön plandan farklı bir hızda hareket etmesini sağlayan bir animasyon tekniğidir.
• Path: Ögelerin belirlenen bir yol boyunca hareket ettiği animasyonlardır.

• Tasarım Hazırlığı: İlk olarak animasyonu uygulamak istenilen ögeler tasarlanır.
• Çerçeveler Oluşturma: Animasyonun baş­langıç ve bitiş noktalarını temsil eden iki farklı çerçeve (frame) oluşturulur.
• Prototipleme: Çerçeveler arasında geçişi simüle etmek için Figma’nın prototipleme moduna geçilir.
• Animasyon Ayarları: Bağlantı ayarlarında, “On Click” (Tıklama Üzerine), “On Hover” (Üzerine Gelince) gibi bir tetikleyici seçilir.
• Test Etme: Animasyonu test etmek için oynatma simgesine tıklanır ve prototi­p gerçek zamanlı olarak gözlemlenir.

Giriş videoları, arka plan videoları, manşet videoları, vitrin (showreel) videoları, referans videoları ve ürün videolarıdır.

• Gösterilecek çalışmalar en iyi ve en etkile­yici örneklerden seçilmelidir.
• Video, profesyonel bir şekilde düzenlenme­li ve çalışmalar arasında akıcı bir geçiş sağ­lanmalıdır.
• Videolar için 2-3 dakika gibi kısa süreler idealdir.
• Videonun, izleyiciyi sadece görsel olarak de­ğil aynı zamanda duygusal olarak da etkileyecek bir hikâye anlatımı içermesi önemlidir.
• Seçilen arka plan müziğinin video içeriğiyle uyumlu olması ve izleyici üzerinde olumlu bir etki yaratması gerekir.

Video Sıkıştırma, Tembel Yükleme (Lazy Loading), Uyarlanabilir Akış (Adaptive Streaming), Video Barındırma (Hosting) Servisleri, Ön Yükleme Testleri

• Açık renkli gölgeleme, metin kutuları veya yarı saydam arka planlar kullanılabilir.
• Okunabilirliği arttırmak için büyük ve net fontlar kullanılmalı, metin yerleşimi video içeriğinin daha az hareketli bölümleri üzerine konumlandırılmalıdır.
• Video arka plan üzerinde konumlandırılacak menü butonları ve diğer navigasyon ögeleri net bir şekilde belirginleştirilmelidir.
• Erişilebilirlik standartlarına uygun olarak renk körü kullanıcılar için de kontrastın yeterli olduğundan emin olunmalıdır.
• Web ve uygulama arayüzlerinin çeşitli cihazlarda ve ekran boyutlarında nasıl göründüğünü test etmek, tüm kullanıcıların benzer bir deneyim yaşamasını sağlar.

• Kullanıcılara videoyu oyna­tıp oynatmama konusunda seçenek sunmak, daha kullanıcı dostu bir yaklaşımdır.
• Kullanıcıların videonun ses seviyesini kontrol edebilmeleri, videoyu sessiz modda izleyebilmeleri önemlidir.
• Kullanıcıların video üzerinde tam kontrol sahibi olmalarını sağlamak için ileri/geri sarma ve durak­latma gibi temel video kontrol özellikleri de sunulabilir.
• Video içeriğinin yanı sıra içeriği destekleyen metin açıklamaları ve gerekirse alt yazılar eklemek, içeriği daha erişilebilir kılabilir.