Dokumen ini dibuat untuk mengatasi kesulitan pengguna lokal yang belajar FramerFramer karena kurangnya sumber daya dalam Bahasa Indonesia, dengan menerjemahkan isi blog resmi ke Bahasa Indonesia dan menambahkan informasi yang berguna untuk praktik kerja. Semoga dapat sedikit membantu Anda yang menggunakan FramerFramer.

Untuk kembali merasakan daya tarik efek hover di situs web, kami telah mengumpulkan contoh inspiratif yang diusulkan oleh desainer terkenal dari dalam dan luar negeri. Apakah Anda ingin membuat portofolio menonjol atau membangun situs web yang elegan untuk merek, efek hover dapat digunakan di berbagai situasi. Dalam artikel ini, kami juga memperkenalkan cara menerapkan setiap efek langkah demi langkah menggunakan FramerFramer. Buatlah pengalaman yang khusus bagi pengunjung situs, sehingga mereka ingin kembali lagi.

Seimbangnya fungsi dan kesenangan visual adalah yang terpenting dalam efek hover. Meskipun bisa menjadi hiasan sederhana, efek ini dapat membantu navigasi, memperkuat citra merek, dan meningkatkan partisipasi pengguna. Jika digunakan dengan tepat, efek hover dapat menjadi perbedaan penting antara pengunjung yang ragu dan pelanggan yang memilih.

Artikel ini memperkenalkan 12 contoh dan metode efek hover yang dapat Anda implementasikan sendiri dengan FramerFramer.

Perubahan Warna

Contoh_Remix.supply

Remix.supply menerapkan efek perubahan warna pada tombol CTA, memungkinkan pengguna mengenali elemen yang dapat diinteraksi dan mendorong hingga menjadi konversi. Warna yang digunakan pada tombol tidak terlalu penting, namun memberikan kontras warna yang kuat adalah inti utama, sehingga kombinasi yang tidak mencolok seperti tombol abu-abu pada latar belakang hitam sebaiknya dihindari.

Tips Implementasi FramerFramer: Pilih komponen dan atur warna Fill dari panel Hover. Anda juga bisa dengan mudah mengatur opasitas atau nilai border.

2. Memperbesar Gambar

Contoh_Martinie Design

Portofolio Chris Martinie menerapkan penyesuaian ukuran gambar yang halus, memberikan pengalaman baru saat pengguna menjelajahi galeri. Saat menjelajahi portofolio ini, perlu dikomunikasikan dengan jelas bahwa setiap gambar dalam portofolio dapat di-klik.

Ketika menambahkan efek perubahan ukuran gambar ke situs, kami menyarankan menggunakan gambar berkualitas tinggi. Gambar dengan resolusi rendah dapat terlihat buram setelah diperbesar. Dengan demikian, saat menggunakan efek perubahan ukuran, pastikan pengalaman pengguna tidak terganggu sambil memberikan pengalaman interaksi yang elegan.

Tip Implementasi FramerFramer: Nilai Skalasi dapat disesuaikan dari panel Efek Hover. Pilih gambar dan klik memperbesar, lalu sesuaikan nilainya hingga menemukan keseimbangan yang tepat. Gunakan fitur Easing untuk animasi yang lebih lembut untuk memastikan animasi tetap halus dan selaras dengan citra merek.

Lihat Situs>

3. Transformasi Teks

Contoh_Trifecta

Studio pertumbuhan yang berbasis di New York, Trifecta, menggunakan efek hover untuk membuat teks interaktif dan mengubah headline umum serta paragraf menjadi tipografi yang menarik. Saat mouse ditempatkan di berbagai area, elemen teks berubah menjadi huruf miring. Perubahan ini cepat namun mulus, menambahkan minat dan keterbacaan pada informasi utama.

Saat menambahkan efek hover teks, jaga kecepatannya di bawah 200ms untuk mempertahankan kesan energik, dan gunakan interaksi ini hanya pada pesan penting yang ingin Anda tarik perhatian. Jika terlalu banyak gerakan, situs dapat terlihat ramai dan menyulitkan untuk fokus pada pesan utama yang paling krusial.

Tip Implementasi FramerFramer: Pilih elemen teks di FramerFramer, lalu buka panel efek hover untuk menambahkan efek kemiringan yang mengubah teks dengan cepat. Selanjutnya, sesuaikan nilai transformasi sesuai gaya tipografi untuk menemukan sudut optimal.

Lihat Situs>

4. Eksposur Konten

Contoh_Claudio Guglieri

Desainer UX San Francisco, Claudio Guglieri, menggunakan efek hover untuk membuat kontak menjadi elemen menarik dan mencegah halaman dipenuhi oleh informasi kontak. Saat menyorot teks "Let’s collaborate", alamat email terungkap secara alami, dan warna panah berdekatan juga berubah.

