Dijital Pazarlama

Hareketli Logo Nasıl Olmalı? Reels, TikTok ve Web İçin Logo Animasyonu

Talha Aslan 15 dakikalık okuma 5 görüntülenme

Kısa cevap

Hareketli logo nasıl olmalı?

Hareketli logo, logonuzun kısa, kontrollü ve her yerde aynı biçimde tekrarlayabileceğiniz bir hareketle sahneye gelmesidir. İyi bir hareketli logo ilk saniyede okunur, sessizken de anlam taşır, dikey ve kare kırpmada bozulmaz, web sitesini yavaşlatmaz ve hareket hassasiyeti olan kullanıcıya azaltılmış hareket seçeneği bırakır.

Tüm detaylar ve örnekler için yazıya devam edin

Bu rehberde Talha Aslan ve ekibi olarak logo animasyonunu tek bir soru üzerinden ele alıyoruz: aynı hareketi Reels, TikTok ve web sitesinde nasıl doğru kullanırsınız? Süre, döngü, kırpma, dosya formatı, sayfa hızı ve erişilebilirlik başlıklarında karar tabloları ve kontrol listeleri bulacaksınız. Genel marka teorisine girmiyoruz; amacımız, tasarımcınıza ya da ekibinize net bir brif verebilmeniz.

Hareketli logo hangi işi görmeli?

Hareketli logo bir süs değil, bir imzadır. Bu nedenle önce görevini yazın. Pratikte üç görev öne çıkar: videonun sonunda ya da başında markayı imzalamak, iki sahne arasında geçiş sağlamak ve web sitesinde kısa bir karşılama ya da bekleme anı yaratmak. Her görev farklı süre, farklı format ve farklı erişilebilirlik kuralı ister.

Örneğin bir Reels videosunun son karesindeki imza, sesli ve sessiz izlemede aynı mesajı vermelidir. Web sitesindeki başlık logosu ise ziyaretçiyi bekletmemeli ve sürekli dönmemelidir. Görevi belirlemeden animasyona başlarsanız, her kanal için ayrı bir yama yapmak zorunda kalırsınız.

Ayrıca şunu ayırın: animasyon, logonun kendisini değiştirmez. Logonuz okunmuyor, eskimiş görünüyor ya da küçük boyutta dağılıyorsa sorun hareket değil, işaretin kendisidir. Bu durumda logo yenileme ne zaman gerekir sorusuna bakmanız daha doğru olur. Hareket, sağlam bir işareti güçlendirir; zayıf bir işareti kurtarmaz.

Hareketli logo kaç saniye sürmeli?

Kesin bir standart yok, ama bizim saha tecrübemize dayalı başlangıç aralığı şöyle: sosyal medya imzası için yaklaşık iki ile dört saniye, sahne geçişi için bir saniyenin altı, web sitesinde tek seferlik karşılama için bir ile iki saniye. Bu aralık bir garanti değil, brif için bir başlangıç noktasıdır.

Süreyi belirlerken izleyicinin o anda ne yaptığını düşünün. Reels ya da TikTok akışında izleyici kaydırmaya hazırdır; dolayısıyla uzun bir giriş animasyonu, videonun asıl içeriğini geciktirir. Web sitesinde ise ziyaretçi bir bilgi arar; karşılama animasyonu menüye ya da başlığa erişimi geciktirmemelidir.

Bir de erişilebilirlik sınırı var. W3C, kendiliğinden başlayan, beş saniyeden uzun süren ve başka içerikle aynı anda görünen hareket için kullanıcıya durdurma, gizleme ya da duraklatma yolu ister. Bu kural, WCAG 2.2.2 Duraklat, Durdur, Gizle ölçütünde yazılıdır. Yani web sitesindeki logo animasyonunu kısa tutmak hem dikkat hem de uyum açısından işinizi kolaylaştırır.

İlk saniyede izleyici ne görmeli?

İlk saniyede izleyici markayı tanımalıdır. Bu yüzden animasyonu "boş ekrandan yavaşça beliren logo" mantığıyla kurmayın. Akışta ilk kare çoğu zaman küçük bir önizleme olarak da görünür; o kare boşsa ya da logo yalnızca bir çizgi halindeyse, izleyici neyi izlediğini anlamaz.

