Blueprint, Wireframe, dan Mockup Aplikasi: Fungsinya Sebelum Coding Dimulai

Blueprint dan mockup aplikasi adalah alat untuk menyamakan bayangan semua pihak sebelum satu baris kode ditulis. Klien, pengguna, dan pengembang sering membayangkan aplikasi yang berbeda walaupun membaca dokumen kebutuhan yang sama. Gambar dan prototipe membuat perbedaan itu terlihat lebih awal, saat perubahan masih murah.

Poin penting

• Blueprint menjelaskan gambaran besar: modul, peran, alur, data, dan integrasi.
• Wireframe menyepakati susunan halaman; mockup menyepakati tampilan visual.
• Prototipe yang bisa diklik membantu pengguna mencoba alur sebelum aplikasi dibuat.
• Rancangan yang disetujui menjadi acuan pengembangan dan kriteria pengujian.

Mengapa tahap ini menghemat biaya

Perubahan pada rancangan hanya memerlukan waktu untuk menggeser kotak di layar desain. Perubahan yang sama setelah aplikasi dibangun bisa menyentuh basis data, logika, laporan, dan pengujian ulang. Itulah sebabnya tahap rancangan, walaupun terlihat memperlambat di awal, sering kali mempercepat proyek secara keseluruhan.

Blueprint: peta besar sistem

Blueprint biasanya disusun setelah analisis kebutuhan. Isinya antara lain:

• Tujuan sistem dan ukuran keberhasilannya.
• Daftar modul dan fitur utama per modul.
• Peran pengguna dan hak aksesnya.
• Alur proses utama, misalnya dari pengajuan sampai persetujuan.
• Data utama yang dikelola dan sumbernya.
• Integrasi dengan sistem lain dan mekanisme pertukaran datanya.
• Tahapan pengembangan dan prioritas rilis.

Untuk instansi, blueprint juga membantu menyelaraskan aplikasi dengan arsitektur SPBE dan rencana data organisasi. Lihat aplikasi SPBE pemerintah daerah.

Wireframe: susunan tanpa gangguan warna

Wireframe adalah sketsa halaman dalam warna abu abu. Tujuannya memusatkan diskusi pada pertanyaan penting: informasi apa yang tampil, urutannya, tombol apa yang tersedia, dan ke mana tombol itu mengarah. Tanpa warna dan gambar, peserta rapat tidak terdistraksi oleh selera visual.

Mockup: tampilan mendekati hasil akhir

Setelah susunan disepakati, mockup memberi wujud visual: warna identitas organisasi, huruf, ikon, dan gaya komponen. Mockup memastikan aplikasi terlihat konsisten dan profesional, serta memudahkan persetujuan pimpinan yang biasanya lebih mudah memahami gambar daripada dokumen.

Prototipe: mencoba sebelum dibangun

Prototipe menghubungkan mockup menjadi alur yang bisa diklik. Pengguna dapat mencoba, misalnya, membuka daftar pengajuan, memilih satu, lalu menekan setujui. Di tahap ini masalah alur paling mudah ditemukan, dan uji kemudahan pakai bisa dilakukan. Prinsipnya dibahas di artikel UI UX design aplikasi bisnis.

Siapa yang terlibat dan bagaimana menyetujui

1. Analis dan desainer menyiapkan rancangan dari hasil analisis kebutuhan.
2. Perwakilan pengguna setiap peran meninjau dan mencoba prototipe.
3. Masukan dicatat dan rancangan diperbaiki.
4. Penanggung jawab proyek menyetujui secara tertulis.
5. Rancangan yang disetujui menjadi acuan pengembangan dan dasar skenario pengujian.

Kesalahan yang sering terjadi

• Melewati tahap rancangan karena ingin cepat melihat aplikasi jadi.
• Hanya pimpinan yang meninjau, padahal pengguna harianlah yang paling tahu kendala alurnya.
• Rancangan disetujui lisan sehingga mudah diperdebatkan kemudian.
• Rancangan tidak diperbarui saat ada perubahan, sehingga dokumen dan aplikasi tidak lagi sama.

Bagian dari proses pengembangan

Pada proyek Rajonet, rancangan alur dan tampilan dibuat dalam bentuk prototipe yang disepakati bersama sebelum pengembangan per modul dimulai. Tahapan lengkapnya ada di artikel tahapan pembuatan sistem informasi, dan pengerjaannya termasuk dalam jasa pembuatan sistem informasi.