blog - Cemgil Ünlü

İçeriğe git

Web animasyonları nedir? Nasıl Kullanılır?

Cemgil Ünlü
Published by Cemgil Ünlü içinde Web Tasarım · 11 Eylül 2020
Bugün, çevrimiçi oldunuz, biraz gezindiniz, Facebook, WhatsApp ve YouTube'u kullandınız ve en az bir meme, animasyonlu GIF veya video gördünüz, ancak büyük olasılıkla birden fazla gördünüz. Aslında, en az birini görüp paylaşmadığınız neredeyse bir gün geçmiyor. Hepimiz yapıyoruz, animasyonlu içeriğin paylaşılma ve viral hale gelme oranı artık çok yüksek.

Ancak bu tür içeriğin başarısının temeli nedir? En önemlisi, profilinizi yükseltmek ve işinizi tanıtmak için web sitelerinizde veya sosyal medya platformlarınızda bunu nasıl etkili bir şekilde kullanabilirsiniz?

Cevapları bu makalede bulacağız.

Animasyonlar ve video klipler. Neden onları bu kadar çok seviyoruz?
Buradan başlayalım: Animasyonları ve video klipleri neden bu kadar sevdiğinizi hiç merak ettiniz mi? Tuhaf görünebilir, ancak bu "Eski Beyniniz" için bir sorudur.

Bu egoya bir darbe olsa da, kendimizi medeni ve son derece gelişmiş insanlar olarak görmeyi sevdiğimiz kadar, düşmanca, tehlikeli bir dünyada hayatta kalmak için savaşmamız gereken bir zamandan kalma tarih öncesi içgüdülerimizin hala bizim bir parçamız.

Bu, beynimizin 3 bölüme ayrıldığını açıklayan sinirbilim araştırmasıyla netleşti:
  • Yeni Beyin - bu, gerçekleri işleyen ve rasyonel düşünceye izin veren en gelişmiş kısımdır;
  • Orta Beyin - bu, duyguları ve hisleri yöneten kısımdır;
  • Eski Beyin - diğer iki beyinden iletilen bilgileri kontrol eden ve eylemlerinizi belirleyen kararları veren en eski ve ilkel kısım olan kertenkele beyni.

Eski Beynin 6 temel özelliği vardır:
  1. Benmerkezci
  2. Güçlü kontrastlara karşı hassastır
  3. Somut
  4. Başını ve sonunu hatırlamakta iyidir ama ortasını değil
  5. Görseldir
  6. Güçlü duygulara tepki verir


Bu, neden videolara ve animasyonlara bu kadar çekildiğimizi açıklıyor. Bunlar hareketli görüntüler ve Eski Beynimiz bu tür uyaranlara anında tepki vermeye hazır. Sonuçta, tarih öncesi zamanlarda ani hareket yalnızca iki anlama gelebilir:
  1. "Bak! Yiyecek var."
  2. "Bak! Yiyecek olabilirsin."


Her iki durumda da: "Bak! Hemen bir şeyler yapın; saldırın veya kaçın."

Bu değişmedi; hareket dikkatimizi çeker ve bir tepki talep eder. Bu mekanizmayı anladıktan sonra, web sayfaları ve promosyon kampanyaları oluştururken bunu kendi yararınıza kullanabilirsiniz.


Animasyonlar: kısa bir tarihçe
Bu sizi şaşırtabilir, ancak hareketli görüntülerin büyüleyici gücü o kadar büyük ki, hikayeleri insanlık kadar eskidir.
Bir animasyonun bilinen en eski örneği, aslında İran'da dönerken bulunan 5.200 yıllık bir pişmiş toprak kasedir: kaseye boyanmış 5 sahnenin, daldaki yaprakları kapmak için sıçrayan bir keçinin hareketini yeniden oluşturduğunu ortaya koymaktadır.
Eski Mısır ve Çin'de insanlar duvarlara gölge gösterileri yapıyordu.

