Cara menambahkan animasi secara strategis ke situs Anda

Penggunaan animasi dalam desain web sebenarnya bukanlah hal yang baru.

Ingat era lama memutar gif 3D?

Bagaimana dengan hidup dan mati Flash?

Setelah Apple melarang penggunaan Flash di semua perangkat berbasis seluler mereka, desainer dengan cepat menemukan cara untuk mengembalikan animasi ke dalam game. Berkat kreativitas pengembang dan desainer web, kami sekarang memiliki keajaiban transisi CSS3, animasi SVG, GIF berkualitas tinggi, dan tentu saja, video animasi yang dibuat dengan program seperti After Effects dan Blender.

Ada beberapa tahun baru-baru ini di mana trennya adalah mendesain situs datar. Untungnya, animasi telah kembali dengan pesat dan sekarang menjadi salah satu tren terbesar untuk 2018 dan seterusnya.

Animasi kini telah menjadi sebuah harapan.

Pengaruh positif animasi pada Desain UX dan UI tidak mengherankan, karena bagaimana manusia adalah makhluk visual dan akan selalu tertarik pada gerak dan gerakan. Animasi dapat menghidupkan proses apa pun, mengubahnya menjadi pengalaman. Gerakan memberi tahu pengguna bahwa sesuatu sedang terjadi.

Misalnya, animasi di dalam sel formulir dapat memberi tahu pengguna bahwa mereka telah melakukan kesalahan atau ada informasi yang hilang. Atau ketika memasukkan kata sandi dan itu salah, tanda bintang bisa berubah menjadi merah, menari-nari kecil, dan menghilang.

Animasi dari The Kinetic UI

Atau bagaimana dengan animasi login yang menyenangkan ini? Kemungkinan animasi dalam desain web berkembang setiap hari. Mengapa tidak menambahkan beberapa animasi strategis ke situs Anda juga?

Animasi oleh Darin di Dribbble

Menganimasikan Situs Anda

Opsi tentang cara menambahkan animasi ke situs Anda cukup luas, tetapi itu tidak berarti bahwa itu harus dipenuhi dengan ikon melompat dan tombol berputar. Perlu ada keseimbangan dalam jumlah animasi yang Anda sertakan dalam desain Anda. Pikirkan lebih banyak di sepanjang garis "gerakan lembut" daripada halaman yang bergerak begitu banyak sehingga Anda tidak tahu ke mana harus mencari. Terlalu sering menggunakan animasi sama menyakitkannya dengan minimalis yang berlebihan!

Menggunakan program seperti Adobe XD dapat membantu proses mencoba berbagai animasi untuk ditempatkan secara strategis di situs Anda. Jika Anda suka membangun langsung ke WordPress, maka opsi yang bagus adalah Divi Builder, yang hadir dengan banyak kemungkinan animasi di dalam setiap modul.

Di akhir artikel, saya telah menyertakan beberapa tautan ke beberapa sumber hebat yang akan membantu menambahkan animasi ke situs Anda.

Mari kita lihat berbagai jenis animasi yang dapat meningkatkan UX situs Anda dan komposisi visual secara keseluruhan.

Fungsional atau Estetika

Animasi memiliki dua kegunaan dalam desain web; fungsionalitas dan estetika.

animasi fungsional

Animasi dapat membantu pengunjung dengan perjalanan pengguna mereka di situs Anda. Mereka memberi perhatian pada ajakan bertindak atau bagian penting yang Anda tidak ingin mereka lewatkan. Mereka membuat proses lebih mudah dan menyenangkan secara visual.

Memuat animasi

Animasi fungsional yang paling umum, dan salah satu yang pertama menjadi hal biasa dalam desain situs web, adalah animasi pemuatan. Ini digunakan untuk ditemukan terutama ketika sebuah situs pertama kali dibuka, tetapi sekarang situs dimuat secara instan, digunakan untuk hal-hal seperti memuat video, perkembangan unduhan, dan proses lain yang mungkin dimiliki situs Anda.

Agar animasi pemuatan Anda efektif, itu harus sesuai dengan merek Anda. Jika situs Anda menyenangkan dan penuh warna, animasi pemuatan Anda dapat berupa apa saja, mulai dari bola yang memantul hingga lingkaran berwarna-warni. Di sisi lain, jika situs Anda serius dan formal, maka animasi pemuatan harus mengikuti gaya itu.

Animasi oleh Sharon Yar dan Dilys Lim di Behance

Animasi dari UXPin dari situs Tom Cole Architecture

Melayang

Animasi fungsional umum lainnya yang harus Anda pertimbangkan adalah melayang. Kami sudah cukup terbiasa melihat animasi melayang dan kebanyakan orang akan mengharapkannya. Membuat tombol berubah warna saat diarahkan adalah animasi dasar yang harus Anda pertimbangkan untuk digunakan, baik di menu atau ajakan bertindak.

