Dulu saya berpikir kalau membuat prototype aplikasi itu hanya bisa dilakukan lewat software rumit seperti Figma atau Adobe XD. Tapi ternyata, dengan Canva saja kita sudah bisa membuat prototype UI/UX yang interaktif, rapi, dan mudah dipresentasikan.
Dalam artikel ini, saya akan berbagi pengalaman saat membuat prototype aplikasi Treenify sebuah platform pembelajaran online menggunakan Canva dari tahap awal sampai jadi prototype yang bisa diklik layaknya aplikasi sungguhan.
1. Mulai dari Ide dan Wireframe
Langkah pertama sebelum mendesain adalah menyiapkan konsep dan wireframe.
Wireframe adalah kerangka dasar tampilan aplikasi yang berfungsi sebagai peta atau alur pengguna (user flow). Pada proyek Treenify, saya membuat 10 halaman utama sebagai fondasi tampilan aplikasi, yaitu:
-
Loading Page
- Home Page
- Pilihan Kelas
- Deskripsi Kelas
- Aktivitas Pembelian Kelas
- Pengajar Berpengalaman
- Profil Pengajar
- Profil Pengguna
- Chat
- More Apps
Dari sini saya bisa melihat bagaimana pengguna akan berpindah dari satu halaman ke halaman lain misalnya dari menu utama ke deskripsi kelas, lalu ke fitur chat. Wireframe ini penting banget karena jadi dasar sebelum masuk ke proses desain digital.
2. Buka Canva dan Tentukan Ukuran Frame
Setelah wireframe siap, saya beralih ke Canva.
Langkah awalnya sederhana:
- Masuk ke Canva.com
- Klik Create a Design
- Pilih ukuran 1080 × 1920 px (ukuran standar untuk aplikasi mobile)
- Beri nama file, misalnya “Prototype Treenify”
Setelah itu, buat satu halaman (page) untuk setiap tampilan yang sudah dirancang di wireframe tadi.
3. Mendesain Setiap Halaman
Bagian paling menyenangkan dari proses ini tentu saja tahap desain!
Di sini saya mulai menambahkan berbagai elemen seperti bentuk, teks, dan ikon untuk membuat tampilan aplikasi terlihat nyata.
Beberapa hal penting yang saya lakukan:
- Menggunakan shape dan frame untuk membuat tombol, menu, dan foto.
- Menambahkan teks untuk judul halaman, navigasi, dan deskripsi.
- Menyisipkan ikon dari menu Elements untuk membuat tombol navigasi seperti Home, Profil, dan Chat.
Menggunakan warna utama khas Treenify:
- Hijau tua (#044d13)
- Hitam (#000000)
- Putih (#ffffff)
- Menggunakan font Poppins agar tampilan terlihat profesional dan mudah dibaca.
Contohnya, halaman Home menampilkan rekomendasi kelas dalam bentuk kotak besar di bagian tengah, sedangkan halaman Deskripsi Kelas berisi detail seperti penjelasan materi, manfaat belajar, dan tombol “Beli Sekarang”.
Untuk halaman More Apps, saya menambahkan fitur tambahan seperti CV Maker, Job Seeker, Komunitas, dan Voucher agar aplikasi terasa lebih lengkap dan interaktif.
4. Duplikasi dan Buat Navigasi Antar Halaman
Setelah semua halaman selesai didesain, saya menduplikasi layout yang serupa agar proses editing lebih cepat.
Nah, bagian paling menarik adalah membuat navigasi antar halaman agar prototype-nya terasa hidup.
Caranya mudah:
- Klik tombol atau teks (misalnya tombol “Mulai Belajar”).
- Klik ikon Link 🔗 di toolbar atas Canva.
- Pilih halaman tujuan, misalnya Page 2 – Home Page.
- Klik Apply.
Setelah itu, tombol yang kamu buat bisa diklik saat presentasi dan akan langsung berpindah ke halaman berikutnya. Seru banget karena efeknya seperti aplikasi asli!
5. Uji Coba Prototype
Sekarang waktunya mencoba hasil desainmu!
Klik Present (ikon ▶️ di kanan atas Canva), lalu pilih Present with Transition.
Coba klik tombol-tombol seperti Home, Kelas, Chat, dan Profil.
Kamu akan melihat bagaimana flow aplikasi berjalan dengan mulus — dari Login → Home → Detail Kelas → Chat → Profil → Logout.
Saat pertama kali mencobanya, saya benar-benar merasa seperti mengoperasikan aplikasi sungguhan yang sudah jadi.
6. Bagikan atau Unduh Prototype
Setelah puas dengan hasilnya, prototype bisa langsung dibagikan.
Ada dua cara:
- Klik Share → View Only Link, agar orang lain bisa mencoba prototype kamu secara online.
- Atau Download → PDF Standard (with links) supaya bisa diakses dan diklik secara offline.
Prototype ini bisa kamu gunakan untuk presentasi proyek UI/UX, tugas kuliah, bahkan pitching ide startup. Canva menyimpan semua link antar halaman, jadi setiap interaksi akan tetap berfungsi seperti saat presentasi.
7. Hasil Akhir: Prototype Treenify
Hasil akhirnya adalah prototype aplikasi Treenify yang menampilkan konsep pembelajaran online dengan tampilan sederhana, interaktif, dan profesional.
Mulai dari Loading Page hingga More Apps, semua halaman terhubung lewat navigasi yang mudah diakses.
Warna hijau alami melambangkan pertumbuhan dan pengetahuan — sesuai filosofi Treenify sebagai “pohon pengetahuan” yang terus tumbuh dan memberikan manfaat bagi pengguna.
Kesimpulan
Membuat prototype UI/UX di Canva ternyata lebih mudah dari yang saya bayangkan.
Dengan fitur link antar halaman, Canva memungkinkan siapa pun menampilkan ide aplikasi secara nyata tanpa harus menguasai software desain tingkat lanjut.
Melalui proyek Treenify ini, saya belajar bagaimana menyusun alur pengguna, menata tampilan agar fungsional, dan menghadirkan pengalaman interaktif dalam satu presentasi.
Canva benar-benar menjadi pilihan ideal bagi pelajar, mahasiswa, dan pemula UI/UX designer yang ingin menuangkan ide aplikasi dengan cepat, indah, dan profesional.
