Dokumen ini dibuat untuk membantu pengguna Framer di Indonesia yang mengalami kesulitan karena kurangnya sumber informasi dalam bahasa Indonesia, dengan menerjemahkan konten blog resmi ke dalam bahasa Indonesia dan menambahkan informasi praktis yang berguna. Semoga dapat sedikit membantu Anda yang menggunakan FramerFramer.

Di awal internet, situs web sebagian besar terdiri dari halaman statis sederhana dengan teks dan gambar. Namun, sekarang berbeda. Animasi situs web memungkinkan penceritaan, interaksi, dan efek emosional yang tidak dapat dicapai dengan desain statis.

Animasi tidak hanya menambah estetika visual. Ini membimbing perhatian pengguna, menyusun alur halaman, dan membuat interaksi lebih intuitif. Dengan menerapkan animasi dan interaksi yang tepat, bahkan halaman web statis dapat menjadi pengalaman yang menginspirasi dan menggerakkan pengguna. Artikel ini memperkenalkan contoh-contoh animasi situs web dari galeri FramerFramer. Teknik seperti efek hover, transisi scroll, dan animasi latar belakang mengapa dan bagaimana dapat membedakan merek, memperkuat pengalaman pengguna, dan meningkatkan tingkat konversi.

Animasi Latar Belakang

Animasi Latar Belakang (Background Animations) menambah dinamis dan imersi pada situs web. Anda dapat menerapkannya secara halus seperti animasi gradasi, atau sebagai elemen pusat desain halaman seperti efek paralaks. Bagaimanapun, animasi latar belakang memperkuat aliran visual situs dan membentuk suasana saat pengunjung menelusuri.

Contoh-Yuna

Yuna adalah aplikasi yang membuat dongeng interaktif yang dipersonalisasi sesuai umur anak. Dikenal membantu pembentukan kebiasaan membaca serta perkembangan kreativitas dan imajinasi. Situs web Yuna menggambarkan fitur ini dengan animasi menyerupai buku cerita.

Efek paralaks berperan penting. Tiga lapisan bergerak dengan kecepatan berbeda sehingga adegan orang tua membaca dengan anak dapat dihadirkan. Di latar depan, awan dan dedaunan bergerak perlahan, menciptakan suasana yang mendongeng. Ketika di-scroll, animasi masuk dan gerakan lincah ikon menciptakan kesan ceria dan energik.

Kunjungi Situs Web

Efek Hover

Efek Hover (Hover Effects) membantu pengguna membedakan elemen yang dapat diklik secara intuitif. Pada saat yang sama, efek ini membuat proses penelusuran lebih dinamis dan menarik, serta berfungsi sebagai kesempatan untuk memperkuat citra merek. Anda dapat memanfaatkannya dalam berbagai cara, mulai dari efek sederhana yang mengubah warna, ukuran, atau arah tombol atau menu hingga interaksi yang dirancang secara canggih.

Contoh-Unifiers of Japan

Situs web bertema sejarah Jepang ini menonjolkan animasi yang berlimpah. Sebuah adegan dramatis dari tokoh sejarah yang berubah menjadi samurai memberikan kesan yang kuat.

Interaksi menu juga diatur dengan cermat. Misalnya, ketika mouse melayang di atas kata 'Menu', garis bawah muncul dengan lembut dan ketika melayang di setiap item menu, grafik terkait berubah secara alami. Interaksi kecil ini membangun situs yang tidak hanya hidup tetapi juga memiliki respons yang baik.

Kunjungi Situs Web

Efek Transisi Halaman

Secara umum, perpindahan halaman di situs web berakhir hanya dengan memuat halaman baru. Namun, menerapkan Efek Transisi Halaman (Page Transitions) membuat proses ini lebih mulus, elegan, dan meninggalkan kesan profesional. Efek seperti fade-in atau slide-in mungkin tampak sepele tetapi dapat membuat perbedaan besar dalam pengalaman pengunjung.

