📝 Pengenalan Wireframe & Prototipe Menggunakan Figma

(Materi Pemrograman Perangkat Bergerak untuk Pemula (7 Jam))

Di era digital saat ini, merancang aplikasi tidak bisa dilakukan secara asal. Desain yang baik adalah kunci kenyamanan pengguna. Sebelum menulis kode, para programmer biasanya membuat wireframe dan prototipe sebagai peta dan simulasi aplikasi.
Kabar baiknya, kini kita bisa membuatnya dengan mudah menggunakan Figma — sebuah aplikasi desain yang bisa diakses langsung di browser tanpa instalasi rumit.

📌 Apa Itu Wireframe?

Wireframe adalah rancangan awal dari sebuah aplikasi atau website. Ibarat gambar denah rumah, wireframe hanya menampilkan kerangka — posisi tombol, menu, gambar, teks — tanpa warna dan hiasan.
Tujuannya adalah untuk fokus pada struktur dan fungsi, bukan tampilan.

✅ Contoh:
Bayangkan kita ingin membuat aplikasi kantin sekolah. Dalam wireframe, kita hanya menggambar:

Menu utama (nasi goreng, soto, bakso)
Tombol pesan
Total harga
Tanpa warna, tanpa gambar makanan, hanya kotak-kotak dan teks sederhana.

🎯 Manfaat Wireframe

Menghemat waktu (tidak perlu mendesain detail dulu).
Mempermudah diskusi antara siswa, guru, dan pengguna.
Menemukan kesalahan konsep lebih awal sebelum membuat aplikasi.

📌 Apa Itu Prototipe?

Prototipe adalah versi interaktif dari wireframe.
Jika wireframe seperti denah rumah, maka prototipe adalah miniatur rumah yang bisa dilihat, dibuka pintunya, dan dicoba alurnya.

Di Figma, kita bisa menghubungkan tombol-tombol pada wireframe sehingga saat diklik akan berpindah ke layar lain — persis seperti aplikasi sungguhan.

🛠️ Alat yang Digunakan

Figma (figma.com) → Bisa dibuka di laptop/PC, gratis untuk digunakan.
Kertas & spidol/pensil → Untuk brainstorming cepat sebelum membuat desain di Figma.

📅 Rundown Kegiatan Belajar (7 Jam)

Berikut adalah susunan kegiatan belajar yang mendalam dan menyenangkan, cocok untuk kelas sehari penuh (7 jam pelajaran @45 menit):

Waktu	Kegiatan	Tujuan	Metode & Aktivitas
06.30 – 06.45	Ice Breaking & Apersepsi	Menyegarkan suasana, menghubungkan materi dengan pengalaman siswa.	Permainan cepat: siswa menggambar di kertas tampilan “Aplikasi Kantin Sekolah”. Guru tanya: “Apa yang penting ada di aplikasi itu?”
06.45 – 07.30	Teori: Wireframe & Prototipe	Memahami konsep dan manfaat wireframe & prototipe.	Guru jelaskan dengan contoh sederhana (denah rumah → wireframe, miniatur → prototipe). Tampilkan contoh wireframe di layar.
07.30 – 08.15	Demo Figma oleh Guru	Memperkenalkan tools Figma.	Guru membuat wireframe aplikasi sederhana di Figma secara live. Siswa mengikuti langkah di laptop masing-masing.
08.15 – 09.00	Latihan Membuat Wireframe	Siswa mampu membuat rancangan aplikasi sederhana.	Siswa membuat wireframe aplikasi pilihan (kantin, jadwal pelajaran, absensi). Guru berkeliling memberi masukan.
09.00 – 09.30	Latihan Membuat Prototipe	Siswa memahami cara menghubungkan halaman.	Guru tunjukkan cara menghubungkan tombol → halaman lain di Figma. Siswa praktik membuat prototipe interaktif.
09.30 – 10.00	Istirahat	Refresh	-
10.00 – 10.45	Review & Presentasi Hasil Wireframe	Mengasah kemampuan presentasi dan memberi umpan balik.	Siswa presentasi hasil wireframe di depan kelas. Guru & teman memberi komentar positif dan saran perbaikan.
10.45 – 11.30	Improvement & Iterasi	Menyempurnakan desain.	Siswa memperbaiki desain sesuai masukan.
11.30 – 12.00	Mini Challenge	Melatih kreativitas & kecepatan.	Tantangan: buat wireframe “Aplikasi Pemesanan Tiket Sekolah” dalam 30 menit.
12.00 – 12.30	Refleksi & Kesimpulan	Menegaskan pemahaman materi.	Guru minta siswa menyebutkan 3 hal yang dipelajari hari ini. Bagi siswa yang aktif diberi reward.

🎉 Mengapa Belajar dengan Cara Ini Menyenangkan?

Interaktif: siswa tidak hanya mendengar, tetapi juga menggambar, membuat desain, dan presentasi.
Kreatif: bebas memilih tema aplikasi yang sesuai minat.
Praktis: langsung praktik di Figma, tanpa instalasi rumit.
Kolaboratif: siswa bisa bekerja berkelompok untuk berbagi ide.

🏆 Hasil yang Diharapkan

Setelah sesi 7 jam ini, siswa mampu:
✅ Menjelaskan apa itu wireframe & prototipe.
✅ Membuat wireframe aplikasi sederhana di Figma.
✅ Menghubungkan halaman menjadi prototipe interaktif.
✅ Presentasi hasil desain dengan percaya diri.

Mau lebih seru lagi? Tambahkan kompetisi mini di akhir kelas dengan hadiah kecil (stiker, snack, atau poin nilai tambahan). Dijamin siswa lebih bersemangat!

Salam : Redaksi