Contoh desain mockup aplikasi untuk presentasi

Contoh desain mockup aplikasi untuk presentasi harus memperlihatkan alur utama, status interaksi, dan data yang terasa akrab bagi audiens Indonesia. Gunakan harga dalam Rupiah, nomor dummy berawalan +62, serta nama dan transaksi fiktif agar konsep dapat dinilai tanpa menampilkan data pribadi pelanggan nyata.

Poin-poin utama

• •Pilih 5–7 layar yang menjelaskan satu alur tugas, bukan seluruh fitur aplikasi.
• •Buat data dummy lokal: harga dalam Rupiah, nomor berawalan +62, dan alamat atau nama yang sepenuhnya fiktif.
• •Tampilkan keadaan penting seperti kosong, proses, berhasil, gagal, dan konfirmasi agar stakeholder memahami perilaku aplikasi.
• •Hindari data pelanggan nyata dalam slide atau prototype, sejalan dengan prinsip perlindungan data pribadi dalam UU PDP No. 27 Tahun 2022.

Isi halaman ini

• •Isi galeri mockup yang meyakinkan stakeholder
• •Galeri 1: mockup aplikasi belanja kebutuhan harian
• •Galeri 2: mockup aplikasi pembayaran tagihan
• •Galeri 3: mockup aplikasi layanan dan janji temu
• •Cara merapikan mockup menjadi bahan presentasi

Isi galeri mockup yang meyakinkan stakeholder

Mockup presentasi bukan kumpulan layar cantik yang berdiri sendiri. Susun sebagai cerita singkat: pengguna masuk, menemukan informasi, mengambil tindakan, lalu menerima hasil. Untuk satu konsep aplikasi, pilih layar pembuka, beranda, daftar atau pencarian, detail, formulir atau keranjang, konfirmasi, dan bukti berhasil. Tambahkan satu layar empty state bila data belum tersedia serta satu layar gagal bila ada risiko kesalahan yang perlu dibahas.

Di setiap layar, beri anotasi singkat untuk keputusan yang ingin divalidasi: alasan posisi tombol utama, urutan informasi, atau aturan input. Ini membuat stakeholder menilai pengalaman pengguna, bukan hanya warna dan ikon. Gunakan judul alur yang mudah dipahami, misalnya “Pesan ulang kebutuhan rumah” atau “Bayar tagihan listrik”.

Data di dalam contoh desain tampilan aplikasi perlu cukup realistis untuk menguji hierarki. Namun, jangan mengisi kartu profil, riwayat pesanan, atau notifikasi dengan informasi pelanggan sungguhan. Prinsip perlindungan data pribadi dalam UU PDP No. 27 Tahun 2022 menjadi alasan praktis untuk memisahkan bahan presentasi dari data produksi. Gunakan identitas, alamat, foto, dan transaksi yang seluruhnya fiktif.

Galeri 1: mockup aplikasi belanja kebutuhan harian

Untuk aplikasi belanja, presentasikan alur dari beranda hingga pesanan berhasil dibuat. Layar beranda dapat memuat kategori “Sayur”, “Buah”, dan “Kebutuhan Rumah”, pencarian, serta banner promo yang tidak mengklaim penawaran nyata. Pada kartu produk, gunakan unit yang jelas seperti “1 kg” atau “500 g” agar angka mudah dibandingkan.

Contoh data aman: “Beras premium 5 kg — Rp78.000”, “Telur ayam 1 kg — Rp31.500”, dan “Ongkir — Rp10.000”. Harga dummy harus memakai Rupiah, bukan dolar, karena konteks dan kebiasaan baca audiens Indonesia berbeda. Di keranjang, tunjukkan subtotal, ongkir, total, alamat pengiriman fiktif, dan tombol “Buat Pesanan”. Layar akhir cukup memakai nomor pesanan rekaan seperti “PSN-24018”, bukan nomor transaksi internal perusahaan.

Dalam presentasi, pasangkan layar keranjang dengan layar stok habis. Contohnya, satu barang diberi label “Stok habis” dan tombol tambah dinonaktifkan. Kombinasi ini membantu stakeholder melihat bahwa contoh desain interface aplikasi telah mempertimbangkan keputusan pengguna ketika kondisi ideal tidak terjadi.