Pratik kural basit: animasyonun ilk karelerinde logonun tanınabilir bir parçası, örneğin sembol ya da renk, zaten ekranda olsun. Hareket bu parçayı tamamlasın. Böylece videoyu ilk anda kaydıran biri bile markanızı bir kez görmüş olur.

Videonun kendisinde ilk saniyelerin nasıl kurgulanacağı ayrı bir konu. Kanca, metin ve görsel sırası için Reels ilk 3 saniye kanca rehberimize bakabilirsiniz. Logo animasyonu orada kancanın yerine geçmemeli; çoğu durumda logo imzasını videonun sonuna ya da köşede küçük bir işarete bırakmak daha verimlidir.

  • İlk kare boş olmasın, logonun tanınabilir bir parçası görünsün.
  • Logonun tam hali, sürenin ilk yarısında ekranda olsun.
  • Son kare temiz ve sabit kalsın, çünkü önizleme ve kapak olarak o kare de görünebilir.

Hareket dilini marka kimliğinizden nasıl türetirsiniz?

Hareket dili, logonuzun biçiminden ve markanızın tonundan gelmelidir. Yuvarlak, yumuşak bir işaret için esnek ve yaylanan bir hareket doğal durur. Keskin köşeli, mühendislik çağrışımlı bir işaret içinse düz, net ve hızlı bir hareket daha tutarlıdır. Rastgele bir şablon efekti, logonuzu başka markalara benzetir.

Örnek senaryo: bir mimarlık ofisinin logosu ince çizgilerden oluşuyor. Bu durumda çizgilerin sırayla çizilmesi, işaretin mantığıyla örtüşür. Aynı efekt, kalın ve dolgulu bir yemek markası logosunda ise yapay durur; orada ölçek ve hafif bir sıçrama daha uygun olabilir.

Hareket dilini yazılı hale getirin: hız eğrisi, süre, yön ve hangi öğenin önce geldiği. Bu kararlar sabit tasarımın renk ve tipografi kuralları kadar önemlidir. Eğer elinizde net bir marka kimliği yoksa, hareket dili her yeni videoda yeniden tartışılır. Basılı bir kimliği dijitale taşıyorsanız, basılı kurumsal kimliği dijitale taşıma yazımız da bu kararların sırasını anlatıyor.

Döngü ne zaman doğru, ne zaman yorucu?

Döngü, yani animasyonun başa sarıp tekrar oynaması, yalnız belirli yerlerde işe yarar. Bekleme ya da yükleme göstergesinde döngü anlamlıdır, çünkü kullanıcı bir işlemin sürdüğünü görmek ister. Başlıktaki ya da menüdeki logoda sürekli döngü ise dikkati içerikten çeker ve bir süre sonra rahatsız eder.

Sosyal medyada durum farklıdır. Kısa videolar platformda kendiliğinden başa sarabilir; dolayısıyla logo animasyonunun son karesi ile ilk karesi arasındaki geçiş sert olmamalıdır. Son kareden ilk kareye atlayan bir logo, döngüde göz kırpması gibi algılanır.

Web sitesi için önerimiz şu: logo animasyonu sayfa açılışında bir kez oynasın ve sabit hale gelsin. Döngü gerçekten gerekiyorsa beş saniye sınırını ve durdurma seçeneğini planlayın. Ayrıca yanıp sönme etkisi yaratan hızlı döngülerden kaçının; bu konu aşağıdaki erişilebilirlik bölümünde ayrıca geçiyor.

Sessiz izlemede logo animasyonu anlamını korur mu?

Korumalıdır. Sosyal medyada birçok kullanıcı videoyu sesi kapalıyken izler; tarayıcılar da web sitesinde sesli videonun kendiliğinden başlamasını genellikle engeller. Bu nedenle logo animasyonunun anlamı sese bağlı olmamalıdır.

Sesli bir imza kullanıyorsanız, ses ve hareketi birlikte tasarlayın ama ikisini ayrı ayrı da test edin. Sessiz izlemede hareket tek başına markayı imzalamalı; sesli izlemede ise ses, hareketin vurgusunu desteklemelidir. Ses kimliğini nasıl kuracağınızı sonic logo rehberimizde ayrıca anlattık.

