Flash Sonrası Dönemde Web Animasyonu

Bu şiddetli rekabet ortamında, şirketler çılgınca insanların dikkatini çekmenin ve elde tutmanın yollarını arıyor. Günlük hayatımızı sürdürürken, sokaktaki animasyonlu reklamlardan, cep telefonlarımızdaki videolardan ve sosyal medya yayınlarımızdan bize fışkıran sonsuz görsel uyarı akışı, dikkatimizi çekmek için yarışan sürekli bir hareket duygusu yaratıyor.

Çevremizdeki harekete karşı anlık tepki, hayatta kalma ihtiyacından doğdu ve potansiyel olarak tehdit edici veya zararlı olarak algılanan çevresel uyaranlar tarafından tetiklendi; insanlar hareket eden şeylere ekstra dikkat ederler. Gözümüzün köşesinden hızla hareket eden bir şey yakaladığımızda, beyin bizi bir saniyede uyarır çünkü bilinçaltımız, bilinçli zihnimiz bilgiyi işlemek için zaman bulamadan önce tehlikeye tepki vermiştir.

Reklamcılar bunu biliyor ve bu yüzden otobüs duraklarında ve metro platformlarında hareketli sokak reklamları, sosyal medya akışlarında ortaya çıkan video reklamları ve tam hareketli videolu elektronik reklam panoları var. Teknik, pazarlama mesajlarını iletmek için tasarlanmış bir-iki vuruş efektidir. Birincisi, dikkatimizi çekerek, ikincisi ise mesajı iletmek için video ve animasyon kullanmak.

Statik bir resim bin kelimeye bedelse, bir animasyon ne kadar eder?

Web animasyonunun devreye girdiği yer burasıdır. Web tasarımcıları dikkatimizi çekip tutmayı ve belki de beklenmedik bir zevk sarsıntısı eklemeyi umuyorlar. Web animasyonu, karmaşık bir süreç veya fikirdeki çeşitli adımları görselleştirmek, basit bir pazarlama mesajını göstermek veya bir web sayfasındaki şeyleri insanlar kaydırırken doğal ve akıcı bir şekilde hareket ettirmek için kullanılabilir - yine bir şeye dikkat çekmek için.

Web Animasyonu Nasıl Başladı, GIF'lerin Yükselişi

World Wide Web'in ilk günlerinde, işler oldukça durağan ve sıkıcıydı. Web sayfaları çoğunlukla grafik tasarım ve baskı dünyasından gelen düzenlere dayanıyordu. Bununla birlikte, bazı tasarımcılar, teknik ve bant genişliği zorluklarına rağmen, daha dinamik ve çekici hale getirmek için erken web animasyonu biçimlerini dahil etmek için uyumlu bir çaba sarf ettiler. Bir web sitesine bir GIF animasyonunun ilk eklemelerinden biri 1995'te Jeffrey Zeldman'ın Batman Forever'ındaydı. Ziyaretçiler, Batman'in bir resim dizisi olarak canlandırılan onlara doğru uçuşuyla karşılandı.

Batman Forever promosyon sitesi o zamanlar en popüler sitelerden biriydi. Diğer web tasarımcılarına ve geliştiricilerine, GIF web animasyonunu ilginç, göz alıcı bir unsur olarak web sitelerine dahil etmeleri için ilham verdi.

Hızlı ileri 20 yıl ve hareketli GIF'ler artık her yerde. Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram ve Facebook'talar. GIF'ler kısa döngü animasyonları, görüntü dizileri ve hatta kısa video döngüleri için uygundur. Talihsiz bir eksiklik, GIF dosya formatının değişken şeffaflığa sahip olmaması ve bir alfa kanalını desteklememesidir; bu nedenle, tüm pikseller ya tamamen opak ya da tamamen şeffaftır.