Galeri 2: mockup aplikasi pembayaran tagihan

Mockup pembayaran tagihan sebaiknya menekankan rasa aman melalui urutan informasi, bukan dengan menyalin data pembayaran asli. Mulai dari layar pilihan layanan, masukkan nomor pelanggan fiktif, tampilkan detail tagihan, lalu konfirmasi sebelum pembayaran. Jika perlu nomor telepon pada profil atau OTP, nomor dummy dapat memakai awalan +62 tanpa memakai nomor pelanggan sungguhan, misalnya +62 812 0000 1234. Pastikan angka tersebut hanya contoh visual dan tidak terhubung ke akun mana pun.

Untuk nominal, gunakan format yang lazim dibaca di Indonesia, misalnya “Rp125.000” dan “Biaya layanan Rp2.500”. Pada layar konfirmasi, tampilkan penerima atau jenis layanan fiktif, total pembayaran, metode pembayaran, serta tombol yang eksplisit seperti “Bayar Rp127.500”. Sesudah itu, desain layar berhasil dengan waktu transaksi rekaan dan tombol “Unduh Bukti”.

Jangan memakai tangkapan layar rekening, tagihan, QR pembayaran, atau riwayat transaksi asli untuk membuat mockup terlihat meyakinkan. Data dummy yang konsisten justru lebih mudah direvisi saat stakeholder mengubah skenario, nominal, atau urutan persetujuan.

Galeri 3: mockup aplikasi layanan dan janji temu

Contoh desain mockup aplikasi layanan dapat memakai alur pencarian layanan, pemilihan jadwal, pengisian keluhan singkat, dan konfirmasi janji temu. Misalnya, layar daftar menampilkan layanan “Konsultasi nutrisi” atau “Servis AC”, lalu detail menyediakan pilihan tanggal dan slot waktu. Gunakan nama penyedia serta alamat yang fiktif agar presentasi tidak memberi kesan bahwa ada kerja sama atau cabang nyata.

Formulir adalah tempat yang paling sering memunculkan risiko data. Tampilkan label yang diperlukan untuk menguji desain—nama, nomor telepon, alamat, catatan—tetapi isi dengan data rekaan. Jika contoh membutuhkan telepon, gunakan format +62 yang tidak berasal dari data pelanggan. Bila catatan pengguna perlu muncul di layar ringkasan, pakai teks generik seperti “Mohon jadwal setelah pukul 15.00”, bukan keluhan atau kondisi pribadi orang nyata.

Sertakan layar validasi saat slot waktu sudah tidak tersedia dan layar pembatalan yang menjelaskan dampaknya secara ringkas. Dengan begitu, stakeholder dapat mengevaluasi alur operasional, bukan hanya halaman konfirmasi. Galeri ini juga menunjukkan bahwa data lokal yang aman tetap mampu membuat skenario terasa nyata.

Cara merapikan mockup menjadi bahan presentasi

Urutkan slide berdasarkan pertanyaan keputusan: masalah apa yang diselesaikan, siapa penggunanya, alur apa yang diuji, dan keputusan apa yang diminta dari stakeholder. Letakkan satu layar utama per slide jika fokusnya adalah detail interface. Untuk menjelaskan perjalanan pengguna, tampilkan beberapa layar dalam urutan kiri ke kanan dan beri nomor langkah. Hindari mengecilkan sepuluh layar dalam satu halaman karena teks, harga, dan tombol tidak lagi terbaca.

Buat satu sistem data dummy sebelum mendesain: daftar nama fiktif, kategori produk atau layanan, format harga Rupiah, nomor +62 rekaan, kode pesanan, dan status transaksi. Dengan sistem ini, layar daftar, detail, dan bukti transaksi tidak saling bertentangan. Tandai data sebagai “contoh” bila presentasi berpotensi dibagikan lebih luas.

Sebelum mengirim file, lakukan pemeriksaan sederhana: apakah ada nama, foto, alamat, nomor telepon, atau nominal yang berasal dari pengguna nyata; apakah setiap angka harga memakai Rupiah; dan apakah layar berhasil, gagal, serta kosong sudah tersedia bila relevan. Gunakan floow.design untuk menghasilkan mockup siap presentasi dengan data lokal yang aman, lalu sesuaikan alur dan kontennya untuk keputusan yang ingin Anda uji.

