Cara Menganimasikan Tampilan Aplikasi dan Mockup UI

Kapan animasi UI lebih baik dari rekam layar

Rekam layar tetap berguna untuk tutorial panjang. Tapi untuk video promo, iklan dan pengumuman fitur, animasi UI hampir selalu menang karena kamu mengontrol setiap gerakan. Tidak ada loading, tidak ada data pribadi yang tidak sengaja terlihat, dan setiap langkah tampil pada kecepatan yang pas.

Format ini paling sering dipakai oleh startup lokal, aplikasi kasir dan keuangan, layanan jasa yang punya aplikasi pemesanan, sampai kursus online yang ingin menunjukkan dashboard belajarnya.

Contoh permintaan asli dari pengguna Indonesia untuk aplikasi jasa: tampilkan alurnya dari aplikasi dibuka, cek harga, pilih layanan, pilih alamat, sampai pilih waktu dan lokasi. Urutan seperti itu langsung bisa dijadikan lima adegan.

Yang membentuk tampilannya

Trik yang paling disukai: elemen keluar dari layar. Misalnya saat saldo bertambah, angka saldonya melayang keluar dari HP dan membesar di samping. Detail kecil seperti ini membuat video terasa seperti iklan profesional.

Tiga format yang sering dipakai

Satu set screenshot bisa dijadikan beberapa video dengan tujuan berbeda. Tiga format ini paling sering diminta.

• Iklan fitur 15 detik: satu fitur, satu masalah, satu layar yang menyelesaikannya. Cocok untuk iklan TikTok dan Reels.
• Alur lengkap 30 sampai 45 detik: dari aplikasi dibuka sampai transaksi selesai. Cocok untuk halaman produk dan onboarding pengguna baru.
• Pengumuman update: layar lama dan layar baru berdampingan, lalu layar baru membesar dengan label "Baru". Cocok untuk memberi tahu pengguna yang sudah ada.

Mulai dari iklan fitur yang pendek. Kalau responsnya bagus, pakai screenshot yang sama untuk membuat alur lengkapnya.

Buat dalam 6 langkah

1. Ambil screenshot yang bersih. Satu screenshot per langkah, dengan data contoh, tanpa data pribadi pengguna asli.
2. Tulis alurnya. Urutan langkah dalam kalimat pendek: buka aplikasi, pilih produk, bayar, selesai.
3. Tentukan fitur yang paling penting. Satu atau dua fitur yang mendapat zoom dan elemen melayang.
4. Pilih mockup dan latar. HP untuk aplikasi mobile, laptop untuk website dan dashboard. Latar dari warna brand.
5. Tambahkan label dan suara. Satu label per langkah, bunyi klik halus, musik ringan. Voice over opsional.
6. Tutup dengan ajakan. Logo, nama aplikasi dan ajakan seperti "Download sekarang" atau "Coba di website kami".

Prompt yang terbukti jalan

Diadaptasi dari permintaan asli pengguna Indonesia ke Otto.

[upload screenshot aplikasi saya, urut dari langkah pertama]
Animasikan demo antarmuka produk saya dalam video 9:16, durasi sekitar 30 detik.
Alur: [aplikasi dibuka], [cek harga], [pilih layanan], [pilih alamat], [pilih waktu], [selesai].
Taruh layar di dalam mockup HP polos tanpa merek, sedikit miring, bayangan lembut, latar [warna brand].
Tunjukkan ketukan jari, tombol yang membesar saat ditekan, dan zoom pelan ke [fitur utama].
Saat [angka atau kartu penting] muncul, buat melayang keluar dari layar dan membesar di samping HP.
Label pendek per langkah di atas mockup. Bunyi klik halus, musik modern ringan.
Tutup dengan logo saya dan "[ajakan]". Tambahkan grafis bergerak yang relevan sepanjang video.

Versi pendek yang sering dipakai

• "Animasikan demo antarmuka produk saya, jangan pakai rekaman layar langsung."
• "Tambahkan tampilan UI 3D selama 3 detik di awal video saya."
• "Buat versi laptop untuk dashboard admin, zoom ke grafik penjualan."
• "Notifikasi pesanan masuk muncul satu per satu di samping HP."

Kesalahan yang sering terjadi

• Data pribadi terlihat. Selalu pakai data contoh di screenshot. Nama, nomor dan alamat asli pengguna tidak boleh tampil.
• Terlalu banyak layar. Sepuluh layar dalam 30 detik terlalu cepat. Pilih lima langkah yang paling penting.
• Teks UI terlalu kecil. Tulisan di layar aplikasi tidak terbaca di HP penonton. Zoom ke bagian yang penting dan tambahkan label besar.
• Mockup bermerek. Pakai mockup polos supaya fokus tetap di aplikasimu, bukan di merek perangkatnya.

FAQ