Metin içeren animasyonlarda bir ayrıntıya dikkat edin. Logonun altındaki slogan ekranda çok kısa kalıyorsa, izleyici onu okuyamaz. Videonun genelinde altyazı ve alt metin gibi erişilebilirlik adımları için sosyal medyada erişilebilirlik yazımıza bakabilirsiniz.

Dikey, kare ve yatay kırpmada logo neden bozulur?

Çünkü animasyonu tek bir oranda tasarlarsınız ve diğer oranları sonradan kırparak elde edersiniz. Yatay bir sahnede soldan sağa kayan bir logo, dikey bir kırpmada ekrandan taşar. Kare bir kırpmada ise hareketin başı ya da sonu kadrajın dışında kalabilir.

Çözüm, animasyonu baştan oranlara göre planlamaktır. Hareketin ana alanını merkezde tutun ve yatay yönde uzun yolculuklardan kaçının. Dikey sürüm için ayrı bir kompozisyon hazırlamak, yatay sürümü kırpmaktan neredeyse her zaman daha temiz sonuç verir.

Logonuzun yatay, dikey ve sembol sürümleri varsa bu iş kolaylaşır. Dar bir kadrajda yalnız sembolü canlandırıp kelime işaretini sabit bir satır olarak ekleyebilirsiniz. Logo varyasyonlarının hangi boyutta hangisinin kullanılacağını responsive logo varyasyonları yazımızda ele aldık; animasyon da aynı aileyi izlemelidir.

Platform arayüzündeki güvenli alanı nasıl planlarsınız?

Reels ve TikTok ekranında videonun üzerine profil adı, açıklama metni, beğeni ve paylaşım düğmeleri gibi öğeler biner. Logonuz bu öğelerin altında kalırsa animasyon ne kadar iyi olursa olsun izleyici onu göremez.

Bu nedenle dikey kompozisyonda logoyu ekranın üst ve alt kenarına, sağ kenardaki düğme sütununa yaslamayın. Platformların önerdiği güvenli alan ölçüleri zaman zaman değişir; güncel değeri ilgili platformun resmi reklam ya da içerik üretici belgelerinden kontrol edin. Ölçüyü ezbere yazmak yerine her proje başında bir kez doğrulamak daha sağlıklıdır.

  1. Dikey sahnenin üzerine platform arayüzünü taklit eden basit bir kılavuz katmanı koyun.
  2. Logonun hem hareket sırasında hem de son karede bu katmanın dışında kaldığını kontrol edin.
  3. Videoyu telefonda gerçek akışta önizleyin; masaüstü önizlemesi arayüzü göstermez.
  4. Kapak görselini ayrıca kontrol edin, çünkü profil ızgarası kapağı farklı bir oranda gösterebilir.

Hareketli logo için hangi dosya formatını seçmelisiniz?

Doğru format, logonun nerede oynayacağına bağlıdır. Sosyal medya için video dosyası, web sitesi için ise hafif ve ölçeklenebilir formatlar öne çıkar. Aşağıdaki tablo, en sık sorulan dört seçeneği karşılaştırıyor.

FormatEn uygun yerGüçlü yanıDikkat edilecek nokta
MP4 videoReels, TikTok, web sitesinde arka plan ya da tanıtımHer platformda oynar, sıkıştırması verimlidirŞeffaf arka plan desteği sınırlıdır, metin keskinliği bit hızına bağlıdır
Lottie (JSON tabanlı vektör animasyon)Web sitesi ve mobil uygulama arayüzüVektör olduğu için her boyutta keskin kalır, dosya çoğu zaman küçüktürOynatıcı kitaplık gerektirir, karmaşık efektler desteklenmeyebilir
SVG animasyon (CSS ile)Başlık logosu, basit giriş hareketiEk kitaplık gerekmez, kodla kontrol edersinizKarmaşık sahnelerde yönetmesi zorlaşır
GIFE-posta gibi video oynatmayan ortamlarNeredeyse her yerde açılırDosya boyutu büyüktür, renk sayısı kısıtlıdır, kenarlar tırtıklı görünebilir

