Dijital kimlikte hareket, markanın ekranda nasıl davrandığını tanımlayan kurallar bütünüdür: logo nasıl belirir, bir buton üzerine gelince ne olur, sayfa değişirken ne kadar sürer. Statik bir logo kartvizitte yeter. Ekranda ise logo yüklenir, kayar, solar. O anların hepsini rastgele bırakırsanız marka her yerde biraz farklı davranır.
Motion kimlik neyi kapsar?
Üç ayrı katman var. Birincisi logo animasyonu: açılış ekranında, videonun başında ve sonunda görünen kısa hareket. İkincisi arayüz hareketi: menünün açılışı, kartların belirmesi, hover efektleri, form hatası uyarısı. Üçüncüsü sosyal medya ve reklam videolarındaki geçişler: yazının ekrana giriş biçimi, kesme hızı, kapanış kartı.
Çoğu işletme yalnızca birincisini düşünür. Oysa ziyaretçi bir sitede logo animasyonunu belki bir kez görür, buton ve geçiş hareketini ise yüzlerce kez. Marka hissini asıl ikinci katman taşır.
Hareketin karakteri markanın kişiliğiyle aynı yerden gelir
Hız, yumuşaklık ve yön birer tasarım kararıdır. Bir çocuk kıyafeti markası sıçrayan, 200-250 milisaniyelik hızlı geçişlerle rahat eder. Bir hukuk bürosunun sitesi aynı hareketle ciddiyetini kaybeder; orada 300-400 milisaniyelik, yumuşak başlayıp yumuşak biten geçişler daha uygun düşer.
Bu yüzden önce kişilik tanımı gerekir. Marka kişiliğini tanımlamadan hareket seçmek, renk paletini bakmadan seçmeye benzer. Kişilik netse üç sıfat bile hareket tarafını belirler: enerjik markaya hızlı çıkış, sakin markaya yavaş giriş, hassas markaya hafif geri tepme.
Logo animasyonunun sınırları
Logo hareket ederken formu bozulmamalı. Köşelerin bükülmesi, harflerin yerinden fırlaması, alakasız parıltı efektleri tanınırlığı zayıflatır. İyi bir logo animasyonu kısadır. Bir iki saniyede biter, son karesi statik logoyla birebir aynıdır ve sesi kapalı da anlam taşır.
Pratik bir kural: animasyonu gösterirken son kareyi sakla. Logo her zaman durduğu haliyle tanınmalı, hareket yalnızca oraya varış yoludur. Videoda kapanış kartı olarak kullanılan logo da bu son kareden çıkar.
Süre ve easing eğrisi: sayıyla tanımlayın
Kimlik kılavuzunda “yumuşak geçişler” yazmak işe yaramaz. Tasarımcıdan tasarımcıya yorum değişir. Bunun yerine sayı yazın. Örneğin küçük öğeler için 150 milisaniye, orta boy paneller için 250, tam ekran geçişler için 400 milisaniye. Easing için tek bir eğri seçin, CSS karşılığıyla birlikte (cubic-bezier(0.4, 0, 0.2, 1) gibi) kılavuza koyun.
Web geliştirici bu değerleri bir kez tanımlar, bütün bileşenler aynı değişkenden okur. Sosyal medya ekibi aynı değerleri video düzenleme programına girer. Yazılım farklı, his aynı kalır.
Erişilebilirliği unutmayın
Bazı kullanıcılar için hareket rahatsız edicidir; vestibüler rahatsızlığı olan biri kayan, dönen öğelerde mide bulantısı yaşayabilir. Tarayıcıların prefers-reduced-motion ayarı bunun için var. Kullanıcı sisteminde hareketi azaltmayı seçtiyse sitenin animasyonları sadeleşmeli ya da kapanmalı. Bu davranışı motion kılavuzuna açıkça yazın: azaltılmış modda logo animasyonu yerine düz solma kullanılır, paralaks kapanır.
Renk tarafındaki benzer bir ihtiyaç için renk kontrastı yazımıza bakabilirsiniz; ikisi aynı erişilebilirlik mantığının parçası.
Performans bedeli
Hareketin bedeli bayt ve işlemci zamanıdır. Büyük bir Lottie dosyası ya da ağır bir GIF mobilde ilk yüklemeyi yavaşlatır. Yavaşlayan site hem ziyaretçiyi hem arama sıralamasını etkiler. Mümkünse CSS geçişi ya da kısa SVG animasyonu tercih edin, video gerekiyorsa sıkıştırın, otomatik oynamayı sessiz ve döngüsüz tutun.
Web tasarım sürecimizde hareket kararlarını sayfa hızıyla birlikte ele alıyoruz. Tek sayfalık bir siteyle başlayan işletme için hareket çoğu zaman yalnızca hover ve scroll geçişlerinden oluşur; bunlar için ek bütçe gerekmez. Fiyatlar sayfasında web sitesi paketlerinin kapsamını görebilirsiniz.
Motion kılavuzu nasıl yazılır?
Kılavuz kısa olabilir; iki üç sayfa yeter. İçinde şunlar bulunmalı:
- Süre değerleri ve hangi öğe için hangisinin kullanılacağı
- Easing eğrisi ve yönü (girişte hızlı çıkış, çıkışta yavaş başlangıç gibi)
- Logo animasyonunun kaynak dosyası, süresi ve son karesi
- Yapılmayacaklar: dönen logo, zıplayan metin, sürekli pulsing eden butonlar
- Azaltılmış hareket modunda ne olacağı
Tutarlılık kontrol listesine de bir madde ekleyin. Tutarlılık kontrol listemizde renk ve yazı tipi gibi motion süresi de periyodik denetime girebilir.
Abartı sorusu: ne zaman durmalı?
Bir öğe hareket ediyorsa nedeni olmalı. Yeni bir bölümün belirmesi, kullanıcının bir işlemi tamamlaması, dikkatin bir butona çekilmesi gibi. Süs için hareket, ziyaretçinin dikkatini asıl işten uzaklaştırır. Test etmesi kolay: animasyonu kapatın. Sayfa hâlâ anlaşılıyorsa animasyon süstü. Anlaşılmıyorsa animasyon fazla yük taşıyor, tasarım düzeltilmeli.
Küçük bir işletme için başlangıç seti
Büyük bir motion sistemi kurmanız gerekmiyor. Üç karar yeter: tek bir geçiş süresi, tek bir easing eğrisi ve bir logo açılışı. Site açıldığında bölümler aşağıdan yukarı 250 milisaniyede belirsin, butonlar üzerine gelince hafifçe koyulaşsın, logo videonun sonunda bir saniyede yerine otursun. Hepsi bu. Sonra büyüdükçe mikro-etkileşimler eklenir.
Başlangıçta yapılan en pahalı hata, her sayfa için başka bir animasyon kütüphanesi denemektir. Sonuçta site ağırlaşır, hareketler birbirini tutmaz ve bakımı zorlaşır. Tek kural seti, tek yerden okunan değişkenler daha ucuza gelir ve yıllarca çalışır. Hareketi sonradan eklemek de kolaydır; baştan kaldırmak ise sayfa sayfa elle iş demektir.
Kimlik projesini baştan kurarken hareket kısmını da konuşmak istiyorsanız iletişim sayfamızdan yazın, ya da 0540 022 64 22 numarasını arayın.