Contoh-Dynex

Dynex yang berurusan dengan teknologi blockchain dan komputasi kuantum membutuhkan tampilan situs yang mengarah ke masa depan. Situs web Dynex dilengkapi dengan desain elegan dan transisi halaman yang diperhatikan dengan cermat. Saat Anda mengklik menu, halaman baru muncul dari kiri ke kanan dengan alami. Meskipun pengguna tidak menyadarinya secara sadar, itu meningkatkan profesionalisme dan keandalan merek.

Kunjungi Situs Web

Animasi Masuk

Menghadapi blok teks besar langsung pada tampilan pertama situs web dapat membuat pengunjung merasa kewalahan. Menggunakan ruang kosong dan gambar untuk memisahkan konten adalah efektif, tetapi menggunakan Animasi Masuk (Entrance Animations) dapat menunjukkan pesan secara bertahap dan memandu perhatian pengguna secara alami.

Contoh-Tellet

Ketika membuka situs web Tellet, judul, gambar, deskripsi, dan ajakan bertindak di bagian atas semuanya muncul perlahan-lahan ke atas. Saat Anda gulir ke bawah, layar berubah lebih dinamis, dengan grafik dan statistik bergerak dari kanan ke kiri dalam animasi yang mengembangkan produk. Ini memungkinkan pengguna untuk memahami setiap data tanpa merasa terbebani.

Meskipun penggunaan animasi masuk yang berlebihan dapat terkesan kuno, penerapannya yang tepat dapat menjadi bagian dari perpanjangan merek. Dengan karakteristik warna neon terang dan nada bahasa yang ramah, merek Tellet berpadu secara alami dengan animasi masuk yang digunakan di situs web.

Kunjungi Situs Web

Animasi Memuat

Pengunjung situs web tidak sabar menunggu. Menurut Google, jika waktu memuat halaman meningkat dari 1 hingga 3 detik, kemungkinan pengunjung meninggalkan situs naik 32%. Semakin lama waktu pemuatan, semakin banyak pengguna yang pindah ke tempat lain. Animasi Memuat (Loading Animations) berperan dalam mengurangi waktu tunggu yang terasa. Ini dapat dilakukan dengan menampilkan kecepatan melalui batang kemajuan, atau dengan menampilkan 'skeleton screen' yang menunjukkan kontur halaman terlebih dahulu sebelum mengisi detailnya.

Contoh-Coding for Designers

Layar pemuatan umum biasanya menyertakan ikon berputar sederhana. Namun, layanan pembelajaran online Coding for Designers memperkuat merek dengan memamerkan pesan “Learn, Design, Code!” melalui animasi. Setelah pemuatan selesai, layar naik secara halus untuk memunculkan isi situs web.

Cara ini, berbeda dengan layar pemuatan biasa, memberi pengguna rasa bahwa mereka berada di tempat yang tepat, memberikan kesan seperti intro pendek sebelum video YouTube. Ini cocok dengan merek tanpa mengganggu.

Kunjungi Situs Web

Animasi Pencetus Gulir

Situs web statis memerlukan pengguna untuk secara aktif menavigasinya. Namun, dengan menerapkan Animasi Pencetus Gulir (Scroll-Triggered Animations), situs web berfungsi seperti slide interaktif, memungkinkan fokus baru setiap kali di-scroll. Ini meningkatkan imersi sambil mengurangi beban karena informasi disajikan dalam unit kecil.

Contoh-tinyPod

Apakah Anda ingat roda klik klasik dari iPod asli? Tampaknya, pembuat tinyPod juga berbagi kenangan itu. tinyPod adalah sebuah case yang mengubah faktor bentuk Apple Watch menjadi replika miniatur dari iPod yang dirilis pada tahun 2001. Gagasan yang sangat menarik, tetapi sedikit rumit untuk dijelaskan hanya dengan satu foto. Oleh karena itu, halaman landas berbasis cerita bergulir yang sempurna untuk menceritakan langkah demi langkah.