Kısacası tek bir dosya yetmez. Sağlam bir teslim paketinde en azından bir kaynak dosya, sosyal medya için video çıktıları ve web için hafif bir sürüm bulunur.

Web sitesinde GIF yerine neden video kullanmalısınız?

Çünkü hareketli GIF dosyaları çoğu zaman aynı içeriğin video sürümünden çok daha büyüktür. Google'ın web.dev ekibi, hareketli GIF yerine video kullanma rehberinde 3,7 MB'lık bir GIF'in MP4 olarak yaklaşık 551 KB'a, WebM olarak yaklaşık 341 KB'a indiği bir örnek veriyor.

Aynı rehber, GIF davranışını video ile taklit etmek için dört özelliği birlikte kullanmayı öneriyor: kendiliğinden oynatma, döngü, sessiz başlatma ve sayfa içinde oynatma. Ayrıca WebM ve MP4 sürümlerini birlikte sunup tarayıcının desteklediğini seçmesine izin vermeyi anlatıyor.

Burada bir denge kurmanız gerekir. Kendiliğinden oynayan ve döngüye giren bir video, yukarıda andığımız beş saniye kuralına takılabilir. Dolayısıyla logo videosunu ya kısa tutup bir kez oynatın ya da kullanıcıya durdurma kontrolü verin. GIF'i yalnızca video oynatmayan ortamlar için saklayın.

Lottie ve SVG animasyonu ne zaman mantıklı?

Lottie ve SVG, web sitesi ve uygulama arayüzünde keskinlik ile hafiflik istediğinizde mantıklıdır. Video bir piksel dizisidir; yüksek çözünürlüklü ekranlarda büyütüldüğünde yumuşar. Vektör tabanlı animasyon ise her ekranda keskin kalır ve renkleri kodla değiştirmenize izin verir.

SVG animasyonu en basit yoldur: logonun parçalarını CSS ile hareket ettirirsiniz, ek bir oynatıcı yüklemezsiniz. Başlıktaki logonun bir kez belirmesi ya da sembolün hafifçe dönmesi için çoğu zaman yeterlidir. Lottie ise tasarımcının animasyon yazılımında hazırladığı daha karmaşık hareketi JSON verisi olarak taşır ve bir oynatıcı kitaplıkla gösterir.

Seçim yaparken şu soruyu sorun: animasyon sayfanın ilk görünen alanında mı? Öyleyse oynatıcı kitaplığın boyutunu ve yüklenme sırasını da hesaba katın. Öte yandan sosyal medya için Lottie ya da SVG doğrudan çözüm değildir; orada yine video çıktısına ihtiyaç duyarsınız.

Hareketli logo sayfa hızını nasıl etkiler?

Hareketli logo, sayfanın ilk görünen alanındaysa hız ölçümüne doğrudan girebilir. Google'ın Largest Contentful Paint (LCP, en büyük içerikli boyama) tanımında hareketli görsellerde ilk karenin gösterildiği an, videolarda ise kapak görselinin yüklendiği an ya da ilk karenin gösterildiği an, hangisi önce olursa, esas alınır.

Yani büyük bir logo videosu sayfanın en büyük öğesi olursa, onun ilk karesi ne kadar geç gelirse LCP de o kadar gecikir. Bu nedenle ilk görünen alandaki logo animasyonu için hafif bir kapak görseli belirleyin, dosyayı sıkıştırın ve gerçekten gerekmedikçe büyük boyutlu video kullanmayın.

Ayrıca animasyon için ek bir JavaScript kitaplığı yüklüyorsanız, bunun ana iş parçacığını meşgul edip etmediğine bakın. LCP'nin ayrıntılarını ve iyileştirme adımlarını LCP rehberimizde anlattık; logo animasyonu bu adımların dışında kalmamalıdır.

Web sitesinde hangi özellikleri canlandırmalısınız?