Cara lain menggunakan hover adalah untuk tombol yang tidak terlihat seperti tombol, atau jika Anda ingin menampilkan informasi di hover sebelum tombol tersebut diklik.

Animasi dari Design Shack

Menggulir

Website dengan efek scroll bukan lagi fenomena unik. Pengguliran paralaks telah menjadi sangat populer (dan menjadi sedikit melelahkan, sejujurnya). Jadi jika Anda ingin menggunakan pengguliran animasi, pikirkan di luar kebiasaan. Sertakan elemen yang berpindah dari bagian ke bagian, elemen yang muncul secara progresif dengan gulir. Pikirkan fungsionalitas serta estetika.

Animasi oleh Youandigraphics

Animasi estetika

Animasi estetis atau dekoratif adalah animasi yang membuat situs lebih menarik secara visual tetapi tidak selalu membantu fungsionalitasnya. Ada metafora lama dari era kartun Walt Disney pertama, bahwa animasi adalah "ilusi kehidupan." Apa yang dilakukan animasi pada gambar statis adalah menghidupkannya, membuatnya bernafas.

Dengan jumlah animasi estetika yang tepat, situs Anda bisa menjadi tak terlupakan.

Sama seperti animasi fungsional, animasi dekoratif juga perlu memiliki keseimbangan. Tanyakan pada diri Anda apakah latar belakang animasi itu benar-benar diperlukan, atau apakah itu cocok dengan merek Anda. Apakah setiap foto perlu dianimasikan ke layar atau Anda memerlukan banyak pop-up? Pastikan animasi yang Anda tambahkan cukup untuk membuat situs Anda bagus untuk dilihat tetapi tidak berlebihan.

Latar Belakang Animasi

Latar belakang animasi paling trendi saat ini adalah latar belakang partikel, dari titik bergerak sederhana hingga gerakan efek cahaya yang kompleks. Ini dapat ditambahkan sebagai latar belakang untuk seluruh halaman atau hanya untuk bagian. Mereka dapat membuat area situs Anda memiliki lebih banyak kepribadian. Ingatlah bahwa tren berubah, jadi jika Anda menggunakan latar belakang partikel, pastikan itu benar-benar sesuai dengan situs Anda.

Animasi oleh Femme Fatale

Kreativitas Tanpa Batas

Last but not least, apa yang dapat dilakukan animasi untuk situs Anda adalah menawarkan kreativitas tanpa batas. Karena Anda dapat menganimasikan apa saja, kemungkinan kreatif tidak terbatas. Dari latar belakang animasi hingga hal-hal yang bergerak di layar dan bahkan animasi halus seperti karakter yang berkedip.

Sebuah situs dapat sangat bergantung pada animasi sehingga perjalanan melalui halaman adalah pengalaman yang sebenarnya. Ambil situs baru untuk Porsche, misalnya, yang menunjukkan sejarah pabrikan mobil selama bertahun-tahun.

Atau gabungkan ilustrasi isometrik dan pengguliran animasi dan Anda mendapatkan situs luar biasa seperti RollPark.

Animasi dari Rollpark

Selalu optimalkan untuk seluler!

Tidak adil bagi saya untuk tidak mengingatkan Anda bahwa Anda harus selalu memeriksa animasi Anda di ponsel. Pastikan mereka bekerja sebagaimana mestinya dan lakukan penyesuaian jika tidak. Jika Anda menggunakan animasi SVG, maka Anda seharusnya tidak memiliki banyak masalah karena grafik .svg dapat diskalakan tanpa batas.

Either way, selalu memeriksa di ponsel dan mengoptimalkan animasi Anda untuk semua format akan membuat situs Anda jauh lebih baik!

Alat untuk membantu Anda menghidupkan situs Anda

Berikut adalah daftar tautan ke artikel praktis untuk berbagai jenis animasi yang dapat Anda gunakan di situs Anda.

• Koleksi perpustakaan animasi gratis
• Kemampuan animasi DIVI Builder
• Pencipta Latar Belakang Partikel
• Dua cara untuk membuat latar belakang partikel sederhana dengan CSS
• Menggunakan Animasi SVG

Kesimpulannya

Jaga agar animasi Anda seimbang dalam hal fungsionalitas dan estetika. Mereka adalah alat untuk menghidupkan situs Anda, bukan membuatnya berlebihan. Ingatlah untuk menjadi kreatif dan berpikir di luar kotak.

Saat membangun situs web Anda berikutnya (atau memperbarui yang sudah ada), apakah Anda akan menambahkan beberapa animasi ke desain? Ingat: Yang terbaik adalah bereksperimen di situs pementasan atau situs lokal sebelum Anda menambahkan kode baru apa pun secara permanen ke situs aktif!

Jenis animasi situs web apa yang akan Anda coba selanjutnya?

Buat animasi Anda sendiri dengan tutorial ini!

• Cara membuat animasi SVG dengan CSS
• Cara menggunakan transisi dan transformasi CSS3 untuk membuat animasi