Animasi bukan hanya untuk kartun lagi. Dari gambar bergerak layar penuh hingga efek hover kecil, sentuhan animasi bermunculan di mana-mana. Animasi itu trendi, menyenangkan, dan ramah pengguna.
Dan hambatan untuk menggunakan animasi sudah mulai turun. Dengan sebagian besar pengguna pada koneksi berkecepatan tinggi dan kemudahan membuat apa pun mulai dari gerakan sederhana atau gif konyol hingga action beberapa menit, animasi telah menjadi alat desain web yang praktis dan berguna.
Ayo selami!
Dasar Animasi
Seperti teknik desain lainnya, animasi bisa halus atau mungkin ada di wajah Anda dan sulit dihindari.
Animasi terjadi ketika sesuatu yang diciptakan dalam bentuk diam atau dua dimensi “dihidupkan” dan tampak bergerak mengikuti hukum fisika. Begitulah cara karakter kartun berjalan melintasi layar atau bagaimana ikon aplikasi memantul seperti bola saat dimuat di desktop Mac Anda.
Salah satu kata yang hampir identik dengan animasi adalah Disney. Pada awal 1980-an, dua animator top perusahaan menulis buku yang merinci 12 prinsip animasi. “Ilusi Kehidupan: Animasi Disney” oleh Frank Thomas dan Ollie Johnston masih menjadi kerangka animasi saat ini.
- Remas dan regangkan
- Antisipasi
- Memanggungkan
- Aksi Lurus ke Depan dan Pose ke Pose
- Tindak Lanjut dan Tindakan Tumpang Tindih
- Lambat Masuk dan Lambat Keluar
- Busur
- Tindakan Sekunder
- Pengaturan waktu
- Berlebihan
- Gambar Padat
- Menarik
Animasi web sering disimpan sebagai GIF, CSS, SVG, WebGL, atau video. Mereka bisa apa saja mulai dari garis bawah sederhana yang muncul saat Anda mengarahkan kursor ke sebuah kata hingga video layar penuh atau gambar latar belakang. Seperti teknik desain lainnya, animasi bisa halus atau mungkin ada di wajah Anda dan sulit dihindari.
Teknik Animasi Abadi
Apa yang berhasil – atau tidak – dalam hal animasi web lebih mudah dilihat daripada dijelaskan. Anda hanya tahu bahwa gerakan itu benar dan berhasil jika memang demikian; sebaliknya kecepatannya terlalu cepat atau lambat, Anda juga langsung tahu kapan tidak.
Untuk membantu memandu keputusan animasi Anda, Anda mungkin ingin menghindari beberapa elemen yang lebih trendi dan tetap berpegang pada beberapa elemen desain animasi yang lebih abadi. Teknik ini memberikan panduan dasar yang dapat membantu Anda membuat sesuatu yang dapat digunakan dan menarik secara visual.
- Navigasi: Gunakan animasi mikro untuk menunjukkan kepada pengguna saat mereka mengaktifkan elemen atau item menu sebelum mengklik atau mengetuk
- Arahkan status: Mikro-animasi lain yang dapat memfasilitasi pengalaman pengguna dengan petunjuk tentang apa yang dapat ditindaklanjuti
- Video: Animasi utama ini bisa menjadi jenis konten yang menarik yang membantu menceritakan sebuah kisah dengan desainnya
- Transisi geser: Dipopulerkan di tajuk pahlawan, metode ini memindahkan gambar atau ilustrasi melalui gulir atau tindakan otomatis (triknya di sini adalah membuat setiap transisi sehalus mungkin)
- Menggulir: Mulai dari efek paralaks hingga transisi animasi yang lebih kompleks, scroll adalah tempat yang tepat untuk menambahkan gerakan halus untuk menunjukkan pergeseran konten
- Animasi latar belakang: Elemen gerak yang halus dapat membuat gambar statis menjadi lebih menarik dan memberikan elemen kejutan bagi pengguna
- Selamat datang atau memuat animasi: Banyak animasi halaman selamat datang menyembunyikan masalah pemuatan, tetapi jika dilakukan dengan benar, gerakannya cukup menarik sehingga tidak mengganggu dan mengalihkan perhatian pengguna dari kelambatan.
- Animasi bercerita: Gerakan dapat membantu mengatur adegan untuk konten di dalamnya dan dapat membantu pengguna tetap berada di situs web lebih lama saat mereka masuk ke dalam cerita yang ada.
Animasi Besar vs. Kecil
Dan jangan lupakan animasi mikro. Ini adalah elemen animasi super pendek yang berkaitan dengan antarmuka pengguna dan membantu orang melalui perjalanan situs web.
Dalam hal membuat animasi untuk web, animasi terbagi menjadi dua kategori yang mudah dipahami: besar dan kecil. Dan dalam animasi kecil ada kategori lain – mikro.
Animasi besar adalah animasi yang memiliki skala. Seringkali dalam bentuk video dengan waktu tayang, animasi berskala besar mengisi sebagian besar layar dan menjadi ciri khas film pendek. Animasi ini berfungsi sebagai titik fokus dalam keseluruhan desain. Pengguna sering kali tidak perlu melakukan tindakan apa pun untuk melihat animasi bergerak. Jika Anda mengamati dengan cermat di situs Studio Meta, setiap gambar besar diperbesar saat Anda membaca salinannya.
Animasi kecil adalah potongan-potongan kecil yang Anda temukan saat Anda mulai berinteraction dengan situs web. Divot ini mungkin dalam bentuk hover state, potongan kecil ornamen atau panduan atau alat kegunaan. Animasi kecil adalah aksen yang berkontribusi pada estetika keseluruhan, tetapi tidak mungkin menjadi fokus desain. Di situs Henry Brown, animasi sederhananya adalah jika Anda melihat lebih dekat, mata dalam ilustrasi itu benar-benar berkedip.
Dan jangan lupakan animasi mikro. Ini adalah elemen animasi super pendek yang berkaitan dengan antarmuka pengguna dan membantu orang melalui perjalanan situs web. Itu bisa apa saja mulai dari tindakan melayang hingga panah berkedip yang menunjukkan gulir. Mikro-animasi terbaik adalah bagian pengalaman pengguna yang hampir tidak terlihat dan mulus, tetapi ada di sana jika Anda membutuhkan bantuan atau informasi.
Kapan Menggunakan Animasi
Animasi bisa menjadi trik kecil yang bagus untuk kit alat desain Anda, tetapi tidak untuk setiap proyek. Animasi harus halus dan mulus, tidak melompat atau mekanis. Itu perlu melayani tujuan bagi pengguna dan tidak menghalangi konten.
Alasan utama menggunakan animasi adalah untuk meningkatkan kegunaan. Animasi sederhana dapat menjadi alat panduan yang hebat untuk membantu orang memahami tombol apa yang harus diklik atau ke mana harus pergi selanjutnya di peta situs web. Banyak desainer yang menggunakan efek pengguliran kompleks memasangkan animasi sederhana dengan alat pengguna untuk menggulir atau mengeklik. (Ini termasuk semuanya, mulai dari ikon memantul sederhana atau kata-kata yang muncul dan bertuliskan “gulir ke bawah”.)
Kegunaan datang dalam beberapa bentuk:
- Fungsi komunikasi atau cara menggunakan situs web
- Menarik pengguna ke desain keseluruhan atau elemen tertentu
- Meningkatkan interaction dan keterlibatan
- Tampilkan perubahan, seperti mengisi formulir dengan benar atau menandai bahwa suatu elemen dapat diklik
- Bangun hubungan emosional yang lebih baik atau lebih kuat
- Buat alur atau arahkan pengguna ke ajakan bertindak
- Tingkatkan pengalaman pengguna secara keseluruhan
Animasi juga bisa menjadi “hiasan” yang bagus. Terkadang tujuan elemen animasi murni visual dan itu adalah penggunaan yang dapat diterima. Animasi dekoratif ini dapat membantu menceritakan kisah atau menciptakan hubungan emosional antara antarmuka dan pengguna. Tujuan animasi dapat memicu minat visual dan membuat pengguna tetap terlibat dengan situs Anda untuk jangka waktu yang lebih lama.
Saat membuat animasi visual murni, pertimbangkan apa yang seharusnya dilakukan. Pikirkan tentang koneksi yang Anda ingin dimiliki pengguna. Apakah itu seharusnya menyenangkan atau mengejutkan? Apakah itu sedikit konten unik yang dirancang untuk dibagikan? Bahkan visual murni pun harus memiliki tujuan.
Sumber daya
Siap untuk memulai animasi? Berikut adalah beberapa sumber untuk bacaan lebih lanjut dan alat untuk membantu Anda memulai.
Kesimpulan
Dalam hal animasi, aturan praktisnya adalah sebagai berikut: Animasi yang baik akan membuat pengalaman pengguna menjadi lebih baik. Ini bisa dalam bentuk hubungan emosional – seperti pengalaman yang menyenangkan dan positif – atau dengan membuat situs lebih mudah digunakan.
Animasi adalah teknik menyenangkan yang menjadi lebih standar untuk berbagai aplikasi. Jika Anda sedang mencari inspirasi, pastikan untuk membaca kembali artikel ini dan klik tautan ke contoh visual di seluruh halaman, kunjungi situsnya dan bermainlah dengan fitur animasi di dalamnya. Selamat bersenang-senang!