Akıcı bir logo animasyonu için mümkün olduğunca yalnız konum değiştirme, ölçek, döndürme ve saydamlık gibi özellikleri canlandırın. web.dev'in yüksek performanslı animasyon rehberi, tarayıcının bu işi düzen hesabı ve yeniden boyama yapmadan yürütebilmesi için transform ve opacity özelliklerini öneriyor.

Aynı rehber, düzeni etkileyen özellikleri, örneğin bir öğenin üst ya da sol konum değerini, canlandırmaktan kaçınmanızı söylüyor; çünkü bu tür animasyonlar akıcı kalmakta zorlanır. Logo genişliğini ya da kenar boşluğunu değiştiren bir animasyon, sayfadaki başka öğeleri de kaydırabilir ve düzen kayması yaratabilir.

Logo animasyonu çoğu zaman sayfadaki tek hareketli öğe değildir. Düğmeler, menüler ve kartlardaki küçük hareketlerle birlikte tutarlı bir sistem kurmak için web sitesinde mikro animasyon kullanımı yazımıza bakın. Hız eğrisi ve süre kararlarını burada da ortak tutmanız, sitenin tek elden çıktığını hissettirir.

prefers-reduced-motion ile hareket hassasiyetine nasıl saygı gösterirsiniz?

prefers-reduced-motion, kullanıcının cihazında hareketi azaltma ayarını açıp açmadığını tarayıcıya bildiren bir CSS medya özelliğidir. MDN'nin prefers-reduced-motion belgesine göre bu ayar, büyük ölçekleme ya da kaydırma animasyonlarından rahatsız olan, örneğin iç kulak kaynaklı denge sorunu yaşayan kişiler için önemlidir.

Bu ayar macOS, iOS, Windows ve Android gibi sistemlerin erişilebilirlik bölümünde bulunur. Kullanıcı ayarı açtığında siteniz bunu algılayabilir ve logo animasyonunu değiştirebilir. Burada amaç animasyonu her zaman tamamen silmek değildir; hareketi sadeleştirmek de yeterli olabilir.

  • Kaydırma ve büyütme yerine yalnızca yumuşak bir belirme kullanın.
  • Animasyonu tamamen kapatıp logonun son karesini sabit gösterin.
  • Döngüyü kaldırın ve hareketi tek seferle sınırlayın.
  • Arka plandaki logo videosunu oynatmayın, yerine kapak görselini gösterin.

Hangi seçeneği kullanacağınızı hareket dili belgenize yazın. Böylece geliştirici, her sayfada aynı kararı tekrar vermek zorunda kalmaz.

WCAG hareketli logo için ne istiyor?

WCAG, yani Web İçeriği Erişilebilirlik Yönergeleri, logo animasyonunu doğrudan adıyla anmaz; ama hareketli içerik için üç ölçüt doğrudan ilgilidir. Bunları bilmek, hem kullanıcıyı korur hem de sonradan yeniden tasarım yapmanızı önler.

  • 2.2.2 Duraklat, Durdur, Gizle (A düzeyi): kendiliğinden başlayan, beş saniyeden uzun süren ve başka içerikle aynı anda görünen hareket için durdurma yolu gerekir.
  • 2.3.1 Üç Yanıp Sönme ya da Eşik Altı (A düzeyi): içerik herhangi bir saniyede üç kereden fazla yanıp sönmemelidir. W3C, bu ölçütün açıklamasında doygun kırmızı yanıp sönmeyi ayrıca ele alır.
  • 2.3.3 Etkileşimden Doğan Animasyon (AAA düzeyi): kullanıcının bir etkileşimiyle tetiklenen ve işlev için şart olmayan hareketi kapatabilmesi önerilir.

Pratik sonuç şu: logonuzu flaş gibi yanıp söndürmeyin, uzun döngüye sokmayın ve azaltılmış hareket ayarına yanıt verin. Genel çerçeve için web erişilebilirliği ve WCAG yazımız iyi bir başlangıçtır.

Renk ve geçişlerde nelere dikkat etmelisiniz?

Animasyon, renkleri sabit tasarımdan farklı gösterebilir. Video sıkıştırması renk geçişlerinde bantlaşma yaratabilir; düz renk alanları ise kayıt ayarına göre bir ton açık ya da koyu çıkabilir. Bu yüzden logo animasyonunun son karesini sabit logonuzla yan yana koyup karşılaştırın.