1600'lü yılların sonu, sihirli fenerin gelişini işaret ediyordu, bu da thaumatropes, zoetropes ve kinetoscopes adı verilen fantastik ses veren cihazlara yol açtı ve sonunda Lumière kardeşlerin şerit çizmek yerine fotoğraf filmi kullanan çok daha başarılı kamerasına yol açtı. hareket yanılsaması yaratmak için.

Bu, 19. yüzyılın sonundaydı; Oradan, sinema ve nihayet web için animasyon geliştirmek için sadece kısa bir adımdı.

1990'ların sonlarında web coşkulu bir yerdi ve gerçekten son teknoloji olarak kabul edilen akıllara durgunluk veren Flash animasyonlarıyla doluydu. Sonra, hepimiz sakinleştikten sonra, şaşırtma gücünden çok web sitelerinin performansına ve kullanılabilirliği ödüllendirmeye daha fazla önem vermeye başladık. Flash animasyonları çok ağır hale geliyordu ve mobil taramayla uyumlu değildi, yani modası geçmişti.

Bugün, çok çeşitli geliştirme yöntemleri ve araçları sayesinde, site yaratıcıları bir kez daha ziyaretçilerin dikkatini çekmek için hareketi kullanmaya başladılar, ancak bunu öncekinden daha fazla farkındalık ve kısıtlama ile yapıyorlar.

Neden? Basitçe, animasyonların şunları yapabileceği hala doğru olduğu için:
insanların dikkatini çekmek;
her şeyi daha çekici ve eğlenceli hale getirin;

akıllıca kullanılırsa, kullanıcıların değişiklikleri ve endikasyonları algılamasına yardımcı olarak gezinirken onlara rehberlik edebilir.

Tamam ama nasıl animasyonlar yaratırsınız?

Kendi animasyonlarını oluşturmak isteyen herkes için başlangıç noktası, belirli bir aracın nasıl kullanılacağını öğrenmek değil, klasik animasyonun ilkelerini anlamaktır. 1930'ların en büyük Disney animatörlerinden ikisi olan Frank Thomas ve Ollie Johnston tarafından yapılan bu temel bilgiler 1986'daki "The Illusion of Life" kitabında bulunabilir.

Johnston ve Thomas, engin deneyimlerine dayanarak, animasyonun gücünün, bu 12 ilkeyi takip ettiğiniz sürece, "yaşam yanılsaması" yaratma yeteneğinden geldiğine inanıyor;

1. Squash ve Stretch
2. Beklenti
3. Evreleme
4. Dümdüz ilerleyin ve poz vermek için poz verin
5. Devam eden ve örtüşen eylem
6. Yavaşlayın ve yavaşlayın
7. Ark
8. İkincil eylem
9. Zamanlama
10. Abartı
11. Katı çizim
12. Temyiz


Aslında, yerçekimi, reaksiyonlar ve zaman gibi temel fizik yasalarını takip etmek, daha gerçekçi animasyonlarla sonuçlanabilir, bu da onların hikaye anlatma yeteneklerini geliştirmekle kalmaz, aynı zamanda:
nedenselliği gösterir → bu düğmeye tıklarsanız, form kaybolur
geri bildirim sağlar → bu düğmeye tıklarsanız, basılı durumda kalır
bir ilişkiyi temsil eder → haritadaki bir noktayı yakınlaştırmak, fiziksel konumu hakkında daha fazla bilgi sağlar
ilerlemeyi gösterir → bir yükleme çubuğu gibi, örneğin

... ve daha fazlası.

Tüm bu örneklerde, animasyonlar etkileşimler boyunca bize rehberlik ederek ilişkileri, yapıları ve sebep ve sonucu anlamamıza yardımcı olur. Başka bir deyişle, animasyonlar, durumu daha iyi anlamamıza ve uygun şekilde etkileşimde bulunmamıza yardımcı olan duyusal girdilerle iletişimi zenginleştirir.

Bu yüzden, animasyonları web sitenize sevimli bir dokunuş katan dekoratif özellikler olarak düşünmeyin. Bunları dikkatlice tasarlar ve akıllıca kullanırsanız, animasyonlar iletişimimizi önemli ölçüde zenginleştirerek onları daha çekici ve etkili hale getirebilir.





Yorum yok

İçeriğe dön