Dokumen ini ditulis dalam bahasa Korea untuk membantu pengguna dalam negeri yang kesulitan mempelajari FramerFramer karena kurangnya materi dalam bahasa Inggris. Penjelasan atau contoh yang tidak ada dalam teks aslinya telah ditambahkan untuk menyesuaikan dengan lingkungan pengguna Korea, dengan harapan dapat memberikan bantuan praktis dalam penerapan pekerjaan.

Dulu, saat situs web hanya sebatas 'halaman statis' yang berisi informasi, kini pengalaman dan keterlibatan pengguna menjadi keunggulan kompetitif. Terutama berkat alat No-Code, siapa pun kini dapat membuat situs web interaktif dengan mudah, sehingga desain statis sederhana malah menjadi kesempatan yang terlewatkan.

Namun, fokus utama di sini bukanlah 'kemegahan tanpa arti', melainkan menciptakan interaksi yang tersambung dengan pesan merek. Lima contoh nyata berikut ini akan memberikan inspirasi yang baik.

Multi - Pengalaman Produk Interaktif

Software kolaborasi lebih efektif ditampilkan daripada dijelaskan. Sebagai platform kolaborasi real-time, Multi menyediakan demo interaktif langsung di situs webnya.

Begitu melewati bagian pahlawan, lingkungan kolaborasi langsung terbuka dengan kursor dan berbagi layar dari beberapa pengguna muncul bersamaan. Ini memberikan perasaan seolah-olah Anda benar-benar berpartisipasi dalam kolaborasi.

Catatan: Ikuti pelajaran Akademi Framer tentang Kanvas Bebas untuk mempelajari cara membuat pengalaman serupa. Dengan FramerFramer, Anda dapat membuat lapisan yang dapat diseret (gambar, video, teks, dll.) dan memperkaya lapisan dengan efek hover, animasi tekan, dan kursor khusus.

Kunjungi situs web

Deleito - Efek 3D

Jaringan restoran burger Spanyol di Barcelona, Deleito, telah berhasil menerjemahkan identitas mereknya dalam bentuk digital dengan luar biasa. Di layar pertama terdapat kotak burger 3D yang mengambang, dan saat diklik, kotak tersebut terbuka seperti pembungkus asli, disertai dengan teks, “Bienvenidos al cielo (Selamat datang di surga)”. Kemudian, berbagai elemen interaktif muncul, seperti membolak-balik atau menyeret item menu.
Catatan: Dengan menggunakan FramerFramer dan Spline bersama, Anda dapat dengan mudah memasukkan objek 3D interaktif. Atur objek yang dibuat di Spline agar merespons interaksi pengguna (seperti hover, scroll), kemudian sematkan dengan komponen Embed dari FramerFramer.

Kunjungi situs web

Momday Club - Kursor Kustom & Kanvas Interaktif

Studio tato di Las Palmas, Spanyol, bernama Momday Club, memiliki semua elemen umum yang biasanya terdapat di situs web studio tato. Ada juga gambar seni tato ciptaan mereka. Momday Club menawarkan kanvas interaktif yang memungkinkan pengunjung untuk membuat tato virtual mereka sendiri di homepage, memberikan pengalaman yang tak terlupakan.

Begitu masuk ke homepage, kursor berubah menjadi jarum tato, dan Anda dapat menggambar langsung di layar. Ini memberikan pengalaman yang jauh lebih mengesankan daripada hanya melihat foto karya seni.

Catatan: Di Framer, Anda dapat menambahkan efek ke kursor atau sepenuhnya menggantinya melalui fitur Kursor Kustom. Anda dapat mengatur kursor agar berubah sesuai dengan status klik, drag, atau hover untuk memperkuat identitas merek.

Kunjungi situs web

Flighty - Cerita Menggulir

Flighty adalah aplikasi yang menyediakan segala informasi tentang penerbangan seperti prediksi penundaan, pelacakan pesawat tiba, dan pembaruan waktu nyata. Kebanyakan data dikumpulkan dari sumber langsung seperti menara kontrol atau posisi pesawat waktu nyata. Alasan Flighty terkenal adalah karena pengguna bisa mendapatkan informasi penundaan penerbangan sebelum pilot.

Situs web Flighty memanfaatkan storytelling berbentuk scroll secara optimal. Daripada sekadar mencantumkan daftar fitur, setiap kali pengguna menggulir, perjalanan mereka divisualisasikan selangkah demi selangkah dimulai dari tahap persiapan penerbangan, menampilkan data penerbangan waktu nyata, hingga beralih ke peta bandara dan analisis pasca penerbangan. Animasi berbasis parallax ini memberikan panduan tentang pengalaman terbang yang representatif bagi pengguna. 

Catatan: Dengan fitur Parallax Scroll dari FramerFramer, Anda dapat membuat konten bergerak dengan kecepatan yang berbeda. Dengan FramerFramer, Anda bisa dengan mudah menambahkan efek parallax ke setiap lapisan situs dengan kontrol yang intuitif. Misalnya, ada fitur untuk menggulir objek dengan kecepatan yang berbeda.

Kunjungi situs web