Renk tutarlılığı yalnız ekranda değil, baskıdan dijitale geçişte de sorun çıkarır. Aynı rengin farklı ortamlarda neden farklı göründüğünü marka rengi baskıda neden farklı çıkıyor yazımızda açıkladık. Animasyon dosyasında da aynı kaynak renk değerlerini kullanın.

Kelime işaretini harf harf canlandırıyorsanız yazı tipine de dikkat edin. Harflerin tek tek ayrılması, bazı yazı tiplerinde okunabilirliği bozar. Logo yazı tipini seçerken bu tür kullanımları da düşünmek için logo font seçimi rehberimize göz atabilirsiniz. Üstelik ara karelerde harflerin üst üste binmediğini de kontrol edin.

Teslim paketinde hangi dosyalar olmalı?

Logo animasyonu bir kez yapılıp unutulan bir dosya değildir. Ekibiniz onu aylarca farklı videolarda, sunumlarda ve sitede kullanacaktır. Bu nedenle teslim paketini baştan tanımlayın.

  • Düzenlenebilir kaynak dosya ve kullandığınız yazı tipleri ile lisans bilgisi.
  • Dikey, kare ve yatay oranlarda ayrı video çıktıları.
  • Şeffaf arka planlı bir sürüm, videoların üzerine bindirmek için.
  • Web için hafif bir sürüm: SVG, Lottie ya da kısa bir video ile kapak görseli.
  • Azaltılmış hareket için sade bir sürüm ya da sabit son kare.
  • Süre, hız eğrisi, renk değerleri ve kullanım alanlarını anlatan kısa bir hareket kılavuzu.

Hareket kılavuzunu kurumsal kimlik kılavuzunuzun bir bölümü olarak saklayın. Kılavuzun web sitesine nasıl uygulanacağını kurumsal kimlik kılavuzunu web sitesine uygulamak yazımızda adım adım anlattık.

Farklı ekipler aynı animasyonu nasıl tutarlı kullanır?

Tutarlılık, dosyaların tek bir yerde durmasıyla başlar. Sosyal medya ekibi, web geliştiricisi ve sunum hazırlayan satış ekibi farklı klasörlerden farklı sürümler alırsa, birkaç ay içinde logonuzun üç ayrı hareketi oluşur.

Bu nedenle tüm sürümleri tek bir paylaşılan klasörde, açık adlarla saklayın. Dosya adında oranı, kullanım yerini ve sürüm tarihini belirtin. Ayrıca eski sürümleri arşiv klasörüne taşıyın ki kimse yanlışlıkla onları kullanmasın.

Son olarak yeni bir video şablonu ya da sayfa tasarımı hazırlayan herkesten, hareket kılavuzundaki kontrol listesini uygulamasını isteyin. Kısa bir gözden geçirme adımı, markanızın hareketini yıllarca aynı tutar. Üstelik yeni katılan ekip arkadaşları da kuralları sorulara gerek kalmadan öğrenir.

Animasyonlu logoyu ayrıca korumanız gerekir mi?

Animasyon, logonun kullanım biçimidir; markanın kendisi ise adınız ve işaretinizdir. Animasyona yatırım yapmadan önce markanın adını ve işaretini güvenceye almak daha sağlıklı bir sıradır. Hareketli işaretlerin tescili gibi özel konular ise ülkeye göre değişir ve uzmanlık ister.

Bu nedenle bu yazı hukuki danışmanlık değildir; tescil ve koruma soruları için bir marka vekili ya da avukata danışın. Yeni bir ad üzerinde çalışıyorsanız, önce marka adı müsait mi sorusunu yanıtlayın. Ardından animasyonu, kullanımı kesinleşmiş işaret üzerine kurun.

Ayrıca animasyonda kullandığınız yazı tipi, müzik ve ses efektlerinin lisansını da kontrol edin. Sosyal medyada lisanssız bir ses, videonuzun sesinin kaldırılmasına yol açabilir.

Logo animasyonunu sunum ve e-posta imzasında kullanmalı mısınız?