Referensi data dummy Indonesia untuk mockup presentasi

Kesalahan yang sering terjadi

Menggunakan dolar pada kartu produk, total pesanan, atau biaya layanan.

Ganti semua nominal dummy ke Rupiah dan pertahankan format yang sama pada daftar, detail, keranjang, serta bukti transaksi.

Memasukkan nomor, alamat, foto, atau riwayat pelanggan asli agar layar terlihat nyata.

Buat set data fiktif khusus presentasi. Jangan mengambil data dari sistem produksi atau tangkapan layar akun pelanggan.

Hanya menampilkan layar kondisi berhasil.

Tambahkan kondisi kosong, stok atau slot tidak tersedia, validasi input, dan kegagalan yang paling mungkin dibahas stakeholder.

Mencampurkan data dummy yang tidak konsisten antarhalaman.

Tetapkan satu daftar referensi untuk nama, nominal, nomor pesanan, dan status sebelum menyusun mockup.

Pertanyaan yang sering diajukan

Apa isi mockup aplikasi untuk presentasi?

Mockup aplikasi untuk presentasi berisi layar yang menjelaskan satu alur utama, seperti beranda, pencarian atau daftar, detail, formulir, konfirmasi, dan hasil berhasil. Tambahkan anotasi singkat untuk keputusan desain serta keadaan kosong atau gagal yang relevan. Isi layar harus memakai data fiktif yang cukup realistis agar stakeholder dapat menilai alur dan prioritas informasi.

Bagaimana membuat data dummy Indonesia?

Buat data dummy Indonesia dengan harga dalam Rupiah, misalnya Rp78.000, serta nomor telepon rekaan berawalan +62, misalnya +62 812 0000 1234. Gunakan nama, alamat, kode pesanan, dan riwayat transaksi yang sepenuhnya fiktif. Jaga konsistensi data tersebut antara layar daftar, detail, keranjang, konfirmasi, dan bukti transaksi.

Bolehkah memakai data pelanggan di mockup?

Data pelanggan sebaiknya tidak dipakai di mockup presentasi. Gunakan nama, nomor telepon, alamat, foto, dan transaksi fiktif agar bahan diskusi tidak mengekspos informasi pribadi. Pendekatan ini selaras dengan prinsip perlindungan data pribadi dalam UU PDP No. 27 Tahun 2022 dan memudahkan file presentasi dibagikan secara lebih terkendali.

Berapa banyak layar yang perlu ditampilkan dalam presentasi mockup?

Untuk satu alur utama, tampilkan sekitar 5–7 layar yang mencakup tindakan inti dan hasilnya. Pilih layar berdasarkan keputusan yang ingin divalidasi, bukan untuk memamerkan seluruh fitur. Jika ada risiko penting, tambahkan layar gagal, validasi input, atau keadaan kosong agar stakeholder dapat menilai perilaku aplikasi di luar kondisi ideal.

Langkah selanjutnya

Mockup yang siap dipresentasikan membuat keputusan lebih cepat bila alurnya jelas dan datanya aman. Gunakan contoh desain tampilan aplikasi yang memakai Rupiah, nomor +62 rekaan, serta identitas fiktif; lalu hindari data pelanggan nyata. Gunakan floow.design untuk menghasilkan mockup siap presentasi dengan data lokal yang aman.

---

Rancang layarnya terlebih dahulu

Jelaskan aplikasi Anda dengan bahasa sederhana, lalu floow.design akan membuatkan layar iOS dan Android yang siap Anda sempurnakan dan serahkan ke tim pengembang.

Mulai desain gratis →

---

Sumber

• •Jaringan Dokumentasi dan Informasi Hukum Badan Pemeriksa Keuangan Republik Indonesia — basis peraturan perundang-undangan, termasuk UU PDP No. 27 Tahun 2022
• •JDIH Kementerian Komunikasi dan Digital Republik Indonesia

Baca juga

• •Contoh desain aplikasi mobile Indonesia
• •Contoh desain aplikasi mobile figma
• •Contoh desain aplikasi android yang siap rilis