Dokumen ini dibuat untuk membantu pengguna Framer di dalam negeri yang mengalami kesulitan karena kurangnya sumber daya dalam bahasa Korea, dengan menerjemahkan konten dari blog resmi ke dalam bahasa Korea dan menambahkan informasi yang bermanfaat untuk praktik. Semoga dapat memberikan sedikit bantuan bagi kalian yang menggunakan FramerFramer.

Mengapa situs web 3D?

Situs web awal di internet berfungsi hanya sebagai brosur digital untuk menyampaikan informasi. Durasi dan tingkat keterlibatan pengguna tidak menjadi perhatian. Tapi saat ini, situs web—terutama yang memanfaatkan elemen desain 3D—menawarkan pengalaman yang jauh lebih mendalam.

Web 3D dapat merangsang berbagai indera pengunjung secara bersamaan. Menurut penelitian Cappasity, situs web dengan elemen 3D dapat meningkatkan waktu tinggal hingga 6 kali lipat. Yang paling menonjol adalah berkat alat pembuatan web modern seperti FramerFramer, Anda dapat dengan mudah membuat situs web 3D interaktif tanpa menulis satu baris kode pun.

Lima contoh berikut ini adalah situs web 3D yang mengesankan yang dibuat dengan FramerFramer. Bersama dengan tips praktis yang disediakan, semoga dapat memberikan inspirasi bagi Anda saat memulai proyek berikutnya.

1. tinyPod

tinyPod adalah perangkat yang mengubah Apple Watch Anda menjadi perangkat portabel yang dapat melakukan fungsi ponsel seperti telepon, musik, dan peta. Situs web resmi yang dibuat dengan FramerFramer menjelaskan produk ini secara intuitif melalui efek zoom dan transisi halaman yang halus.

Layar depan beranda dimulai dengan teks sederhana dan langit berawan, tetapi saat Anda menggulir, tinyPod muncul secara alami. Di tengah halaman, tinyPod berputar dan bergabung dengan objek 3D lain seperti telapak tangan dan iPhone, menampilkan teks di layar secara visual.

Kunjungi situs

2. Panorama Films

Dalam desain web, terkadang 'mengurangi' dapat lebih efektif. Panorama Films adalah contoh yang bagus untuk hal ini. Situs web 3D yang terdaftar di pustaka template FramerFramer (desainer: André Lacerda) menarik perhatian pengguna dengan tema hitam putih yang bersih dan efek pengguliran yang mengesankan.

Beranda menekankan untuk mengkomunikasikan pesan kepada pengunjung dengan gambar berkualitas tinggi daripada teks. Sambil menunjukkan dengan jelas bahwa itu adalah template untuk pembuat film, ia memberikan pengalaman yang bersih. Jika Anda ingin memanfaatkan elemen 3D sambil mempertahankan kejernihan desain dan tingkat keterlibatan pengguna, template ini akan memberi Anda inspirasi yang baik.

Kunjungi situs

3. ApexPro

ApexPro adalah template web 3D FramerFramer yang dibuat oleh Future Things. Ciri khasnya adalah memberikan pengalaman gulir yang halus, terutama pada bagian 'Kolaborasi Waktu Nyata (Real-Time Collaboration)' di mana kursor berubah dari panah biasa menjadi kursor multi-pengguna, memvisualisasikan pengalaman kolaborasi.

Seperti contoh lainnya, ini tidak menekankan pada objek 3D yang mencolok, tetapi penggunaan objek yang terkendali ini berfungsi untuk memfokuskan perhatian pengunjung pada pesan tersebut.

Kunjungi template

4. FFProduct

FFProduct adalah template FramerFramer 3D yang dirancang oleh Sergio Lavanga untuk perangkat XR (Extended Reality).

