Web Tasarımında Animasyona Giriş
Animasyon artık sadece çizgi filmler için değil. Tam ekran hareketli görüntülerden küçük fareyle üzerine gelme efektlerine kadar animasyon dokunuşları her yerde ortaya çıkıyor. Animasyon modaya uygun, eğlenceli ve kullanıcı dostudur.
Ve animasyon kullanmanın önündeki engeller düşmeye başladı. Yüksek hızlı bağlantılarda çoğu kullanıcı ve basit hareketlerden veya aptal bir giften birkaç dakikaya kadar bir şey yaratmanın kolaylığı ile animasyonlar pratik ve kullanışlı web tasarım araçları haline geldi.
Envato Elements'i keşfedin
Animasyon Temelleri
Animasyon, hareketsiz ya da iki boyutlu bir biçimde yaratılan bir şey “hayata geçirilir” ve fizik yasalarına uyacak şekilde hareket ettiği görülür. Çizgi film karakterinin ekranda yürümesinin yolu veya Mac'inizin masaüstüne yüklenirken bir uygulama simgesinin top gibi nasıl sıçradığı.
Animasyonla neredeyse eşanlamlı olan sözcüklerden biri Disney. 1980'lerin başında, şirketlerin en iyi animatörlerinden ikisi animasyonun 12 ilkesini ayrıntılı olarak anlatan bir kitap yazdı. Frank Thomas ve Ollie Johnston'ın “Yaşam Yanılsaması: Disney Animasyonu” bugün hala animasyon için bir çerçeve sunuyor.
- Squash ve streç
- Beklenti
- sahneleme
- Düz İleri Hareket ve Poz için Poz
- Takip Etme ve Çakışan İşlem
- Yavaşla ve Yavaşla
- Ark
- İkincil İşlem
- Zamanlama
- Abartı
- Katı Çizim
- Temyiz
Web animasyonları genellikle GIF, CSS, SVG, WebGL veya video olarak kaydedilir. Bir kelimenin üzerine geldiğinizde görünen basit bir alt çizgiden tam ekran bir videoya veya arka plan görüntüsüne kadar her şey olabilir. Diğer tüm tasarım tekniklerinde olduğu gibi, animasyonlar ince olabilir veya yüzünüzde olabilir ve kaçınılması zor olabilir.
2017'nin Yükselen Trendi
Web tasarımında animasyon her gün başladığımız bir şeydir. Bir tasarım trendi olarak animasyonun anahtarı ılımlılıktır. Küçük, basit animasyonlar ilgi çekici ve ilginç; kullanıcı bir animasyon olmayı bile düşünmeyebilir. Büyük ölçekli animasyonlar sizi tasarıma çeken ilginç bir görsel olabilir. Ancak çok fazla farklı hareket efektini karıştırmaya başlarsanız, tam bir kaosa neden olabilir.
Animasyonu popüler kılan gerçekçiliktir. Çok sayıda düz ve minimal tarzı tasarıma sahip bugünün tasarım ortamında, kullanıcıların ne yapacaklarını söylemek için daha fazla ipucuna ihtiyaçları var. Basit animasyon parçaları, estetiği değiştirmeden kullanıcıya rehberlik edebilir. Kullanıcılar için yeterli yön sağlamak için görsel olarak çok basit olabilecek şemalar tasarlamak için talimat ve sipariş eklemeye yardımcı olur. Bu örnekte animasyon, soyulmuş basitlik ve kullanılabilirlik arasında mutlu bir ortam yaratır.
Bu eğilime katkıda bulunan diğer bir faktör, tasarımın arka ve kullanıcı uçlarındaki araçlara erişimdir. Artık daha karmaşık animasyonlar için Flash'a ihtiyacınız yok. (Ve hala Flash'ta bina yapıyorsanız, durma zamanı.) Bu, birkaç başka şekilde gerçekleştirilebilir. Günümüz animasyonları, web sitelerini veya web sunucularını aşağı çekmez, efektleri kullanıcılar için hızlı bir şekilde yükler ve yüksek hızlı internet erişimi animasyonları ile etkinlik döngüsünün ortasında sıkışıp kalmaz.
Büyük ve Küçük Animasyonlar
Web için animasyon söz konusu olduğunda, anlaşılması kolay iki kategoriye ayrılır: büyük ve küçük. (Muhtemelen bunların nasıl göründüğünü tahmin edebilirsiniz.)
Büyük animasyonlar, kendileri için bir ölçeğe sahip olanlardır. Genellikle çalışma süresine sahip bir video şeklinde, büyük ölçekli animasyonlar ekranın önemli bir bölümünü doldurur ve kısa bir filmin karakteristiğidir. Bu animasyonlar genel tasarımda bir odak noktası görevi görür. Kullanıcıların animasyonu hareket halinde görmek için genellikle herhangi bir işlem yapmaları gerekmez. Studio Meta sitesinde yakından izlerseniz, kopyayı okurken büyük görüntülerin her biri yakınlaştırılır.
Küçük animasyonlar, bir web sitesiyle etkileşime girmeye başladığınızda keşfettiğiniz küçük bitler ve parçalardır. Bu divotlar vurgulu durumlar, küçük süsleme parçaları veya kullanılabilirlik kılavuzları veya araçları şeklinde olabilir. Küçük animasyonlar genel estetiğe katkıda bulunan bir aksan, ancak tasarımın odak noktası olması pek olası değil. Henry Brown sitesinde basit animasyon, yakından bakarsanız, çizimdeki gözlerin aslında yanıp sönmesidir.
Animasyon Ne Zaman Kullanılmalı
Bu eğilim de dahil olmak üzere her trendle ilgili sorun, onu ne zaman kullanacağını bilmektir. Animasyon, tasarım araç kitiniz için harika bir numara olabilir, ancak her proje için değildir. Animasyon pürüzsüz ve kesintisiz olmalı, gergin veya mekanik olmamalıdır. Kullanıcıya bir amaca hizmet etmeli ve içeriğin önüne geçmemelidir.
Animasyon kullanmanın başlıca nedeni kullanılabilirliği artırmaktır. Basit animasyonlar, kullanıcıların bir web sitesi haritasında hangi düğmelere tıklayacaklarını veya nereye gideceklerini anlamalarına yardımcı olacak harika rehberlik araçları olabilir. Karmaşık kaydırma efektlerini kullanan birçok tasarımcı, kaydırmak veya tıklamak için basit bir animasyonu bir kullanıcı aracıyla eşleştirir. (Bu, basit bir zıplayan simgeden veya "aşağı kaydırın" diyen kelimelerden her şeyi içerir.)
Kullanılabilirlik birkaç biçimde gelir:
- İletişim işlevi veya bir web sitesinin kullanımı
- Formu doğru doldurma veya bir öğenin tıklanabilir olduğunu vurgulama gibi değişikliği göster
- Akış oluşturun veya kullanıcıları harekete geçirici ifadeye yönlendirin
Animasyonu kullanmanın ikinci nedeni estetiktir. Animasyon harika bir “dekorasyon” olabilir. Bazen animasyonlu bir öğenin amacı tamamen görseldir ve bu kabul edilebilir bir kullanımdır. Bu dekoratif animasyon, bir hikaye anlatmaya veya arayüz ve kullanıcı arasında duygusal bir bağlantı oluşturmaya yardımcı olabilir. Bir animasyonun amacı, görsel ilgiyi artırmak ve bir kullanıcıyı sitenizle daha uzun süre etkileşimde tutmak olabilir.
Tamamen görsel bir animasyon oluştururken ne yapması gerektiğini düşünün. Kullanıcının olmasını istediğiniz bağlantıyı düşünün. Eğlenceli mi yoksa şaşırtıcı mı? Paylaşım için tasarlanmış benzersiz bir içerik mi? Saf bir görselin bile bir amacı olmalı.
kaynaklar
Animasyona başlamaya hazır mısınız? İşte daha fazla okuma için birkaç kaynak ve başlamanıza yardımcı olacak araçlar.
- Yaşam Yanılsaması videosu, 12 ilkenin her birini anlaşılması kolay bir şekilde gösterir.
- A List Apart'tan “Web Animasyon İş Başında”, animasyonu neyin işe yaradığına dair harika bir kaynak.
- “Yeni Başlayanların CSS Animasyonuna Giriş”, CSS özelliklerini kullanarak bir karenin çembere nasıl dönüştürüleceğini gösterir.
- Elastik animasyonlu SVG öğeleri, bir SVG bileşeninin nasıl entegre edileceği ve canlandırılacağı konusunda bir öğreticidir.
- Mark Geyer'in UI Animasyon Sanatı sunumu, kavramları açıklamak için animasyon kullanıyor.
- Gelişmiş Animasyon Oluşturmak İçin 15 Üst HTML5 Araçları ”, temelleri zaten anlıyorsanız, ileri düzey bir adım ve araç listesidir.
- Animatör'ün Hayatta Kalma Kiti, tüm animasyon türleri için geçerli olan temel ilkeleri öğretir.
Sonuç
Animasyon söz konusu olduğunda, temel kural şudur: İyi animasyon, kullanıcının deneyimini daha iyi hale getirecektir. Bu, eğlenceli, olumlu bir deneyim gibi duygusal bir bağlantı şeklinde veya bir sitenin kullanımını daha kolay hale getirerek olabilir.
Animasyon, çeşitli uygulamalar için çok daha standart hale gelen eğlenceli bir tekniktir. İlham arıyorsanız, bu makaleye geri dönün ve görsel örneklerin bağlantılarını tıklayın, siteleri ziyaret edin ve içindeki animasyonlu özelliklerle oynayın. İyi eğlenceler!