Interaksi dalam mengekspos konten secara user-friendly adalah memastikan ukuran konten tersembunyi sama dengan yang terlihat agar tata letak tidak berubah aneh. Menambahkan penanda visual kecil seperti panah atau garis bawah dapat membantu pengguna untuk menemukan konten tersembunyi dengan lebih intuitif.

Tip Implementasi FramerFramer: Anda dapat memasukkan dua elemen motion.div ke dalam satu kontainer menggunakan FramerFramer untuk menciptakan efek eksplorasi konten serupa. Tampilkan satu konten dan sembunyikan yang lain, lalu gunakan atribut whileHover dari Motion untuk mengubah tampilan dan posisi saat mouse diarahkan.

Lihat Situs>

5. Efek Bayangan

Contoh_FEASTIE Festival

FEASTIE, festival yang diadakan di Toronto, menambah kedalaman pada tombol menggunakan efek hover. Efek bayangan 3D mengubah elemen datar menjadi lebih menarik dan cocok dengan branding tahun 1970-an FEASTIE.

Saat menambahkan efek bayangan pada desain, disarankan untuk menjaga konsistensi visual dengan menerapkan arah cahaya yang sama ke semua elemen situs. Untuk elemen yang terlihat naik ke atas halaman, gunakan bayangan yang lebih besar untuk menciptakan perspektif.

Tip Implementasi FramerFramer: Dari pengaturan Efek komponen, pilih 'Hover' lalu ubah pengaturan bayangan dan offset untuk menghasilkan efek bayangan saat hovering. Untuk efek bayangan yang lebih canggih, lihat panduan bayangan realistis dari FramerFramer.

Lihat Situs>

6. Kursor Kustom

Contoh_Kind Heart Design

Studio desain Kind Heart menggunakan efek hover yang mengubah kursor secara khusus. Saat mouse diletakkan di atas proyek Kind Heart, kursor berubah menjadi tombol "View Work".

Saat merancang kursor, desainlah yang ringan dan proporsional terhadap ukuran kursor standar agar tidak mengganggu aliran navigasi pengguna. Pastikan juga kursor memiliki kontras yang cukup dengan semua latar belakang agar mudah terlihat.

Tip Implementasi FramerFramer: Gunakan alat kursor kustom untuk menciptakan efek kursor yang beroperasi saat mouse over. Sesuaikan reaksi transformasi sesuai dengan lapisan di bawah mouse, memastikan kursor tersebut menggiring pengguna ke informasi yang diinginkan.

Lihat Situs>

7. Animasi Border

Contoh_Slides Agency

Slides, agensi desain PPT, menerapkan efek yang mengubah tepi menjadi bulat lembut saat Hover pada galeri, memperjelas bahwa gambar dapat diklik oleh pengguna.

Saat mewujudkan animasi transformasi radius tepi, terapkan perubahan secara halus. Sebagai contoh, merubah dari 0px ke 8-12px sudah cukup untuk menarik perhatian pengguna. Menerapkan perubahan ukuran atau transformasi bayangan kecil bersama animasi border juga disarankan untuk menambah kedalaman.

Tip Implementasi FramerFramer: Gunakan animasi tata letak Motion untuk mendesain transformasi border secara otomatis, memungkinkan aplikasi animasi lembut antar nilai CSS yang berbeda.

Lihat Situs>

8. Kontrol Kecepatan

Contoh_Packaly

Packaly melambatkan kecepatan scroll logo klien dalam daftar ketika Hover pada halaman beranda, memudahkan pengguna mengidentifikasi logo merek.

Ketika mendesain animasi scroll tanpa batas, sesuaikan kecepatan scroll dasar cukup lambat untuk memudahkan pembacaan, namun tetap memperlihatkan pergerakan. Saat animasi diperlambat, tambahkan efek opasitas atau perubahan ukuran halus pada item yang di-hover untuk menekankan status aktifnya.

Tip Implementasi FramerFramer: Gunakan komponen Ticker untuk menciptakan efek ini. Atur pengaturan FramerFramer untuk menyesuaikan perubahan kecepatan animasi saat Hover hingga menemukan kecepatan optimal.

Lihat Situs langsung>

9. Pratinjau Hover

Contoh_Work By Tomorrow

Studio branding dan desain Work By Tomorrow menampilkan pratinjau hover untuk mempermudah eksplorasi portofolio. Saat mengarahkan kursor di atas judul proyek, gambar terkait muncul disertai pesan "View Project" dan pemberitahuan apakah halaman proyek tersebut tersedia.

Saat menggunakan pratinjau hover, perhatikan poin berikut:

1. Jika gambar pratinjau dimuat terlalu lambat, pengguna bisa beralih lebih awal.

2. Jika pratinjau tampil terlalu cepat, pengguna mungkin bingung dengan pratinjau yang muncul dan turun di mana pun kursor di pindahkan pada halaman. Memuat gambar pratinjau dengan cepat tetapi menambahkan penundaan singkat sebelum pratinjau ditampilkan dapat mencegah masalah ini.

