Menggunakan 12 Prinsip Animasi Disney dalam Proyek Desain Web Anda Berikutnya

Tepat pada saat saya mengetik ini, kantor saya memiliki 17 sesuatu-atau-lainnya Disney di dinding dan rak. Tujuh belas. Bahkan aku terkejut. Sama seperti saya menyukai semua hal-Disney, keajaiban yang diciptakan melalui 12 prinsip animasi luput dari perhatian saya saat saya menonton salah satu film mereka.

Dan itulah intinya. 12 prinsip animasi itu halus. Mereka membuat kesan pada pemirsa tanpa pemirsa menyadarinya. Mereka membuat kita tertawa, menangis, bersimpati dan bermimpi, terkadang dalam adegan yang sama. Dan mereka menciptakan karakter dan objek yang terlihat dan bergerak begitu realistis sehingga Anda ingin menjangkau dan menyentuhnya. (Pernahkah Anda melihat Coco ? Saya mengistirahatkan kasus saya.)

Ke-12 prinsip animasi itu sekarang memberikan dasar untuk semua karya gerak, Disney dan lainnya. Mereka juga relevan dengan bidang di luar animasi, seperti desain web.

Sejarah Singkat 12 Prinsip Animasi

Ke-12 prinsip animasi diperkenalkan oleh Ollie Johnston dan Frank Thomas, dua dari Sembilan Orang Tua Disney, kelompok inti animator yang bergabung pada tahun 1920-an dan 30-an. Johnston dan Thomas menulis The Illusion of Life: Disney Animation pada tahun 1981, dan itu tetap menjadi "kitab suci" animasi. Buku ini melihat dari dekat pendekatan para animator top Disney untuk mengekstrak 12 prinsip. Meskipun prinsip-prinsip ini awalnya ditujukan untuk animasi yang digambar tangan, prinsip-prinsip ini bertahan melalui perubahan teknologi dan sekarang digunakan oleh animator komputer (seperti Pixar) dan desainer web.

12 Prinsip Animasi dan Bagaimana Mereka Menginformasikan Desain Web

Ada alasan mengapa prinsip-prinsip ini telah teruji oleh waktu. Terkadang dasar-dasarnya masih yang terbaik.

1. Labu dan Peregangan

Sumber: Chris Gannon melalui Giphy

"Squash and Stretch" adalah prinsip animasi yang paling penting. Ini memberikan fleksibilitas animasi, gravitasi, berat dan massa. Ketika sebuah benda bergerak, bentuknya tidak tetap.

Volume harus tetap konsisten. Peregangan membutuhkan membuat objek lebih tipis dan lebih lama; squishing membuatnya lebih pendek dan lebih lebar. Jika Anda membuatnya lebih tipis atau lebih pendek, volumenya tidak akan sama.

Dalam desain web, "Squash and Stretch" digunakan ketika objek perlu menarik perhatian. Jika ada benda yang perlu terlihat memiliki massa fisik, prinsip ini bisa membantu.

2. Antisipasi

Sumber: CentoLodigiani melalui Giphy

Antisipasi mempersiapkan pemirsa untuk apa yang akan terjadi, dan itu dapat membuat tindakan yang dihasilkan lebih realistis. Anda tidak akan duduk tanpa menekuk lutut terlebih dahulu, atau menangkap sesuatu tanpa menjulurkan tangan, bukan? Antisipasi menempatkan karakter atau objek melalui satu atau dua gerakan realistis untuk memberi isyarat kepada pemirsa tentang apa yang akan terjadi.

Dalam desain web, antisipasi digunakan dalam transisi. Misalnya, jika pengunjung mengisi kotak informasi dan meninggalkan informasi yang diperlukan, kotak tersebut dapat memantul sedikit untuk menarik perhatian mereka dan berkomunikasi, “Hei, ada yang salah.” Cara lain untuk menggunakan antisipasi adalah dengan mengecilkan item sedikit dan kemudian membuatnya menjadi lebih besar saat mengarahkan kursor.