Saat halaman dimuat, hal pertama yang terlihat adalah tinyPod berputar turun dari awan. Ketika Anda menggulir, berbagai fungsi produk dan aplikasi muncul satu per satu, dari panggilan, musik, hingga pesan. Pada adegan terakhir, tinyPod berada di tangan pengguna, dan pesan yang menjelaskan alasan pembelian muncul di sebelahnya, menyelesaikan cerita.

Kunjungi Situs Web

Interaksi Mikro

Interaksi Mikro (Microinteractions) adalah animasi yang menanggapi tindakan kecil pengguna. Tooltip, menu akordeon, efek hover, indikator kekuatan kata sandi, dan pesan validasi semuanya termasuk dalam kategori ini. Ini memberitahu pengguna bahwa tindakan mereka telah diakui dan menambah kepraktisan sambil memberi desain lebih banyak karakter.

Contoh-Ozone

Ozone, alat pembuatan video AI, memanfaatkan interaksi mikro secara ekstensif, dan bahkan dengan melihat satu bagian dari homepage, Anda dapat melihat tiga contoh. Animasi pengeditan video yang mengubah kursor saat di-hover, widget menunjukkan hasil produk dalam berbagai format, dan animasi zoom ikon untuk menyorot fungsi kolaborasi, semuanya dapat diperhatikan.

Kunjungi Situs Web

Animasi Pencetus Mouse

Animasi Pencetus Mouse (Mouse-Triggered Animations) menyediakan interaksi yang lebih kaya di situs web. Dengan menggunakan efek penelusuran mouse, elemen bergerak mengikuti posisi kursor. Ada juga animasi pencetus mouse yang umum seperti rotasi objek 3D dan efek paralaks.

Animasi yang dipicu oleh mouse menanggapi masukan pengguna secara langsung, menawarkan pengalaman yang lebih immersif, memungkinkan pengguna untuk tetap berada di bagian tertentu dari situs web, dan memberikan kesempatan untuk mengalami tingkat fungsi baru.

Contoh-GitBook

Situs web GitBook memiliki desain dasar yang baik. Dengan tata letak yang bersih, ruang kosong, dan palet warna, animasi yang menanggapi mouse memperkuat pengalaman.

Setiap bagian dari halaman landas disusun dari gambar yang menjelaskan fitur produk, dan gambar-gambar ini dibuat dalam 3D untuk menanggapi gerakan kursor pengguna. Ini menarik perhatian pengguna dan memungkinkan mereka lebih mendalami fitur-fitur tersebut.

Kunjungi Situs Web

Animasi Produk Interaktif

Alih-alih meminta pengguna untuk menjadwalkan demo atau menonton panduan, Animasi Produk Interaktif (Interactive Product Animations) dapat menunjukkan nilai produk hanya dalam beberapa detik. Baik membimbing pengguna melalui fitur produk langkah demi langkah atau menampilkan fitur utama secara langsung, animasi produk membantu pengguna memahami produk dan meningkatkan tingkat konversi.

Contoh-Cradle

Cradle adalah perusahaan bioteknologi yang memungkinkan Anda merancang varian urutan protein dengan beberapa klik. Meskipun ini adalah bidang yang sangat spesialis, situs webnya menunjukkan ini secara intuitif.

Pengguna dapat merasakan layar produk simulasi di situs web, dan dengan mengklik tombol 'Generate variants', mereka dapat melihat proses pembuatan varian melalui animasi. Demo mini sederhana ini membuatnya mudah untuk memahami produk dan meningkatkan kepercayaan.

Kunjungi Situs Web

Animasi Teks

Animasi Teks (Text Animations) berfungsi sebagai elemen untuk menambah gaya dan menarik perhatian pengguna. Ini mengundang partisipasi dan memperluas wawasan dalam desain, ekspresi merek, dan penceritaan. Teknik khas termasuk efek mengetik, fade-in, dan slide-in.