3. Pemakaian animasi fade in halus dapat membuat efek transisi terlihat lebih bedan gaya menarik.

Tip Implementasi FramerFramer: Gunakan komponen Image on Hover untuk membuat efek ini dengan mudah. Tempatkan komponen ini di atas semua elemen, lalu saat mouse diletakkan di atas, gambar akan muncul.

Lihat Situs>

10. Mikro Animasi

Contoh_Thibaut Crépelle

Portofolio Thibaut Crépelle, seorang desainer 3D dan motion, menerapkan animasi yang memberikan kesan seolah-olah tombol ditekan pada menu bergaya keyboard ketika Hover. Interaksi ini tidak hanya meninggalkan kesan kuat pada elemen tersebut tetapi juga mencerminkan keahlian desain motions-nya.

Saat mendesain mikro animasi dengan efek hover, atur pergerakan objek secara halus dan cepat untuk tetap memberikan kesan responsif. Dengan memperhatikan ini, bahkan perubahan beberapa piksel bisa menciptakan efek hover berkualitas tinggi sambil menjaga antarmuka tetap bersih.

Tip Implementasi FramerFramer: Desain di Spline kemudian sisipkan langsung ke situs FramerFramer Anda untuk membuat elemen 3D yang dapat dioperasikan pengguna seperti ini.

Lihat Situs>

11. Efek Hover 3D

Contoh_Alejandro Mejias

Halaman rumah Alejandro Mejias menyertakan objek 3D "A" yang merespons gerakan kursornya, meningkatkan interaksi.

Tip Implementasi FramerFramer: Gunakan override hover 3D untuk membuat elemen bergerak mengikuti kursor.

Halaman Alejandro Mejias memperlihatkan 3D "A" yang merespon gerakan kursor. Anda bisa melihat dari berbagai sudut saat mouse diletakkan di atasnya dan klik untuk meningkatkan kecepatan putaran.

Saat merancang kursor yang mengikuti elemen 3D, pertahankan rentang rotasi yang sesuai dan gunakan efek Easing halus untuk menjamin pergerakan terasa lembut. Untuk lebih menonjolkan elemen sebagai interaktif, tambahkan animasi lembut ke area sekitarnya.

Tip Implementasi FramerFramer: Tambahkan override hover 3D pada semua elemen untuk merancang efek hover seperti elemen yang mengikuti kursor ini.

Lihat Situs>

12. Efek Hover Video

Contoh_Deeo Studio

Deeo Studio, studio desain, menggunakan homepage yang dipenuhi video dengan mengganti media player tradisional, memungkinkan setiap video menjadi tombol play/stop ketika di-hover.

Saat mendesain efek video yang merespons hover, pastikan video dioptimalkan untuk pemutaran web dan tidak mengalami lag. Menambahkan indikator visual seperti ikon play/stop membantu pengguna untuk langsung memahami tindakan yang harus dilakukan tanpa perlu arahan tambahan.

Tip Implementasi FramerFramer: Tambahkan video pada latar belakang tombol untuk membuat tombol video yang sinematik dalam efek hover video yang lebih berkualitas.

Lihat Situs langsung>

Praktik Terbaik Efek Hover

Untuk memanfaatkan efek Hover dengan tepat, disarankan untuk mengetahui empat prinsip berikut.

1. Desain Berintent: Jangan digunakan hanya sebagai hiasan; sebaliknya, rancang agar membantu tindakan pengguna.

2. Pencerminan Merek: Kecepatan, timing, dan pola gerakan efek harus konsisten dengan nada dan konsistensi dari merek.

3. Performa Halus: Animasi harus diterapkan dengan cepat dan ringan untuk menciptakan pengalaman tanpa gangguan di berbagai perangkat.

4. Dukungan Aksesibilitas: Hover tidak berfungsi di mobile, jadi pastikan untuk menyediakan pemicu alternatif, dan deteksi pengaturan motion-reduce untuk menyesuaikan animasi sesuai lingkungan pengguna.

Menambah Kehidupan pada Situs dengan Efek Hover

Hover effects adalah alat yang dapat mengubah situs web statis menjadi lebih dinamis. Intinya adalah tidak menerapkan pada semua elemen, tetapi menempatkan efek tepat hanya di tempat yang dapat meningkatkan pengalaman pengguna.

FramerFramer menyediakan lingkungan yang mudah digunakan untuk menerapkan berbagai efek yang telah diperkenalkan, mulai dari perubahan warna hingga interaksi 3D, dan efek Hover video. Kami sarankan Anda menggunakan pustaka contoh di atas untuk menggabungkan efek yang tepat untuk brand Anda dengan FramerFramer.

Artikel ini adalah terjemahan dan adaptasi konten dari FramerFramer blog resmi ‘12 efek hover yang mengubah pengalaman pengguna’.