3. Pementasan

Pementasan mengarahkan mata pemirsa sehingga mereka akan melihat ke tempat yang Anda inginkan ("garis terdepan" dalam fotografi). Mengecilkan sisa adegan sehingga pemirsa hanya berfokus pada apa yang Anda inginkan. Komponen lain dari pementasan adalah bahwa setiap tindakan yang dilakukan karakter memiliki maksud di baliknya. Jika Anda mengisolasi setiap bingkai animasi, Anda akan dapat mengetahui maksud di balik pose tersebut.

Staging adalah salah satu prinsip yang lebih mudah untuk diterapkan pada desain web dan visual yang digunakan di situs web. Inilah yang terjadi ketika pop-up muncul di halaman web – gerakan pop-up membuat Anda fokus padanya, dan sisa halaman menjadi kabur, redup, atau tertutup. Anda secara kiasan menyalakan bagian terpenting dari "panggung" dan menjaga segala sesuatu yang lain di latar belakang. Cahaya dan bayangan dapat digunakan untuk ini juga, atau desainer web dapat menerapkan prinsip ini hanya dengan menghilangkan detail yang tidak perlu.

4. Lurus ke Depan dan Pose ke Pose

"Lurus ke depan" dan "berpose untuk berpose" adalah dua cara berbeda untuk membuat animasi. Dengan "lurus ke depan", bingkai dibuat secara berurutan dari awal hingga akhir. Ini memberikan animasi yang dinamis, gerakan yang mengalir. Dengan “pose to pose”, bingkai pertama dan terakhir dibuat, kemudian pose di antara yang diperlukan ditambahkan.

Sumber: Vincenzo Lodigiani, Artis Gerak

Saat ini, animasi komputer menggunakan “pose to pose” karena komputer dapat mengisi frame yang hilang secara otomatis. Lihat animasi di Chekhov – Anda dapat mengetahui bahwa mereka tidak mengalir secara realistis (dan tidak seharusnya demikian). Jika Anda ingin membuat animasi "lurus ke depan" di situs web Anda, Anda dapat menggunakan fungsi waktu langkah ( ), yang memungkinkan Anda menentukan beberapa bingkai dan menampilkannya secara berurutan.

5. Tindak Lanjut dan Aksi Tumpang Tindih

Prinsip "tindak lanjuti dan tindakan tumpang tindih" mengatakan bahwa ketika karakter atau objek bergerak dan kemudian berhenti, bagian dari subjek akan bergerak dan berhenti dengan kecepatan yang berbeda. Ini meniru hukum fisika kehidupan nyata.

• Tindakan Tumpang Tindih: Bagian yang berbeda dari subjek bergerak dengan kecepatan yang berbeda.
• Follow Through: Bagian objek yang terhubung secara longgar terus bergerak selama beberapa detik setelah objek utama berhenti bergerak. Bagian-bagian itu akan bergerak melampaui titik berhenti dan kemudian menarik kembali ke arah objek.

Pada contoh di bawah, lengan dan kaki Rapunzel bergerak dengan kecepatan yang berbeda dari kepalanya – itu adalah tindakan yang tumpang tindih. Ketika dia berhenti berputar-putar, rambutnya terus berayun selama sedetik – itu tindak lanjut.

"Seret" adalah teknik terkait di mana yang terjadi sebaliknya - bagian dari objek bergerak dan kemudian sisanya menyusul. Semua teknik ini menunjukkan gerakan realistis atau dapat melebih-lebihkan gerakan untuk efek lucu.

"Memindahkan pegangan" juga terkait dengan ini. Karakter yang tersisa masih memiliki sedikit pergerakan agar animasi tidak menjadi stagnan.

