Bir web sitesi açılırken logonun çizilerek belirdiğini gördünüz mü? Ya da logodaki bir simge, fare üzerine geldiğinde hafifçe dönüyordur. Bunların çoğu SVG animasyonu ve ilk bakışta çok cazip. Doğru yapıldığında markaya kişilik katıyor; yanlış yapıldığında sayfayı yavaşlatıyor ve ziyaretçiyi yoruyor.
Logo animasyonu bir süs değil, bir karar. Ne zaman anlamlı olduğunu, nasıl yapıldığını ve nerede sınır çizmek gerektiğini birlikte bakalım.
SVG neden animasyona uygun?
SVG’nin şekilleri ayrı ayrı yollar hâlinde saklanıyor; her yol bağımsız hareket edebilir, renk değiştirebilir ya da çizim çizgisi gibi ilerleyebilir. Bir logoyu piksel olarak animasyonlaştırmak için video ya da GIF gerekirdi; büyük ve bulanık olurdu. SVG animasyonu ise küçük kalıyor ve her ölçekte keskin görünüyor.
Ayrıca logo animasyonunun kodla kontrol edilebilmesi, farklı durumlarda farklı tepki vermesini sağlıyor: sayfa yüklenirken bir animasyon, fare üzerine gelince başka bir hareket, kaydırma sırasında küçülme gibi.
Üç temel yöntem
CSS animasyonu. En yalın yol. Renk değişimi, dönme, hafif büyüme gibi basit hareketler için yeterli. Kodu az, tarayıcı desteği geniş. Küçük bir vurgu için ideal.
SMIL (SVG’nin kendi animasyon dili). Doğrudan SVG dosyasının içine yazılıyor. Bazı tarayıcılarda sınırlı destek ve gelecekte belirsizlik olduğu için yeni projelerde tercih edilmiyor.
JavaScript kütüphaneleri. Karmaşık, zincirleme ve etkileşimli animasyonlar için. Örneğin logonun harfleri sırayla belirsin, sonra simge yerine otursun. Bu yöntem daha fazla kod ve emek ister, ama en esnek olanı.
Klasik örnek: çizilerek beliren logo
Çizgi tabanlı bir logoda, yolun “çizilme” hissini vermek için çizgi uzunluğu animasyonu yapılıyor: çizgi başta görünmüyor, sonra başlangıçtan sona doğru ilerliyor. Bu efekt, imza atma hissi verdiği için el yapımı, zanaat, mimarlık ve sanat markalarında hoş duruyor.
Ama bu efekt yalnızca çizgi (stroke) tabanlı logolarda çalışıyor. Dolgulu şekillerden oluşan bir logoda “çizilme” yapılamaz; onun yerine belirme (fade), kayma ya da ölçek değişimi uygulanır. Yani animasyon planlaması logonun yapısına bağlı; tasarımcı bunu logoyu çizerken düşünürse, sonradan uyarlamak kolaylaşır.
Ne kadar süre? Ne kadar sık?
Ziyaretçinin sitede yapmak istediği bir iş var: bilgi almak, iletişime geçmek. Logo animasyonu bu işin önüne geçmemeli. Kural olarak, açılış animasyonu bir saniyeyi geçmesin; ideal olarak yarım saniye civarı. Uzun bir tanıtım animasyonu, ilk ziyarette merak uyandırsa bile ikinci sayfada sinir bozucu hâle geliyor.
Animasyonu her sayfada tekrarlamayın. Oturum başına yalnızca bir kez gösterin. Sık gelen ziyaretçi için hiç göstermeyin; bunu tarayıcı belleğiyle basit bir şekilde ayarlamak mümkün.
Erişilebilirlik: harekete duyarlı ziyaretçiler
Bazı insanlar ekrandaki harekete karşı hassas; baş dönmesi, dikkat dağınıklığı ya da rahatsızlık yaşayabiliyorlar. İşletim sistemlerinde “hareketi azalt” ayarı var ve tarayıcılar bunu sayfaya bildirebiliyor. İyi bir logo animasyonu bu ayarı algılayıp animasyonu kapatır ve logoyu sabit gösterir.
Bu, ekstra bir özellik değil, temel sorumluluk. Animasyonun bilgi taşımadığından da emin olun: logonun anlamı animasyon olmadan da eksiksiz anlaşılmalı. Animasyon süs, içerik değil.
Hız ve performans
Animasyonlu logo sayfanın ilk saniyelerinde çalıştığı için, yüklenme hızını doğrudan etkileyebilir. Ağır bir JavaScript kütüphanesini sadece logo animasyonu için yüklemek, kazançtan çok kayıp getirir. Basit hareketlerde CSS yeterli; kütüphane gerektiren durumda yalnızca gerekli parçayı yükleyin.
Ayrıca animasyonun sayfa içeriğini ittirmediğinden emin olun: logo alanı sabit boyutta olsun, animasyon sırasında altındaki metin kaymasın. Bu kayma hem kullanıcıyı rahatsız ediyor hem de arama motorlarının sayfa deneyimi ölçümlerinde olumsuz görünüyor. Hız ve sayfa deneyimi konusunda SEO çalışmalarımızda sık bakılan noktalardan biri.
Test etmeden yayınlamayın
Animasyonu yalnızca güçlü bir bilgisayarda izlemek yanıltıcı. Orta seviye bir telefonda, yavaş bağlantıda ve pil tasarrufu modunda deneyin. Animasyon takılıyorsa ya da geç başlıyorsa sadeleştirin. Farklı tarayıcılarda da bakın; bir tarayıcıda akıcı olan hareket diğerinde beklenmedik davranabilir. Animasyonun kapatıldığı durumu (hareket azaltma ayarı) da ayrıca test edin: logo hâlâ doğru görünüyor mu?
Ne zaman animasyon değmez?
Her marka için animasyonlu logo mantıklı değil. Ciddi ve resmî bir izlenimin gerektiği alanlarda (hukuk, finans, sağlık) fazla oynak bir logo güveni zedeleyebilir. Hızlı bilgi arayan ziyaretçi için (acil servis, randevu, iletişim) her bekleme bir sürtünme. Sitenizin trafiğinin çoğu mobil ve düşük güçlü cihazlardansa, sadelik daha iyi.
Öte yandan yaratıcı sektörlerde (ajans, tasarım stüdyosu, kafe, etkinlik) küçük bir hareket, markanın canlı ve özgün olduğunu hissettiriyor. Kriter şu: animasyon markanın kişiliğini mi yansıtıyor, yoksa “yapabildiğimiz için” mi yapıldı?
Yükleme ekranı ile logo animasyonunu karıştırmayın
Bazı siteler, sayfa yüklenirken tam ekran bir logo animasyonu gösteriyor. Bu, sayfa aslında hazırken ziyaretçiyi bekletmek anlamına gelebilir. Eğer animasyonun sayfa yüklenmesini beklemek gibi bir işlevi yoksa, yani yalnızca “gösteri” içinse, ziyaretçinin zamanını çalıyorsunuz. Gerçek bir yükleme gecikmesi varsa, küçük bir logo animasyonu beklemeyi hoş bir hâle getirebilir; ama gecikme yokken yapay bir bekleme yaratmayın.
Daha iyi bir yaklaşım, logo animasyonunu sayfa gezinmesinde küçük bir dokunuş olarak kullanmak: üst çubuktaki logo, aşağı kaydırıldığında küçülerek sadeleşsin ya da fare üzerine gelince hafifçe renk değiştirsin. Bu tür mikro hareketler dikkati dağıtmadan markaya canlılık katıyor.
Örnek: bir kafenin logosu
Bir kafenin logosunda bir fincan simgesi ve yukarı çıkan buhar çizgisi olduğunu düşünün. Buhar çizgisinin çok yavaş, neredeyse fark edilmez bir dalgalanması, marka kişiliğini yansıtıyor: sıcak, sakin. Ziyaretçi bunu bilinçli olarak fark etmese bile bir “canlılık” hissi alıyor. Bu hareket dikkat çeken bir gösteri değil, atmosferin parçası. Böyle bir animasyon, düşük güçlü cihazlarda bile sorun çıkarmayacak kadar hafif.
Aynı kafenin logosuna sayfa açılırken dönen, sıçrayan bir fincan animasyonu ise eğlenceli görünse de, üçüncü ziyarette usandırır. Küçük, yavaş ve tekrarsız hareketler daha uzun ömürlü.
Animasyonu tasarım aşamasında düşünün
Logoyu çizen kişiye baştan söyleyin: “Bu logo ileride animasyonlanabilir.” Katmanların düzgün adlandırılması, şekillerin mantıklı gruplanması ve harflerin ayrı yollar olarak tutulması, sonradan animasyon yapmayı çok kolaylaştırıyor. Dağınık katmanlı bir logoyu animasyona hazırlamak, baştan çizmekten pahalı olabilir.
Web sitesinde logo animasyonu düşünüyorsanız web tasarım ekibimizle konuşabilirsiniz. Ayrıca iletişim sayfamızdan ya da 0540 022 64 22 WhatsApp hattından mevcut logonuzu gönderin; animasyona uygun olup olmadığına birlikte bakalım.