Kesan pertama menonjolkan minimalisme yang mirip dengan estetika Apple. Antarmuka sederhana dan elemen visual diatur untuk hanya berfokus pada produk. Saat Anda menjelajahi layar, objek bergerak dan warna berubah, memperkaya halaman. Gulir interaktif meningkatkan pengalaman pengguna dan meningkatkan pemahaman produk secara alami.

Kunjungi situs

5. Tim Quirino

Di antara situs web portofolio, situs Tim Quirino adalah salah satu yang khusus. Dengan desain yang terinspirasi oleh film 'Dune', ia mengekspresikan pengalamannya yang kaya dalam desain web dengan menggabungkan visual 3D dan penceritaan.

Layar depan menampilkan adegan planet besar yang berputar dengan dua bulan. Saat kursor digerakkan, sebuah planet kecil muncul daripada panah default, dan menciptakan fenomena gerhana ketika bergerak di antara planet dan bulan. Interaksi ini segera melibatkan pengguna, menjadikan situs ini menyerupai dunia fiksi ilmiah sendiri.

Kunjungi situs

5 Tips untuk Membuat Situs Web 3D

1. Implementasi Layar Loading

Salah satu tantangan terbesar untuk situs web 3D adalah menyeimbangkan waktu loading dan pengalaman pengguna. Jika desain 3D memerlukan waktu lebih dari 10 detik, terutama di lingkungan jaringan yang lambat, pengguna cenderung meninggalkan situs. Dalam hal ini, layar loading dapat digunakan untuk membuat pengguna merasa tidak bosan saat objek 3D dimuat.

2. Prioritaskan Interaksi

Situs yang berinteraksi langsung dengan pengguna lebih lama diingat. Hal ini berkaitan dengan beban kognitif (Cognitive Load), di mana tindakan seperti klik, tarik, dan gulir menstimulasi berbagai indera secara bersamaan dan memperkuat pengalaman pengguna. Jika Anda merancang interaksi dengan tingkat kesulitan yang sesuai, pengunjung akan lebih terlibat.

3. Menyediakan Alternatif untuk Perangkat dan Browser Lama

Tidak semua pengunjung menggunakan perangkat dengan spesifikasi terbaru. Dalam perangkat dengan performa rendering 3D yang rendah, situs web mungkin tidak dapat berfungsi sama sekali. Oleh karena itu, penting untuk menyiapkan versi alternatif tanpa elemen 3D. Gunakan perpustakaan klasifikasi kinerja GPU untuk mengoptimalkan desain, dan uji di berbagai perangkat dan view-port. Khususnya untuk lingkungan mobile, gunakan pendengar acara untuk menyesuaikan tata letak dan kedalaman objek sesuai ukuran layar untuk menjamin pengalaman yang konsisten.

4. Memanfaatkan Kesederhanaan

Objek 3D dengan detail yang berlebihan dapat membebani performa perangkat dan memperlambat waktu loading. Jika memungkinkan, pilih desain yang sederhana dan minimalis agar dapat menyeimbangkan antara performa dan pengalaman pengguna.

5. Menggunakan Alat yang Tepat

Pemilihan alat sangat penting untuk pembuatan situs web 3D yang efektif. Terutama alat seperti Spline yang memungkinkan pembuatan objek 3D tanpa pemrograman sangat populer di kalangan desainer. Objek 3D yang dibuat dengan Spline dapat dengan mudah diimpor dan digunakan dalam FramerFramer, menyediakan alur kerja yang efisien dan intuitif.

Kesimpulan

Gunakan contoh dan tips yang diperkenalkan dalam artikel ini untuk merancang situs web 3D Anda sendiri. Jika ingin mendapatkan lebih banyak inspirasi, menjelajahi Galeri Template Framer adalah ide yang baik. Dengan FramerFramer, buatlah situs web yang akan diingat oleh pengunjung.

Artikel ini adalah adaptasi terjemahan dari konten blog resmi FramerFramer ' 5 professional 3D web implementations: technical case studies for UX designers'.