Dalam desain seluler dan web, "tindak lanjuti" dan "tindakan yang tumpang tindih" menunjukkan kepada pemirsa bahwa suatu tindakan sengaja dihentikan. Jika tidak, Anda mungkin berpikir bahwa itu hanya berhenti bekerja. Misalnya, lihat bagaimana aplikasi Wunderlist di iPhone saya menunjukkan bahwa saya sedang memindahkan item daftar. Item menjadi warna yang berbeda dan menjadi lebih besar saat saya memindahkannya, lalu kembali ke warna dan ukuran aslinya setelah saya selesai. Ini adalah bagaimana saya tahu aksinya selesai.

Anda juga dapat melihat prinsip ini beraksi di iPhone Anda. Saat Anda bertransisi antara tampilan atau memindahkan ikon di layar beranda, elemen bergerak dengan kecepatan yang sedikit berbeda. Beginilah cara iPhone Anda berkomunikasi, "Segalanya berubah."

6. Lambat Masuk dan Keluar Lambat

Prinsip "perlambat masuk dan keluar" menyatakan bahwa sebuah objek mulai bergerak perlahan, memperoleh momentum dan mempercepat, lalu melambat lagi saat berhenti. Pada dasarnya, gerakan harus dipercepat dan diperlambat agar alami. Untuk mencapai efek ini, ada bingkai tambahan di awal dan akhir aksi untuk menekankan peningkatan dan penurunan gerakan secara bertahap.

Sumber: Ilusi Kehidupan di Tumblr