Sunumlarda kullanabilirsiniz, ama ölçülü olun. Açılış ve kapanış slaytında kısa bir logo animasyonu, sunumu markanıza bağlar. Her slayt geçişinde logoyu tekrar oynatmak ise dinleyicinin dikkatini konudan uzaklaştırır. Bu yüzden sunum şablonunuza animasyonu yalnız iki noktada koyun.

E-posta imzası farklı bir ortamdır. E-posta istemcileri video oynatmaz, bazıları hareketli görseli yalnızca ilk karesiyle gösterir ve bazıları görselleri varsayılan olarak engeller. Dolayısıyla imzada sabit logo çoğu durumda daha güvenli bir seçimdir. İmzada logonun hiç görünmemesi gibi sorunlarla karşılaşıyorsanız Outlook e-posta imzasında logo görünmüyor yazımız olası nedenleri anlatıyor.

Hareketli imza kullanmaya karar verirseniz, ilk karenin tek başına anlamlı olduğundan emin olun. Ayrıca dosya boyutunu küçük tutun, çünkü her e-postayla birlikte tekrar tekrar yüklenecek.

Tasarımcıya brif verirken neleri yazmalısınız?

İyi bir brif, revizyon turlarını azaltır. Tasarımcıya "logomuz hareket etsin" demek yerine kullanım yerlerini, süreyi ve kısıtları yazın. Böylece tasarımcı ilk taslakta doğru oranda ve doğru sürede çalışır.

  • Animasyonun görevi: video imzası, sahne geçişi ya da web karşılaması.
  • Kullanım yerleri ve oranlar: dikey, kare, yatay ve web başlığı.
  • Hedef süre aralığı ve döngü olup olmayacağı.
  • Sesli imza isteyip istemediğiniz ve sessiz izlemedeki beklentiniz.
  • Azaltılmış hareket sürümü ve yanıp sönme sınırı gibi erişilebilirlik koşulları.
  • Teslim edilecek dosya formatları ve kaynak dosya beklentisi.

Brife hareket diline örnek olacak birkaç sıfat da ekleyin: sakin, net, enerjik ya da oyunbaz gibi. Ancak başka bir markanın animasyonunu birebir örnek göstermeyin; bu, sonucu o markaya benzetir.

Yayına almadan önce hangi kontrolleri yapmalısınız?

Son kontrol listesi, sorunların çoğunu yayından önce yakalar. Aşağıdaki adımları her yeni logo animasyonu için sırayla uygulayın.

  1. İlk karede logonun tanınabilir bir parçası görünüyor mu?
  2. Animasyon sessizken de markayı imzalıyor mu?
  3. Dikey, kare ve yatay sürümlerde logo kadrajın ve platform arayüzünün dışında kalmıyor mu?
  4. Son kare sabit ve temiz mi, döngüde sert bir atlama var mı?
  5. Herhangi bir saniyede üç kereden fazla yanıp sönme var mı?
  6. Web sürümü azaltılmış hareket ayarına yanıt veriyor mu?
  7. Beş saniyeden uzun hareket için durdurma yolu var mı?
  8. İlk görünen alandaki dosya LCP'yi geciktiriyor mu?
  9. Renkler sabit logonuzla aynı mı?

Bu listeyi telefonda, gerçek akışta ve gerçek sitede deneyin. Tasarım yazılımındaki önizleme, platformun arayüzünü ve sıkıştırmasını göstermez.

Hareketli logo için profesyonel destek ne zaman gerekir?

Elinizde net bir logo ailesi, renk değerleri ve yazı tipi kuralları varsa, kısa bir logo animasyonunu iç ekibinizle de hazırlayabilirsiniz. Ancak logo varyasyonlarınız eksikse, hareket dili tanımlı değilse ya da web, sosyal medya ve sunum için farklı ekipler farklı animasyonlar üretiyorsa, sorun animasyondan önce kimlik sistemindedir.

