Aynı anda dönen, büyüyen ve parlayan her öğe dikkat ister. Hepsi konuştuğunda ise sahnenin asıl cümlesi kaybolabilir.
Hareketi sırayla kuruyoruz: önce bakılacak yer, sonra anlaşılacak fikir, ardından bir sonraki sahne. Kısa bir duraklama da bu ritmin parçası.
Bir geçiş sadece iki görüntünün arasını doldurmaz. Bir önceki hareketin nedenini, bir sonraki görüntüye taşır.
Fikirden uygulamaya. İstediğin bölümden devam et.
Hareket önce dikkati yönetir
Hareketli bir öğe sahnede dikkat ister. Birden çok öğe aynı anda aynı kuvvetle hareket ettiğinde hangi bilginin önemli olduğunu seçmek zorlaşabilir. İlk bakışı, ikinci bilgiyi ve geçişi bir sıraya yerleştirmek bu rekabeti azaltır.
Her animasyonun bir görevi olmalı: durum değiştirmek, bağ kurmak veya bir fikri vurgulamak. Salt dekorasyon da bir tercihtir; ancak mesajın önüne geçtiğinde ağırlığını azaltmak gerekir.
Duraklama da zaman çizelgesinin parçası
Bir sahnenin tamamlanması ile sonraki sahnenin başlaması arasındaki küçük boşluk, izleyicinin bilgiyi işlemesi için alan yaratabilir. Bu kararın süresi mesaj, ekran ve anlatım biçimiyle birlikte değerlendirilir; her sahne için aynı sayı doğru olmaz.
Hareketin başlangıcı, hızlanması ve bitişi arasındaki ilişkiyi tutarlı kur. Bir öğe sertçe dururken diğeri sürekli akıyorsa bu farkın anlatımda bir nedeni olsun.
- Sahnenin ana mesajını yaz.
- Aynı anda en güçlü hareket eden öğeyi seç.
- Metnin okunabileceği bir duraklama bırak.
- Geçişin bir sonraki sahneyle olan bağını tarif et.
Tek sahneye tek başrol.
Örnek kurgu: kısa bir ürün filminde önce ürünü tanıtacak, sonra temel özelliğini gösterecek, en sonunda markayı hatırlatacağız. Sahne sırası, hareket sayısından daha önemli.
Kamera dönüyor, başlık büyüyor, ürün ışıldıyor, arka plan parçalanıyor. Hepsi aynı anda başlıyor; asıl bilgi seçilemiyor.
Ürün beliriyor, kamera yerleşiyor, özellik görünür oluyor. Başlık okunurken sahne sakinleşiyor; imza bu cümlenin ardından geliyor.
Önce filmi sessiz ve küçük bir önizlemede izleriz. Ürünün ne olduğu anlaşılmıyorsa ses tasarımıyla bunu örtmeye çalışmayız. Ardından yalnız hareket eden alanlara bakarız: gözün takip etmesini istediğimiz unsur ile sahnenin gerçekten öne çıkardığı unsur aynı mı? Bu inceleme, her öğenin güzel görünmesini ayrı ayrı değerlendirmekten farklıdır; sahnenin birlikte söylediği cümleye bakar.
Başlığın ekranda kalma süresi metnin uzunluğuna, diline ve izleme ortamına göre değişir. Her sahneye tek bir süre ezberi uygulamak yerine gerçek metinle prova yaparız. Dikey versiyonda kadraj daralınca aynı zamanlama yetmeyebilir. Buradaki amaç keyfî bir yavaşlık değil, mesajın anlaşılacağı bir ritimdir. Hızlı bir filmde de çok belirgin duraklamalar bulunabilir.
Azaltılmış hareket ayrı bir deneyimdir
İşletim sistemindeki azaltılmış hareket tercihi web’de prefers-reduced-motion ile algılanabilir. Bu tercihi dikkate almak, özellikle dekoratif hareketleri ve büyük ölçekli kaydırma efektlerini yeniden değerlendirmeyi gerektirir.
Hareketi kaldırınca içerik veya işlev kaybolmamalı. Animasyonla verilen durum bilgisinin yazı, konum veya başka bir görünür işaretle de anlaşılmasını sağla. Azaltılmış sürümü sonradan boş bir sayfaya dönüşen bir kestirme olarak tasarlama.
Akıcılığı gerçek koşullarda kontrol et
Güçlü bir bilgisayarda iyi görünen efekt, küçük ekranda veya düşük güçte aynı hissi vermeyebilir. Yükleme süresi, kaydırma tepkisi ve kullanıcı etkileşimleriyle birlikte test et.
Görüntü alanına gelmeyen dekoratif işleri erken başlatmak, görünür içeriğin bütçesini tüketebilir. Gerekli bilgiyi ilk HTML içinde sun; görsel etkileri bu içerik yükünü engellemeyecek biçimde ekle.
Hareketten önce durağan kareyi çöz
Storyboard yalnız üretilecek sahnelerin listesi değildir. Her karede neyin anlaşılacağını, bir sonraki kareye neden geçileceğini ve hangi bilginin yeni olduğunu gösterir. Durağan karede hiyerarşi belirsizse animasyon bunu daha da karmaşıklaştırabilir. Önce kompozisyon, metin miktarı ve ürünün konumu üzerinde karar ver. Sonra hareketin bu ilişkileri nasıl değiştireceğini belirle.
Bir geçişin gerekçesini kısa bir fiille anlatmak yardımcı olur: yaklaş, açığa çıkar, bağla, karşılaştır veya tamamla. 'Güzel geçsin' üretim için zayıf bir talimattır; 'ilk sahnedeki çizgi ikinci sahnede ürünün kenarına dönüşsün' daha açık bir ilişkidir. Bu açıklık her kareyi mekanik hale getirmez. Yaratıcı seçeneklerin aynı anlatı amacına göre değerlendirilmesini sağlar ve kurgu sırasında birbirinden kopuk numaralar biriktirmeyi önler.
Reklam filmiyle arayüzün zamanı farklı
Bir filmde zaman çizelgesini büyük ölçüde kurgu belirler. Arayüzde ise kişi bir eylem yapar ve sistemden cevap bekler. Film için hoş bir gecikme, bir formda belirsizlik hissi yaratabilir. Bu yüzden sinematik geçişleri olduğu gibi uygulamaya taşımayız. Bir panelin açılması, bir seçimin görünmesi veya işlem durumunun değişmesi başka bir kullanım amacına sahiptir.
Arayüz hareketi, nereden nereye geçildiğini ve neyin değiştiğini anlatmalıdır. Kullanıcı bir sonraki işi yapmak isterken animasyonun bitmesini beklemek zorunda kalıyorsa süre yeniden değerlendirilir. Hareket tamamlanmadan ikinci etkileşim geldiğinde ne olacağı da tasarımın parçasıdır. Bu durumları konuşmak, yalnız ideal ekran kaydı üretmek yerine gerçek davranış tasarlamaktır. Görsel zarafet, işlem akışının güvenilirliğiyle birlikte ele alındığında kalıcı bir karaktere dönüşür.
Sahnenin sesini biraz kısalım.
Bir sahneyi seç. Hareketlerin görevini aşağıdaki sorularla ayır; sırf boşluğu dolduran hareketi kaldırmayı da bir tasarım kararı say.
Sıradaki kararAynı anda yarışan hareketleri sırala. Başrolü olmayan öğelere daha sakin bir davranış ver.
Teslim, tek bir video dosyası değil
Bir film farklı kanallarda kullanılacaksa oranlar, metin güvenli alanları, sesli ve sessiz izleme koşulları başlangıçta planlanmalıdır. Yatay kompozisyonu otomatik kırpmak önemli bir ürünü veya başlığı dışarıda bırakabilir. Dikey sürüm bazen aynı sahnenin yeni kadrajını, bazen farklı bir kurgu sırasını gerektirir. Teslim listesi bu kararların hangi sürümler için alınacağını görünür kılar.
Web üzerindeki motion için de normal ve azaltılmış hareket sürümleri birlikte düşünülür. web.dev’in açıkladığı prefers-reduced-motion, kişinin işletim sistemindeki tercihini web deneyimine taşır. Büyük ölçekli hareket kaldırıldığında içerik anında görünmeli, durum değişiklikleri anlaşılır kalmalıdır. Bir alternatifin varlığı sanat yönetimini zayıflatmaz; aynı fikri farklı koşullarda anlatabildiğini gösterir. Hareketin karakteri kadar, gerektiğinde durabilmesi de tasarımın olgunluğudur.
Sesi de bu hiyerarşinin parçası olarak düşün. Her kesmeye vurgu efekti koymak, her görsel öğeyi hareket ettirmek kadar yorucu olabilir. Sesin mesajı taşıdığı, atmosfer kurduğu ve sessiz kaldığı anlar birbirinden ayrılmalıdır. Film sessiz izlendiğinde gerekli bilgi başlık veya görsel ilişkide bulunmalı; ses açıldığında da yeni bir katman kazanmalıdır. Yayın ortamına göre altyazı ve metin yerleşimi planlamak, son anda görüntünün üstüne yazı sıkıştırma ihtiyacını azaltır. İyi ritim gözün ve kulağın aynı hikâyeyi farklı yollardan takip edebilmesine alan açar.
Hareketin anlatı tarafı
Bu yazı motion için ana çerçeve. Dijital deneyim ve AI üretimi yazıları, hareketin kullanıldığı iki farklı ortamı açıyor.
