Belajar UI Designer - 3D & Immersive UI
Menambahkan dimensi dan kedalaman pada antarmuka: peran elemen 3D, prinsip visual depth, dan tren Liquid Glass 2026. Ditutup dengan praktik bereksperimen 3D pada Kantongin tanpa mengorbankan performa dan keterbacaan
#Pendahuluan
Setelah di episode 21 AI mempercepat alur kerja, pada episode ini kita menjelajah ke ranah yang lebih visual: 3D dan immersive UI. Antarmuka 2026 tidak lagi melulu datar — elemen tiga dimensi, kedalaman, dan efek material kaca (Liquid Glass) semakin sering muncul di produk mainstream.
Mengapa UI designer perlu memahami 3D? Karena kedalaman adalah alat desain: ia menciptakan hierarki yang lebih kuat, membuat elemen "terasa nyata", dan membangun kesan premium. Namun 3D juga punya harga: performa, berat aset, dan risiko mengorbankan keterbacaan. Keterampilan kalian adalah memakai kedalaman secukupnya dan tepat sasaran — bukan demi tren.
#Peran Elemen 3D dalam UI
Elemen 3D tidak selalu berarti "model render penuh". Perannya bertingkat:
- Moment & emosi — objek 3D di momen sukses, onboarding, atau ilustrasi hero untuk menciptakan kesan.
- Produk & konten — menampilkan produk (misal sneaker 3D yang bisa diputar) dalam e-commerce.
- Visual identity — elemen 3D sebagai bagian karakter brand, bukan hanya hiasan layar.
Untuk Kantongin: objek 3D paling masuk akal di momen emosional — misal ilustrasi 3D saat target tabungan tercapai, atau avatar/ikon yang memberikan kesan "hidup" pada transaksi.
Tip
Aturan praktis adopsi 3D: pakai di momen yang dirasakan, bukan di layar yang dikerjakan. Layar transaksi harian harus ringan dan cepat; momen sukses menabung boleh "dipentaskan" dengan elemen 3D. Menyimpan 3D untuk momen berharga justru membuatnya terasa lebih istimewa.
#Kedalaman (Depth) Tanpa 3D Berat
Sebagian besar "kedalaman" di UI dicapai dengan teknik ringan yang sudah dikenal:
- Elevasi — shadow bertingkat untuk menunjukkan posisi z (episode 8, 10).
- Skala & blur — elemen di belakang lebih kecil dan blur; elemen depan tajam dan besar.
- Parallax — lapisan bergerak dengan kecepatan berbeda saat scroll/gesture.
- Perspektif mikro — miring/berotasi halus pada interaksi.
Kedalaman yang baik memandu hierarki (episode 2): mata membaca "depan = penting". Tapi kedalaman yang berlebihan membuat layar ramai — kedalaman adalah aksen, bukan wallpaper.
#Liquid Glass 2026
Liquid Glass adalah tren visual utama 2026 — menggemakan desain glassmorphism, dengan material kaca cair: translusen, blur, highlight, dan pantulan. Ciri khasnya:
- Translucent surface di atas background (blur + transparansi).
- Border & highlight halus yang meniru pantulan kaca.
- Gerakan yang "mengikuti" cahaya dan konten di belakang.
Desain ini memberi kesan premium dan "hidup", tetapi punya biaya: blur dan efek kompleks butuh performa, dan kontras teks di atas permukaan transparan sering gagal aksesibilitas. Prinsip pakai:
- Latar yang tenang — glass effect paling baik di atas background sederhana, bukan latar ramai.
- Kontras dijaga — selalu ukur teks di atas permukaan kaca; translusensi tidak menggugurkan WCAG.
- Degrade with class — sediakan versi non-glass (solid) untuk perangkat/konteks yang tidak mendukung.
background: rgba(255,255,255,0.55); /* translusen */
backdrop-filter: blur(20px); /* blur latar */
border: 1px solid rgba(255,255,255,0.4); /* highlight kaca */
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);#Kapan Hindari 3D & Efek Berat
Jujur soal konteks: di banyak produk, 3D dan efek kaca justru merugikan:
- Aplikasi yang dipakai cepat (kasir, input data, dashboard) — efek berat memperlambat dan mengganggu.
- Perangkat rendah daya — blur & 3D memakan baterai dan frame rate.
- Pengguna dengan motion sensitivity — elemen bergerak yang berlebihan (episode 16).
- Informasi padat — layar data yang butuh keterbacaan; kedalaman berlebih mencuri fokus.
Keputusan "apakah perlu 3D?" adalah keputusan desain yang sah — dan jawaban "tidak" sering kali lebih profesional daripada mengikuti tren.
Warning
Jangan mengejar tren 3D demi "kelihatan modern". Setiap efek visual yang dipakai harus lolos tiga uji: menambah pemahaman atau emosi, menjaga keterbacaan & aksesibilitas, dan tidak merusak performa. Jika tidak lolos salah satu, ia hiasan yang membayar mahal.
#Praktik: Eksperimen 3D Kantongin
- Pilih satu momen emosional: layar "target tabungan tercapai".
- Rancang satu elemen 3D sederhana di sana (misal koin/tabungan yang berputar saat tercapai) — bisa dengan tool 3D sederhana atau aset berlisensi.
- Terapkan kedalaman ringan (elevasi + skala) pada layar, bukan blur berlebihan.
- Uji kontras & keterbacaan: teks tetap jelas di atas semua efek.
- Dokumentasikan di halaman
Spec: kapan efek 3D boleh dipakai dan kapan dilarang.
#Common Pitfalls
- 3D di mana-mana — efek berat di layar yang harus ringan; aplikasi terasa lambat.
- Glass tanpa kontras — teks di atas permukaan transparan yang gagal dibaca.
- Mengikuti tren tanpa alasan — efek dipakai karena "ramai di Dribbble", bukan karena menambah nilai.
- Mengabaikan performa — aset 3D raksasa yang bikin loading lama.
- Lupa degrade — tidak menyiapkan versi tanpa efek untuk konteks yang tidak mendukung.
#Penutup
Pada episode 22 ini, kalian telah memahami cara menambah dimensi pada antarmuka tanpa mengorbankan esensinya.
Inti yang harus dibawa pulang:
- Elemen 3D paling efektif di momen emosional, bukan layar kerja harian.
- Kedalaman bisa dicapai dengan elevasi, skala, blur, dan parallax — tanpa render 3D berat.
- Liquid Glass 2026 memberi kesan premium tapi harus menjaga kontras & performa.
- Keputusan "tidak perlu 3D" sering lebih profesional daripada mengikuti tren.
Di episode 23 selanjutnya kita akan membahas gamification & behavior design — points, progress, dan behavioral nudges yang etis untuk membuat menabung di Kantongin terasa menyenangkan. Sampai jumpa di episode 23!