Bu durumda logoyu, varyasyonlarını, renk ve tipografi kurallarını ve hareket dilini tek bir sistem olarak ele almak gerekir. Talha Aslan ve ekibi olarak kurumsal kimlik tasarımı sürecinde hareket kılavuzunu da bu sistemin parçası olarak hazırlıyoruz; böylece her yeni video ve sayfa aynı kurallarla ilerler. Kendi ekibinizle ilerleyecekseniz, yukarıdaki tablo ve kontrol listesi iyi bir brif zemini sunar.

Temel rehber: Dijital Pazarlama Nedir? Türleri, örnekleri ve nasıl yapıldığı, beynin içinden geçen etkileşimli bir filmle tek sayfada.

Sıkça Sorulan Sorular

Hareketli logo kaç saniye olmalı?
Kesin bir standart yok. Saha tecrübemize dayalı başlangıç aralığı, sosyal medya imzası için yaklaşık iki ile dört saniye, web sitesindeki tek seferlik karşılama için bir ile iki saniyedir. Bu bir garanti değildir. Web sitesinde beş saniyeyi aşan, kendiliğinden başlayan hareket için WCAG durdurma yolu ister.
Web sitesinde logo animasyonu için GIF mi video mu kullanmalıyım?
Çoğu durumda video ya da vektör animasyon daha iyidir. web.dev, hareketli GIF dosyalarının aynı içeriğin MP4 ve WebM sürümlerinden çok daha büyük olduğunu örnekle gösteriyor. Basit bir başlık logosu için CSS ile canlandırılmış SVG, karmaşık hareket için Lottie düşünülebilir. GIF'i yalnız video oynatmayan ortamlara bırakın.
Logo animasyonu sesli mi olmalı?
Ses isteğe bağlıdır ama animasyonun anlamı sese bağlı olmamalıdır. Birçok kullanıcı sosyal medyada sesi kapalı izler ve tarayıcılar sesli videonun kendiliğinden başlamasını genellikle engeller. Sesli bir imza kullanıyorsanız, hareketin sessizken de markayı tek başına imzaladığını mutlaka test edin. Sesin lisansını da ayrıca kontrol edin.
prefers-reduced-motion ayarı açık olan kullanıcıya ne göstermeliyim?
Hareketi sadeleştirin ya da kapatın. Kaydırma ve büyütme yerine yumuşak bir belirme, döngü yerine tek seferlik hareket ya da doğrudan logonun sabit son karesi iyi seçeneklerdir. Arka planda oynayan logo videosu yerine kapak görseli göstermek de uygun bir yoldur. Seçtiğiniz yolu hareket kılavuzunuza yazın.
Dikey video için logo animasyonunu yeniden mi tasarlamalıyım?
Çoğu zaman evet. Yatay bir animasyonu dikeye kırptığınızda yatay hareket kadrajdan taşar ve logo platform arayüzünün altında kalabilir. Hareketi merkezde tutan ayrı bir dikey kompozisyon, çoğu durumda kırpılmış sürümden daha temiz bir sonuç verir. Güvenli alan ölçülerini platformun güncel resmi belgelerinden kontrol edin.
Hareketli logo LCP değerini etkiler mi?
Sayfanın ilk görünen alandaki en büyük öğesiyse etkiler. LCP tanımında videolarda kapak görselinin yüklenmesi ya da ilk karenin gösterilmesi, hangisi önce olursa, esas alınır. Hafif bir kapak görseli belirlemek, dosyayı sıkıştırmak ve gereksiz kitaplık yüklememek bu etkiyi azaltır. Değişikliği gerçek kullanıcı verisiyle de izleyin.
  • hareketli logo
  • logo animasyonu
  • marka kimliği
  • reels
  • tiktok
  • web erişilebilirliği
  • prefers-reduced-motion
Paylaş:
Talha Aslan

Google Partner dijital pazarlama uzmanı. 2012’den beri SEO, Google Ads, web tasarım ve e-ticaret projelerinde sahada; bu blogda gördüğünüz her yazı o deneyimden çıkar.

Sıradaki proje

Projeniz için teklif alın.

Talebiniz doğrudan Talha Aslan ve ekibine ulaşır: stratejiyi Talha kurar, uygulamayı deneyimli ekip yürütür. Aynı gün dönüş yapar, kapsamı, takvimi ve tutarı yazılı teklifle 1 iş günü içinde göndeririz.