Contoh-Biograph

Biograph menyediakan layanan kesehatan yang disesuaikan dengan harga tinggi, menekankan citra premium dengan desainnya. Di situs webnya, animasi teks digunakan untuk menciptakan suasana yang mewah dan misterius. Ketika homepage dibuka, judulnya muncul secara bertahap dalam fokus, dan setiap kali di-scroll, judul lain berubah dari kabur menjadi jelas, mendorong pengguna berhenti sejenak dan fokus.

Kunjungi Situs Web

Efek 3D

Efek 3D (3D Effects) membuat kesan pertama yang kuat. Dengan menerapkan kedalaman dan rotasi pada objek, pengalaman imersi dirasakan, terutama di situs e-commerce yang sering memungkinkan produk diputar. Selain itu, terdapat infografis interaktif, kartu flip, dan galeri gambar 3D yang sering digunakan.

Contoh-Portofolio Tim Quirino

Desainer Tim Quirino menciptakan portofolio yang menonjolkan efek 3D menggunakan animasi FramerFramer dan Spline. Dengan tema berbasis ruang angkasa, pengunjung dapat menjelajahi planet dan satelit seolah-olah bermain game, sambil melihat proyek-proyek. Kursor berubah menjadi gambar yang mewakili setiap proyek, dan mengkliknya membuka halaman detail.

Meski mungkin mengurangi efisiensi navigasi, metode ini memberikan kesan kuat sejak pengunjung masuk ke situs dan membentuk suasana unik untuk keseluruhan portofolio.

Kunjungi Situs Web

Cara Meningkatkan Partisipasi Pengguna dengan Animasi Situs Web

Dengan FramerFramer, Anda dapat menambahkan animasi dengan mudah sambil mempertimbangkan kreativitas, kegunaan, kinerja, dan aksesibilitas. Berikut adalah beberapa tips praktis yang dapat Anda gunakan ketika menerapkannya.

1. Setiap Animasi Punya Tujuan

Jangan tambahkan animasi hanya karena bisa. Setiap animasi harus berfungsi untuk meningkatkan pengalaman pengguna dan merek. Misalnya, mulailah dengan cara sederhana seperti efek hover, dan kemudian gunakan animasi berbasis gulir untuk menyusun alur informasi.

2. Pertahankan Partisipasi dengan Interaksi Mikro

Animasi kecil seperti perubahan warna tombol, perbesaran ukuran, dan efek denyut dapat efektif dalam mendorong tindakan. Selain itu, memberikan umpan balik saat verifikasi input atau penyelesaian tugas dapat meningkatkan pengalaman pengguna.

3. Prioritaskan Kinerja dan Kecepatan Memuat

FramerFramer menawarkan animasi ringan dan fitur pemuatan malas. Jika terjadi penurunan kinerja, pertimbangkan untuk beralih ke animasi CSS atau mengoptimalkan gambar dan video, dan kurangi jumlah animasi yang digunakan.

4. Pertimbangkan Aksesibilitas

Sebagian pengguna merasa tidak nyaman dengan gerakan berlebihan. Di FramerFramer, Anda dapat menerapkan opsi pengurangan gerakan berdasarkan pengaturan peramban pengguna. Ketika diaktifkan, animasi yang banyak gerakan akan dinonaktifkan, dan hanya efek yang lebih stabil seperti perubahan opasitas atau warna latar belakang akan tetap ada.

5. Gunakan untuk Penceritaan

Animasi adalah alat yang sangat baik untuk membantu pengguna mengikuti sebuah narasi. Seperti dalam kasus tinyPod, animasi berbasis gulir dapat menata teks dan gambar secara bertahap, memperkuat kapasitas penceritaan. Interaksi Mikro juga dapat berfungsi sebagai sarana untuk mendorong partisipasi pada poin penting.

Artikel ini adalah adaptasi dari konten blog resmi FramerFramer '11 strategi animasi profesional: dampaknya pada metrik UX & konversi'.