Untuk desain web, CSS memiliki dua fungsi pengaturan waktu yang terkait dengan prinsip ini: kemudahan masuk dan kemudahan keluar. Anda bisa melihat contohnya di website Your Plan, Your Planet (klik “Let's get start” dulu).

7. Busur

Seperti banyak dari 12 prinsip animasi lainnya, "arc" didasarkan pada fisika. Objek biasanya mengikuti beberapa jenis busur saat bergerak karena gravitasi. Jika mereka tetap lurus, gerakannya akan mekanis, tidak realistis.

Ini juga berlaku untuk semua jenis gerakan, tidak hanya busur rendah ke tinggi ke rendah:

Dalam desain web, prinsip "arc" dapat digunakan dengan membuat animasi yang melengkung, tentu saja, tetapi juga dengan memutar elemen, seperti saat memuat.

8. Tindakan Sekunder

Tindakan sekunder menekankan tindakan utama tanpa mengganggunya. Ini juga memberi karakter dan objek lebih banyak dimensi dan menghembuskan kehidupan ke dalam sebuah adegan. Prinsip pementasan berperan karena aksi utama tetap harus menjadi fokus.

Tindakan sekunder tidak harus berada di luar objek utama. Ini bisa berupa karakter yang bersiul saat mereka berjalan atau mengekspresikan emosi dengan mengangkat alis.

Dalam desain seluler dan web, prinsip "tindakan sekunder" terlihat saat elemen menyingkir untuk memberi ruang bagi elemen baru, seperti saat Anda mengatur ulang aplikasi di iPhone. Ini mungkin berjalan seiring dengan "tindak lanjut dan tindakan yang tumpang tindih," yang menekankan tindakan tersebut.

9. Waktu

Pengaturan waktu cukup mudah, dan ini terkait dengan "perlambatan dan perlambat." Prinsipnya mengatakan bahwa elemen harus secara konsisten bergerak secara alami, seperti di dunia nyata. Untuk penekanan, mereka dapat dengan sengaja dipercepat atau diperlambat. Jumlah frame yang digunakan akan menentukan waktu – lebih banyak frame membuat aksi lebih lambat, lebih sedikit frame membuat aksi lebih cepat.

Dalam contoh ini, tindakan pertama Daffy Duck memiliki waktu yang alami, dan kemudian tindakan terakhir, ketika dia mendekati penonton, sengaja dilakukan dengan cepat untuk penekanan.

Pengaturan waktu juga membantu pemirsa memahami berat objek dalam kaitannya satu sama lain. Dalam contoh ini, karakter mengangkat beban secara perlahan dan menjatuhkannya dengan cepat, menunjukkan bahwa beban itu berat baginya:

Sumber: @scottthigpen di Giphy

Dalam desain web, pengaturan waktu digunakan untuk membuat elemen bertahan sedikit lebih lama atau menghilang dengan cepat, terutama saat merespons interaksi pengguna. Misalnya, jika pengguna ingin menutup menu, Anda dapat mengatur waktunya agar tetap bertahan selama 300 md. Jika mereka mengetuk elemen di bilah navigasi, Anda ingin tindakan terjadi dengan cepat (100 md).

10. Berlebihan

Meskipun banyak dari 12 prinsip animasi berfokus pada kenyataan, keindahan animasi adalah bahwa itu tidak nyata. Prinsip "berlebihan" mengatakan bahwa terlalu banyak realisme dapat mengurangi apa yang terbaik dari animasi: menghibur. Berlebihan digunakan untuk membuat karakter dan objek lebih menarik. Dibutuhkan kenyataan dan mengubahnya menjadi takik, cukup sehingga adegan itu masih bisa dipercaya. Berlebihan membutuhkan pengekangan agar adegan tidak menjadi abstrak atau surealis.

Dalam desain web, objek diperbesar atau diperkecil untuk menarik atau mengurangi perhatian. Ketika pengguna aktif di bagian tertentu dari situs web, seperti formulir, itu bisa tumbuh sementara elemen lainnya menyusut. Ini mirip dengan prinsip "pementasan", terutama ketika Anda memikirkan formulir pop-up.

11. Gambar Padat

Sumber: Ilusi Kehidupan di Tumblr

Meskipun animasi secara teknis 2D, namun harus ditampilkan secara realistis dalam 3D. Prinsip “solid drawing” bisa juga disebut “perspektif” karena ini menyangkut kemampuan menggambar dan memahami dasar-dasar seperti:

• Ilmu urai
• Keseimbangan
• Konsistensi
• Cahaya dan bayangan
• Volume
• Berat

Untuk desainer web, menambahkan kedalaman ke elemen menunjukkan kepada pengguna bahwa mereka dapat berinteraksi dengannya. Anda dapat melihat ini beraksi di situs web kami. Perhatikan bagaimana tombol "Gabung untuk Mengunduh" berubah menjadi merah muda saat saya menggulir ke bawah:

12. Banding

Mungkin yang paling sulit dari 12 prinsip animasi untuk dikuasai, "daya tarik" mengatakan bahwa karakter, objek, dan dunia Anda harus menarik bagi penonton. Mereka harus menarik dan menawan dalam beberapa hal, secara fisik atau sebaliknya. Tidak ada resep untuk melakukannya dengan benar, tetapi pengembangan karakter dan penceritaan yang solid adalah bahan utamanya.

Dalam animasi, setiap karakter tidak akan menarik – penjahat adalah landasan film Disney. Namun, cara penyajiannya harus tetap memiliki kharisma dan minat penonton.

Dalam desain web, "daya tarik" berarti bahwa situs web secara keseluruhan menarik, menyenangkan, dan mudah digunakan.

Membungkus

12 prinsip Disney dapat membantu dengan animasi langsung, seperti jika Anda membuat game interaktif di situs web Anda, tetapi mereka juga dapat membantu dengan desain untuk semua jenis halaman web. Sebagian besar konsumen seperti saya dalam hal film Disney: Saya tahu bahwa saya menyukai sesuatu dan otak saya memproses isyarat tersebut, tetapi saya tidak dapat menjelaskan mengapa saya memiliki reaksi tersebut. Tugas perancang web adalah mengantisipasi apa yang akan dipikirkan dan dilakukan pengunjung, dan kemudian secara halus membimbing mereka untuk mengambil tindakan yang tepat.

Mencari lebih banyak cara untuk terhubung dengan audiens Anda? Baca posting blog kami tentang menggunakan emosi warna.