Bir Sonraki Web Tasarım Projenizde Disney'in 12 Animasyon İlkesini Kullanma

Tam bunu yazdığım anda, ofisimin duvarlarında ve raflarında 17 Disney şey ya da başkası var. On yedi. Ben bile şaşırdım. Disney'in her şeyini ne kadar sevsem de, animasyonun 12 ilkesiyle yaratılan sihir, filmlerinden birini izlerken bile benden kaçıyor.

Ve mesele bu. Animasyonun 12 ilkesi incedir. İzleyiciler farkında olmadan izleyiciler üzerinde izlenimler bırakırlar. Bazen aynı sahnede bizi güldürür, ağlatır, duygulandırır ve hayal kurarlar. Ve o kadar gerçekçi görünen ve hareket eden karakterler ve nesneler yaratırlar ki, onlara uzanıp dokunmak istersiniz. (Hiç Coco'yu gördün mü? Çantamı dinlendiriyorum.)

Bu 12 animasyon ilkesi, artık Disney ve diğer tüm hareket çalışmaları için temel oluşturuyor. Web tasarımı gibi animasyon dışındaki alanlarla da ilgilidirler.

Animasyonun 12 İlkesinin Kısa Tarihi

Animasyonun 12 ilkesi, 1920'lerde ve 30'larda katılan ana animatör grubu olan Disney'in Nine Old Men'inden ikisi olan Ollie Johnston ve Frank Thomas tarafından tanıtıldı. Johnston ve Thomas, 1981'de The Illusion of Life: Disney Animation'ı yazdılar ve o, animasyonun “incili” olarak kaldı. Kitap, Disney'in en iyi animatörlerinin 12 ilkeyi çıkarma yaklaşımlarına yakından bakıyor. Bu ilkeler başlangıçta elle çizilmiş animasyon için tasarlanmış olsa da, teknolojik değişikliklerle hayatta kaldı ve şimdi bilgisayar animatörleri (Pixar gibi) ve web tasarımcıları tarafından kullanılıyor.

Animasyonun 12 İlkesi ve Web Tasarımını Nasıl Bilgilendiriyorlar?

Bu ilkelerin zamana direnmesinin bir nedeni var. Bazen temel bilgiler hala en iyisidir.

1. Ezme ve Esnetme

Kaynak: Giphy aracılığıyla Chris Gannon

“Squash and Stretch” animasyon ilkelerinin en önemlisidir. Animasyonlara esneklik, yerçekimi, ağırlık ve kütle kazandırır. Bir cisim hareket halindeyken aynı şekilde kalmaz.

Hacim yine de tutarlı kalmalıdır. Germe, nesneyi daha ince ve daha uzun yapmayı gerektirir; ezmek onu daha kısa ve daha geniş yapar. Daha ince veya daha kısa yapsaydınız, aynı hacmi koruyamazdı.

Web tasarımında, nesnelerin göz alıcı olması gerektiğinde “Squash and Stretch” kullanılır. Fiziksel kütlesi varmış gibi görünmesi gereken bir nesne varsa, bu ilke hile yapabilir.

2. Öngörü

Kaynak: Giphy aracılığıyla CentoLodigiani

Beklenti, izleyiciyi gerçekleşecek olana hazırlar ve sonuçta ortaya çıkan eylemi daha gerçekçi hale getirebilir. Önce dizlerinizi bükmeden oturmazsınız ya da kolunuzu dışarı çıkarmadan bir şey yakalamazsınız, değil mi? Beklenti, izleyiciye ne olacağı konusunda ipucu vermek için karakter veya nesneyi bir veya iki gerçekçi harekete sokar.

Web tasarımında geçişlerde beklenti kullanılır. Örneğin, bir ziyaretçi bir bilgi kutusunu doldurursa ve gerekli bilgileri bırakırsa, kutu biraz zıplayarak dikkatlerini çekebilir ve "Hey, bir sorun var" ile iletişim kurabilir. Beklenti kullanmanın başka bir yolu, öğeleri hafifçe küçültmek ve ardından üzerine gelindiğinde daha büyük hale getirmektir.

3. Evreleme

Sahneleme, izleyicinin gözünü, bakmalarını istediğiniz yere bakmaları için yönlendirir (fotoğrafta “öncü çizgiler”). İzleyicinin tam da sizin istediğiniz şeye odaklanması için sahnenin geri kalanını küçümseyin. Sahnelemenin bir diğer bileşeni, bir karakterin yaptığı her eylemin arkasında bir niyet olmasıdır. Animasyonun her karesini izole ederseniz, pozun arkasındaki amacı anlayabilirsiniz.

Evreleme, web tasarımına ve web sitelerinde kullanılan görsellere uygulanması daha kolay ilkelerden biridir. Bir web sayfasında bir açılır pencere açıldığında olan budur - açılır pencerenin hareketi, ona odaklanmanızı sağlar ve sayfanın geri kalanı bulanık, soluk veya örtülüdür. Mecazi olarak “sahnenin” en önemli kısmını aydınlatıyorsunuz ve diğer her şeyi arka planda tutuyorsunuz. Bunun için de ışık ve gölge kullanılabilir ya da web tasarımcıları bu prensibi basitçe gereksiz ayrıntılardan kurtularak uygulayabilirler.

4. Düz İleri ve Poz Vermek İçin Poz

"Düz ileri" ve "pozdan poza", animasyon oluşturmanın iki farklı yoludur. "Düz ileri" ile çerçeveler baştan sona sırayla oluşturulur. Bu, animasyona dinamik, akıcı hareket verir. "Pozdan poza" ile ilk ve son kareler oluşturulur, ardından gerekli ara pozlar eklenir.

Kaynak: Vincenzo Lodigiani, Motion Artist

Günümüzde bilgisayar animasyonu “pozdan poza” kullanır çünkü bilgisayar eksik kareleri otomatik olarak doldurabilir. Çehov'daki animasyonlara bir göz atın – gerçekçi bir şekilde akıcı olmadıklarını (ve olması gerekmediğini) anlayabilirsiniz. Web sitenizde "doğrudan" bir animasyon oluşturmak istiyorsanız, birden çok kare tanımlamanıza ve bunları bir sırayla görüntülemenize olanak tanıyan adımlar ( ) zamanlama işlevini kullanabilirsiniz.

5. Devam Etme ve Örtüşen Eylem

“Takip ve örtüşen eylem” ilkesi, bir karakter veya nesne hareket halindeyken ve sonra durduğunda, öznenin bölümlerinin farklı hızlarda hareket edip duracağını söyler. Bu, gerçek hayattaki fizik yasalarını taklit eder.

• Örtüşen Eylem: Konunun farklı bölümleri farklı oranlarda hareket eder.
• Takip Etme: Ana nesnenin hareketi durduktan sonra, nesnenin gevşek bağlı parçaları birkaç saniye daha hareket etmeye devam eder. Bu parçalar durma noktasının ötesine geçecek ve ardından nesneye doğru geri çekilecektir.

Aşağıdaki örnekte, Rapunzel'in kolları ve bacakları kafasından farklı bir hızda hareket ediyor - bu örtüşen bir hareket. Dönmeyi bıraktığında, saçları bir saniyeliğine sallanmaya devam ediyor - bu, devamı.

"Sürükle", bunun tersinin gerçekleştiği ilgili bir tekniktir - nesnenin parçaları hareket eder ve ardından geri kalanı yakalar. Bu tekniklerin tümü gerçekçi hareket gösterir veya komik etki için hareketi abartabilir.

“Hareketli bekletme” de bununla ilgilidir. Kalan karakterler, animasyonun durgunlaşmaması için hala hafif hareket ediyor.

Mobil ve web tasarımında "takip et" ve "örtüşen eylem" izleyiciye bir eylemin kasıtlı olarak durdurulduğunu gösterir. Aksi takdirde, çalışmayı durdurduğunu düşünebilirsiniz. Örneğin, iPhone'umdaki Wunderlist uygulamasının bir liste öğesini taşıdığımı nasıl gösterdiğine bakın. Öğe farklı bir renk oluyor ve hareket ettirdikçe büyüyor, işim bittiğinde orijinal rengine ve boyutuna geri dönüyor. İşlemin tamamlandığını bu şekilde biliyorum.

Bu prensibi iPhone'unuzda çalışırken de görebilirsiniz. Ana ekranda görünümler arasında geçiş yaparken veya simgeleri hareket ettirirken, öğeler biraz farklı hızlarda hareket eder. iPhone'unuz bu şekilde iletişim kurar, "İşler değişiyor".

6. Yavaşla ve Yavaşla

"Yavaşla ve yavaşla" ilkesi, bir cismin yavaş hareket etmeye başladığını, ivme kazanıp hızlandığını, sonra durduğunda tekrar yavaşladığını belirtir. Temel olarak hareketlerin doğal olabilmesi için hızlanması ve yavaşlaması gerekir. Bu efekti elde etmek için, hareketin kademeli olarak artmasını ve azalmasını vurgulamak için bir eylemin başında ve sonunda ek kareler vardır.

Kaynak: Tumblr'da Yaşam İllüzyonu

Web tasarımı için, CSS'nin bu ilkeyle ilgili iki zamanlama işlevi vardır: kolaylaştırma ve kolaylaştırma. Sizin Planınız, Gezegeniniz web sitesinde bir örneğini görebilirsiniz (önce “Hadi başlayalım”a tıklayın).

7. Ark

Animasyonun diğer 12 ilkesinin çoğu gibi, "yay" da fiziğe dayalıdır. Nesneler, yerçekimi nedeniyle hareket ederken genellikle bir tür yay izlerler. Düz kalacak olsalardı, hareket gerçekçi değil mekanik olurdu.

Bu, yalnızca alçaktan yükseğe-düşüğe yaylar için değil, tüm hareket türleri için de geçerlidir:

Web tasarımında, "yay" ilkesi, elbette yay yapan animasyonlar oluşturarak, ancak aynı zamanda yükleme zamanlarında olduğu gibi bir öğeyi döndürerek kullanılabilir.

8. İkincil Eylem

İkincil bir eylem, dikkati dağıtmadan ana eylemi vurgular. Ayrıca karakterlere ve nesnelere daha fazla boyut kazandırır ve bir sahneye hayat verir. Sahneleme ilkesi bir rol oynar çünkü ana eylem hala odak olmalıdır.

İkincil bir eylemin ana nesnenin dışında kalması gerekmez. Yürürken ıslık çalan veya kaşlarını kaldırarak duygularını ifade eden bir karakter olabilir.

Mobil ve web tasarımında, "ikincil eylem" ilkesi, iPhone'unuzdaki uygulamaları yeniden düzenlediğinizde olduğu gibi, öğeler yeni bir öğeye yer açmak için yoldan çıktığında görülür. Bu, bu eylemleri vurgulayan “takip etme ve örtüşme eylemi” ile el ele gidebilir.

9. Zamanlama

Zamanlama oldukça basittir ve “yavaşla ve yavaşla” ile ilgilidir. İlke, öğelerin gerçek dünyada olduğu gibi sürekli olarak doğal bir şekilde hareket etmesi gerektiğini söylüyor. Vurgu için, bilerek hızlandırılabilir veya yavaşlatılabilirler. Kullanılan kare sayısı zamanlamayı belirleyecektir - daha fazla kare daha yavaş bir eylem oluşturur, daha az kare daha hızlı bir eylem oluşturur.

Bu örnekte, Daffy Duck'ın ilk eylemlerinin doğal zamanlaması vardır ve ardından izleyiciye yaklaştığında son eylemi vurgu için bilerek hızlıdır.

Zamanlama ayrıca izleyicinin nesnelerin birbirine göre ağırlığını anlamasına yardımcı olur. Bu örnekte, karakter ağırlıkları yavaşça kaldırıyor ve hızlı bir şekilde düşürerek onun için ağır olduklarını gösteriyor:

Kaynak: Giphy'de @scottthigpen

Web tasarımında, özellikle kullanıcı etkileşimine yanıt verirken öğelerin biraz daha uzun süre kalmasını veya hızlı bir şekilde kaybolmasını sağlamak için zamanlama kullanılır. Örneğin, bir kullanıcı bir menüyü kapatmak isterse, zamanlamayı 300ms civarında kalacak şekilde ayarlayabilirsiniz. Gezinti çubuğunda bir öğeye dokunurlarsa, işlemin hızlı bir şekilde (100 ms) gerçekleşmesini istersiniz.

10. Abartma

Animasyonun 12 ilkesinin çoğu gerçeklik odaklı olsa da, animasyonun güzelliği gerçek olmamasıdır . “Abartma” ilkesi, çok fazla gerçekçiliğin, animasyonun en iyi olduğu şey olan eğlenceden eksilebileceğini söylüyor. Abartma, karakterleri ve nesneleri daha ilginç hale getirmek için kullanılır. Gerçeği alıyor ve bir çentik açıyor, yeter ki sahne hala inandırıcı olsun. Abartma, sahnenin soyut veya gerçeküstü olmaması için kısıtlama gerektirir.

Web tasarımında nesneler, dikkat çekmek veya dikkati dağıtmak için büyütülür veya küçültülür. Bir kullanıcı, bir form gibi web sitesinin belirli bir bölümünde aktif olduğunda, diğer öğeler küçülürken büyüyebilir. Bu, özellikle pop-up formları düşündüğünüzde, “hazırlama” ilkesine benzer.

11. Katı Çizim

Kaynak: Tumblr'da Yaşam İllüzyonu

Animasyon teknik olarak 2B olmasına rağmen gerçekçi bir şekilde 3B olarak sunulmalıdır. "Katı çizim" ilkesine "perspektif" de denebilir çünkü bu, aşağıdaki gibi temel bilgileri çizme ve anlama becerisine sahip olmakla ilgilidir:

• Anatomi
• Denge
• Tutarlılık
• Işık ve gölge
• Ses
• Ağırlık

Web tasarımcıları için bir öğeye derinlik eklemek, kullanıcılara onunla etkileşime girebileceklerini gösterir. Bunu web sitemizde eylem halinde görebilirsiniz. Aşağı kaydırırken “İndirmeye Katıl” düğmesinin nasıl pembeye dönüştüğünü izleyin:

12. İtiraz

Muhtemelen ustalaşması gereken 12 animasyon ilkesinin en zoru olan “cazibe”, karakterlerinizin, nesnelerin ve onların dünyasının izleyicilere hitap etmesi gerektiğini söylüyor. Fiziksel veya başka bir şekilde çekici ve çekici olmalıdırlar. Bunu doğru yapmanın bir tarifi yok, ancak sağlam karakter gelişimi ve hikaye anlatımı temel bileşenlerdir.

Animasyonda her bir karakter çekici olmayacak - kötü adam Disney filmlerinin temel taşıdır. Ancak, sunulma biçimleri hala karizmatik olmalı ve izleyicinin ilgisini çekmeli.

Web tasarımında “itiraz”, web sitesinin bir bütün olarak ilgi çekici, eğlenceli ve kullanımı kolay olduğu anlamına gelir.

Toplama

Disney'in 12 ilkesi, web sitenizde etkileşimli bir oyun yaratıyormuşsunuz gibi basit animasyonlarda yardımcı olabilir, ancak her türlü web sayfasının tasarımında da yardımcı olabilir. Disney filmleri söz konusu olduğunda çoğu tüketici benim gibidir: Bir şeyden hoşlandığımı ve beynimin ipuçlarını işlediğini biliyorum, ancak bu tepkileri neden verdiğimi anlayamıyorum . Web tasarımcısının işi, bir ziyaretçinin ne düşüneceğini ve yapacağını tahmin etmek ve ardından onları doğru eylemleri gerçekleştirmeleri için ustaca yönlendirmektir.

Kitlenizle bağlantı kurmanın daha da fazla yolunu mu arıyorsunuz? Renk duygusunu kullanmayla ilgili blog yazımızı okuyun.