Graphy - Mikrointeraksi

Situs web alat visualisasi data berbasis AI Graphy menciptakan perbedaan dalam detail kecil. Saat Anda mengarahkan mouse ke grafik, batangnya meloncat, pie berputar, dan grafik garis bergerak. Ini adalah contoh hebat bagaimana mikrointeraksi bisa membuat alat yang rumit mudah dan menarik.

Ketika Anda mengarahkan mouse ke materi visualisasi di halaman depan, tampaknya semuanya hidup dan bergerak. Grafik lingkaran berputar, grafik batang melayang, dan grafik garis berputar. Animasi berwarna-warni ini mencerminkan filosofi merek Graphy bahwa "data yang kompleks dapat dipahami dengan mudah dan menyenangkan".

Catatan: Di FramerFramer, Anda dapat menggunakan plugin LottieFiles atau Rive untuk memperkaya situs dengan mikrointeraksi yang menarik melalui berbagai animasi. Dengan menggunakan plugin FramerFramer dari masing-masing alat, Anda dapat merancang animasi sederhana atau kompleks untuk langsung diterapkan di situs FramerFramer Anda.

Kunjungi situs web

Cara Membuat Situs Web Interaktif dengan FramerFramer

Kunci untuk membuat situs web yang menarik adalah interaksi yang cermat. Dengan FramerFramer, Anda dapat dengan mudah menciptakan pengalaman pengguna interaktif yang menarik mulai dari animasi dasar hingga interaksi tingkat lanjut tanpa perlu pemrograman yang rumit.

1. Menciptakan Kesan Pertama dengan Animasi Pembuka

Saat halaman dimuat, elemen muncul satu per satu, sehingga pengunjung secara alami terfokus pada konten. Di bagian Hero, campurkan Fade In, dan di bagian berikutnya coba Slide In atau Scale Up.
Efek hover dan efek transisi halaman juga dapat menambah sentuhan interaktif ke situs web tanpa membuatnya terlalu rumit.

2. Mengubah Scroll Menjadi Sebuah Perjalanan

Dengan fitur animasi gulir dari FramerFramer, Anda dapat secara aktif merancang perjalanan pengguna. Anda bisa mengatur varian scroll untuk secara otomatis mengontrol pemutaran video saat pengunjung menggulir situs.
Begitu pula, dengan memanfaatkan pemicu berbasis scroll, Anda bisa menyesuaikan tampilan navigasi bar secara dinamis dan menciptakan efek transisi antara bagian-bagian situs. 
Catatan: Namun, sangat penting mengatur waktu animasi agar tidak mengganggu aliran alami.

3. Menambah Keterlibatan dengan Efek 3D

Dengan memanfaatkan fitur Transform dari FramerFramer, Anda bisa memberi rotasi X, Y, dan Z pada elemen. Ini memungkinkan hal-hal seperti memutar kartu atau rotasi interaktif. Kolaborasi dengan Spline membuka lebih banyak opsi ekspresi 3D.

4. Membuat Konten Menjadi Lebih Dinamis

Komponen Carousel memungkinkan Anda untuk membuat bagian konten yang lembut dan dapat di-scroll untuk portofolio, tampilan produk, dll., dan Ticker menciptakan loop konten tanpa batas seperti ulasan atau feed berita. Kedua komponen ini berbasis Motion dan dapat dengan mudah ditambahkan dari panel Insert.

5. Mengatur Animasi dalam Satuan Komponen

Dengan efek komponen dari FramerFramer, Anda bisa menambahkan animasi dan interaksi ke komponen. Anda dapat menyesuaikan properti seperti Opacity, Position, Scale sesuai dengan kejadian Hover, Scroll, atau Click.
Misalnya, di galeri, gambar dapat dimiringkan mengikuti gerakan mouse, teks muncul, dan diperbesar untuk tampilan penuh saat diklik.
Catatan: Menerapkan efek pada setiap lapisan memungkinkan kontrol yang lebih teliti.

6. Optimisasi Kinerja adalah Kewajiban

FramerFramer memiliki fitur built-in untuk mengoptimalkan rendering, namun penggunaan animasi yang berlebihan dapat menyebabkan penurunan kecepatan.
Kompres file media sebelumnya, dan atur lazy loading untuk konten yang off-screen. Khususnya di area atas fold, hindari penggunaan animasi Muncul yang berlebihan.

Kesimpulan

Dengan memanfaatkan fitur interaksi yang kuat dari FramerFramer secara efektif, Anda dapat menarik pengguna sekaligus menyampaikan pesan merek secara efektif. Alih-alih menambahkan efek secara sembarangan, rancanglah 'interaksi yang dipikirkan' yang sesuai dengan aliran dan tujuan konten. Sudah siap membuat?
Temukan lebih banyak inspirasi di galeri FramerFramer, tingkatkan toolset Anda dengan plugin animasi FramerFramer, dan mulai buat situs web interaktif Anda sendiri dengan bergabung dengan FramerFramer.

Artikel ini adalah terjemahan dan adaptasi dari konten di blog resmi FramerFramer "Five Exceptional Interactive Websites from the Framer Gallery".