Gubuku – Coba deh lo perhatiin sekeliling lo sekarang. HP layar lipat alias foldable smartphone—kayak Samsung Galaxy Z Fold/Flip, Google Pixel Fold, sampai OPPO Find N Series—lagi makin hype dan menjamur di mana-mana.

Buat para graphic designer, UI/UX designer, atau content creator, tren ini adalah game-changer sekaligus tantangan baru. Kenapa? Karena layar lipat itu punya rasio yang fleksibel: bisa mendadak berubah dari layar HP biasa yang tinggi ramping (outer screen) jadi layar tablet yang lebar dan kotak (inner screen).

Kalau lo cuma bikin aset visual asal-asalan, siap-siap desain lo kelihatan penyet, terpotong (cropped), atau malah buram pas diputar atau dibuka lipatannya. Nah, biar desain lo tetap slay dan rapi di semua mode layar, simak panduan bikin aset visual yang foldable-friendly di bawah ini!

1. Pahami Dulu “Dua Mode” Layar Lipat (Dual Screen Dynamics)

Layar lipat itu unik karena punya dua status utama yang bakal dialami pengguna:

• Cover Screen (Layar Luar): Rasio layarnya cenderung sangat tinggi dan ramping (biasanya $21:9$ atau $22:9$).

• Unfolded / Main Screen (Layar Utama): Begitu HP dibuka, rasionya berubah jadi hampir kotak atau seperti tablet kecil (biasanya berkisar antara $4:3$, $6:5$, atau $1:1$).

Tugas Lo: Desain lo gak boleh cuma bagus di satu mode. Elemen penting di visual lo harus bisa adaptive ketika pengguna berganti dari mode terlipat ke mode terbuka.

2. Gunakan Konsep “Safe Zone” di Tengah Design

Karena rasio layar luar dan dalam beda jauh, lo wajib nerapin teknik Safe Zone (Area Aman).

• Pusatkan Elemen Utama: Taruh teks penting, logo, Call-to-Action (CTA), atau objek utama tepat di tengah canvas.

• Gunakan Background yang Bisa Ditarik (Extendable): Pastikan gambar latar belakang (background) punya ruang ekstra di sisi kanan-kiri atau atas-bawah. Jadi, pas layarnya berubah rasio, background-nya tinggal nge-crop tanpa memotong objek/teks utama lo.

3. Beralih ke Format Vektor (SVG) untuk Scalable Assets

Ucapkan selamat tinggal pada aset raster berkualitas rendah yang gampang pecah pas layarnya makin membesar!

Untuk elemen seperti ikon, logo, ilustrasi, dan tombol UI, selalu gunakan format SVG (Scalable Vector Graphics). Keunggulan SVG:

• Ukuran filenya super ringan.

• Bisa membesar dan memgecil secara otomatis tanpa kehilangan ketajaman pikselnya sedikit pun.

4. Desain dengan Fluid / Responsive Layout (Bukan Pixel-Fixed)

Kalau lo lagi bikin UI/UX aplikasi atau konten web untuk layar lipat, stop pakai ukuran pixel yang kaku (misalnya width: 1080px).

Beralihlah ke ukuran relatif seperti persentase (%), vw/vh (viewport width/height), atau gunakan fitur Auto Layout di Figma. Dengan begitu, tata letak desain lo bakal secara otomatis menyesuaikan diri (flow) dengan lebar layar pengguna yang berubah-ubah secara instan.

5. Pertimbangkan “Hinge / Crease Area” (Garis Lipatan Layar)

Walaupun teknologi HP layar lipat makin canggih, hampir semua foldable phone masih punya area lipatan (crease) tipis di bagian tengah layarnya.

• Jangan Taruh Teks Kecil di Tengah: Hindari menaruh paragraf penting atau teks berukuran kecil tepat di garis lipatan tengah layar.

• Manfaatkan Mode Continuity: Kalau lo bikin desain aplikasi, manfaatkan area lipatan ini untuk memisah konten secara intuitif. Contohnya: sisi kiri buat navigasi/menu, sisi kanan buat detail konten.

Check-List Cepat Aset Visual Foldable Screen

Biar lo gak lupa pas lagi proses eksekusi desain, pakai check-list ini:

Elemen Desain	Format / Teknik Terbaik	Yang Harus Dihindari
Logo & Ikon	Format SVG / Vektor	PNG resolusi rendah
Foto & Banner	High-Res dengan Safe Zone di tengah	Teks penting ditaruh di pojok banget
UI Layout	Auto Layout / Responsive Grid	Fixed width/height dalam piksel mati
Teks / Typography	Font Vektor / Dynamic Sizing	Ukuran font kekecilan di mode tablet

Penulis kiki dari smkn 9 bungo