GIF animasyonları, web tasarımında bir rönesansın başlangıcıydı, ancak ideal değildiler. Özellikle çevirmeli bağlantı ve yavaş internet hızlarının ilk günlerinde, GIF'ler bant genişliği domuzlarıydı. Sonuç, düşük çözünürlüklü, pikselli bir diziydi. GIF'leri mümkün olan en küçük boyuta sıkıştırmak zorunda olan tasarımcıların dezavantajı, çok fazla renk taklidiyle sonuçlanan sınırlı bir 8 bitlik paletti. Bu, 21. yüzyılda yüksek hızlı internetin daha yaygın hale gelmesiyle değişti ve sonuç olarak, web animasyonu milyonlarca renkle daha iyi görünmeye ve daha yüksek kare hızlarıyla daha pürüzsüz hale geldi.

Flash Web Animasyonunun Şafağı

Büyük web animasyon patlaması, Macromedia'nın web eklentisini ve beraberindeki çerçeve tabanlı animasyon aracını duyurduğu 1996 yılında Flash'ın piyasaya sürülmesiyle geldi: Macromedia Flash (bir vektör animasyon programı olan FutureSplash Animator'ı satın aldıktan sonra). Flash, web'e yeni yetenekler getirmede öncü bir rol oynadı. Ses ve animasyondan etkileşim ve videoya kadar Flash, interneti ileriye taşımaya yardımcı oldu.

Etkileşimler içeren tüm sitelerde basit, yalın, vektör tabanlı web animasyonları oluşturma fırsatı, manzarayı dolduran (çok) birçok animasyonlu öğeyle web tasarımının “barok” dönemi olarak adlandırılabilecek olanı yarattı. Yine de Flash, dinamik web tasarımının olanaklarına bir bakış sunarak tasarımcıları denemeler yapmak için serbest bıraktı ve hızlı web tasarımı evrimi dönemini serbest bıraktı.

Flash animasyonları hafiftir ve yapılması nispeten kolaydır. Yalnızca birkaç kilobayt boyutundadırlar, SWF dosya biçiminde ve net vektör grafikleriyle ses kullanan bir dosyada dağıtılırlar. Web animasyonları oluşturmak, web sayfası yükleme sürelerine fazla bir şey eklemeyen basitleştirilmiş bir süreç haline geldi. Ancak tüm bunlara rağmen önemli bir dezavantaj kaldı - çalışması için bir tarayıcı eklentisi gerekliydi.

Ek olarak, Flash'taki karmaşık etkileşim, JavaScript'e benzer bir nesne yönelimli programlama dili olan ActionScript (AS) tarafından etkinleştirildi. ActionScript, başlangıçta basit 2B vektör animasyonlarını kontrol etmek için tasarlanmıştı, ancak daha sonra gelişmiş bir araca dönüştü.

Ne yazık ki, Flash animasyonunun duyarlı olması amaçlanmamıştı, tüm cihazlarda iyi çalışmadı ve sonunda tüm popüler mobil cihazlardan kaldırıldı. Dosya boyutu nispeten küçük olsa da, Flash iyi optimize edilmemişti ve CPU aç kaldı, bu da cep telefonlarında da bir sorundu. Flash döneminin sonu, Steve Jobs'un Apple mobil cihazlarında Flash'ı desteklememeye karar vermesiyle geldi.

Flash, PC döneminde, PC'ler ve fareler için oluşturuldu. Ancak mobil çağ, düşük güçlü cihazlar, dokunmatik arayüzler ve açık web standartları ile ilgilidir; tüm bunlar Flash'ın yetersiz kaldığı alanlardır.

Steve Jobs

Bugün Web Animasyonu

Günümüzde Flash'ın modası geçtiği için web animasyonu için farklı ihtiyaçlarımız var. Aletler esnek ve hafif olmalıdır. Web tasarımcıları, çeşitli ekran boyutlarını, tarayıcıları, en boy oranlarını, piksel yoğunluklarını ve daha fazlasını dikkate alarak farklı cihazlar (masaüstü, tablet ve mobil) için duyarlı ve uyarlanabilir içerik oluşturmalıdır. Web animasyonu başyapıtlarımız 5 inç, 720 piksellik bir mobil cihazdan 9,7 inçlik QXGA tablete ve 32 inçlik Retina 6K ekrana kadar çalışmak zorundadır.

Teknoloji, yeterince güçlü olmayan mobil cihazların bile çok zorlu web animasyonlarını ve yüksek çözünürlüklü video içeriğini işleyecek bant genişliğine ve işlem gücüne sahip olduğu bir noktaya geldi. Bu, web sitelerinin süper "meşgul" olması gerektiği anlamına gelmez. Her zaman olduğu gibi, animasyon, dinamik etkileşim ve statik öğeler arasında doğru dengeyi sağlamakla ilgilidir. Bugün çok sayıda süslü web animasyonu uygulayabiliyor olmamız, yapmamız gerektiği anlamına gelmiyor.

Web tasarımcıları/animatörleri ayrıca platformlar arası desteği de dikkate almalıdır. On yıl önce tasarımcılar, yarattıklarının bu kadar geniş bir cihaz yelpazesinde iyi görüneceğinden emin olmak zorunda değildi. Farklı en boy oranları, portre ve yatay yönler ile çeşitli piksel yoğunlukları ve görüntüleme mesafeleri dikkate alınmalıdır. Bu bilmece, web tasarımcılarına bir dizi yeni zorluk ve potansiyel tuzaklar sunuyor. Kullanıcı testi değerli zaman harcar, çok sayıda platformda daha fazla şey ters gidebilir ve web animasyonlarının her zamankinden daha ayrıntılı olması gerekir.

HTML5, CSS3, JavaScript ve SVG (ölçeklenebilir grafikler), web animasyonu için en iyi çözümler gibi görünüyor. Bu modern web teknolojilerini ve dillerini kullanmak, yukarıdaki sorunların hepsini olmasa da çoğunu çözmeye yardımcı olacaktır. Ancak, özellikle keşfedilmemiş bir bölgedeyken ve kapsamlı QA ve testler bir zorunluluk olduğunda, dikkatli bir şekilde yürümek her zaman iyi bir fikirdir.

Neden Web Animasyonu Kullanmalısınız?

Web animasyonu, insanların dikkatini statik bir web sayfasından daha uzun süre meşgul edebilir ve tutabilir ve bir fikri veya konsepti daha net ve etkili bir şekilde iletir. Mükemmel web animasyonu, her hareketin arkasında bir hikaye taşır. Her şey anlam ve “ruh” (lat. anima) ile bir animasyona hayat vermekle ilgilidir.

Web animasyonu pürüzsüz, anlamlı olmalı ve ziyaretçinin yolculuğunu desteklemelidir. Web tasarımcısının/animatörünün, animasyonun kullanıcı deneyimine nasıl uyduğunun farkında olması, olası kullanıcı akışlarını tahmin etmeye çalışması ve ardından onu anlamlı bir şekilde desteklemesi gerekir.

Web tasarımcıları web animasyonuna tamamen teknik bir perspektiften bakmamalıdır; kullanıcının bakış açısından bakmaları gerekir.

Animasyonla ilgili en önemli şeylerden biri zamanlamadır. Doğru zamanlama, bir animasyona fiziksel ve duygusal bir anlam kazandırır. Deneyim sorunsuz ve mantıklı olmalıdır. Animasyon akıcı değilse (zamanlama sorunu varsa), insanlar bunu bir hata olarak algılayabilir ve web sitesini daha fazla keşfetme motivasyonunu kaybedebilir.

Animatörün, amaçlanan etkiyi sağlamak için uygun zamanlamayı kullanması gerekir. Animasyonda kaç tane anahtar kare kullanılmalıdır? Ziyaretçi etkileşiminden kaynaklanan animasyonda ne tür bir dinamik değişiklik var ve etkileşimden sonra yanıt ne kadar hızlı geliyor? Animasyon tuhaf, ciddi ve eğlenceli mi?

Mantıksal bir bakış açısından, web animasyonunu iki temel türe ayırabiliriz:

• Statik, etkileşimli olmayan bir web animasyonu, örneğin bir GIF animasyonu.
• Kullanıcı etkileşimi ve kullanıcı girdisine göre değişen etkileşimli dinamik bir web animasyonu.

Dinamik animasyonun en iyi örneği, kullanıcıların ekran içeriğini değiştirdiği bir oyundur. Bir başka basit örnek, bir web sitesi ziyaretçisi paralaks kaydırmalı bir web sitesinde gezinirken belirli öğelerin konumunu değiştirmek olabilir. Animasyon pasif değildir, kullanıcı eylemlerine bağlı olarak değişir.

Dinamik web animasyonu genellikle bir web sitesinde animasyonlu bilgi grafikleri sunmak için kullanılır, bu nedenle insanlar sayfayı kaydırırken belirli alanlara daha fazla dikkat eder; bu, ilgili bilgileri vurgulamanın güçlü bir yoludur.

Web Animasyonunun Artıları ve Eksileri

Artık kullanılmayan eski çözümler de dahil olmak üzere web animasyon tekniklerinin bazı artıları ve eksileri.

Genel olarak web animasyonunun artıları ve eksileri ne olacak? İyi yürütülmüş web animasyonu hala yerinde görünmeyebilir, bu nedenle animasyonu bir web sitesinin tasarımına entegre etmeye başlamadan önce bazı önemli soruları (ayrıca test istemcileri ve diğer ekip üyeleri gibi) sormak her zaman iyi bir fikirdir.

Öncelikle, animasyonun kullanıcı deneyimini nasıl etkileyeceğini kontrol etmemiz gerekiyor. Web sitesinin UX'ini iyileştirecek mi? Tasarımcılar şunları yapmalıdır:

• Mevcut web sitesi tasarımını inceleyin (varsa)
• Hedef kitleyi ve kullandıkları donanım platformlarını kontrol edin
• Site yükleme sürelerini ve CPU yükünü kontrol edin
• Diğer alternatifleri keşfedin
• Kullanılabilirliğe dikkat edin

Trendleri takip etmek için bir sitede web animasyonu kullanmak iyi bir fikir değildir .

Web animasyonu kullanma kararı, herhangi bir diğer tasarım kararı gibi ele alınmalıdır; web tasarımcıları artıları ve eksileri tartmalı ve kullanıcı deneyiminden ödün verilmediğinden emin olmalıdır. Ayrıca kod gereksinimlerini belirlemek için geliştiricilerle birlikte çalışmalı ve yolda ince ayar yapılması gerekebilecek verimsiz kodlara takılmamalarını sağlamalıdırlar.

Modern web animasyon teknolojisi son 20 yılda önemli ölçüde olgunlaştı; performans, kullanılabilir bant genişliği ve işleme kalitesi arttı. Bununla birlikte, tasarımcılar dikkatli olmalı ve bir web sitesine yalnızca kullanıcı deneyimini anlamlı bir şekilde geliştiriyorsa animasyon eklemelidir.

Toptal Tasarım Blogunda daha fazla okuma:

• Hemen Çıkma Oranlarını Azaltmak için Özel Yükleme Animasyonları Nasıl Oluşturulur
• Kısa Zamanda Sketch ve Looper ile Akıl almaz İllüstrasyonlar Oluşturma
• İlke ve Taslak ile Kullanıcı Arayüzü Animasyonu için Adım Adım Kılavuz
• Markanızı Daha İlişkilendirilebilir Hale Getirecek Logo Animasyon İlhamları
• Animasyonlu Ürün Açıklama Videoları Oluşturmak İçin Adım Adım Kılavuz