Pada banyak proyek website, tahap wireframe dilewati karena dianggap memperlambat pekerjaan. Kenyataannya kebalikannya: revisi yang mahal biasanya muncul di akhir, ketika desain sudah rapi dan pengembangan sudah berjalan tetapi struktur halamannya ternyata belum sesuai kebutuhan. Pertanyaan apa itu wireframe sebaiknya dijawab sebagai alat kerja, bukan istilah desain. Artikel ini menjelaskan fungsinya, tingkat detail yang berbeda untuk tiap kebutuhan, bedanya dengan mockup dan prototipe, serta cara membuatnya tanpa perangkat mahal.
Isi Konten
Apa Itu Wireframe
Wireframe adalah kerangka tampilan halaman yang menunjukkan susunan elemen tanpa memakai warna, foto asli, atau tipografi final. Isinya berupa kotak penanda untuk gambar, garis untuk pemisah, dan label singkat untuk setiap blok, sehingga yang terlihat hanya struktur dan hierarki informasi.
Menurut penjelasan Balsamiq tentang apa itu wireframe, dokumen ini sengaja dibuat sederhana agar perhatian tertuju pada tata letak dan alur, bukan pada pilihan warna atau keindahan gambar. Karena tidak ada detail visual, setiap orang yang melihatnya terpaksa membahas hal yang lebih penting lebih dulu: apa yang harus ada di halaman ini, dan mana yang paling menonjol.
Wireframe bisa dibuat dengan pensil di kertas, dengan perangkat gratis, atau dengan alat khusus. Yang menentukan mutu bukan perangkatnya, melainkan kejelasan struktur dan kesepakatan tim terhadapnya.
Fungsi Wireframe dalam Proyek Website
- Menyepakati struktur sebelum desain dikerjakan. Perubahan susunan blok jauh lebih murah dilakukan di tahap kerangka dibanding setelah desain dan kode jadi.
- Memisahkan dua hal yang sering tercampur. Wireframe membahas isi dan urutan; desain membahas tampilan. Memisahkannya membuat diskusi lebih fokus.
- Mempercepat masukan dari banyak pihak. Karena bentuknya kasar, orang lebih berani mengusulkan perubahan tanpa merasa mengkritik pekerjaan desainer.
- Menemukan masalah alur lebih awal. Tombol yang seharusnya ada, langkah yang terlalu panjang, atau informasi penting yang tersembunyi biasanya baru terlihat saat kerangka digambar.
- Menjadi acuan bersama. Dokumen ini dipakai kembali saat pengembangan dan pengujian, sehingga tidak ada tafsir berbeda antar tim.
Tingkat Detail: Low Fidelity dan High Fidelity
Wireframe tidak selalu berbentuk sama. Tingkat detailnya disesuaikan dengan tahap pekerjaan.
- Low fidelity. Sketsa tangan atau blok abu-abu tanpa ukuran presisi. Cepat dibuat, murah diubah, dan cocok untuk mengeksplorasi beberapa alternatif susunan dalam waktu singkat.
- Menengah. Blok sudah rapi mengikuti grid, ukuran proporsional, tetapi masih tanpa warna dan gambar nyata. Dipakai ketika susunan sudah mulai disepakati.
- High fidelity. Sudah memakai ukuran mendekati hasil akhir, lengkap dengan anotasi perilaku seperti pesan galat atau kondisi kosong. Berguna sebagai rujukan kerja sebelum masuk tahap desain visual.
Pembahasan Nielsen Norman Group tentang tingkat kesetiaan rancangan menjelaskan bahwa pilihan tingkat detail selalu bertukar dengan waktu dan biaya pembuatannya. Untuk sebagian besar proyek, urutan yang efisien adalah mulai dari versi paling kasar, lalu hanya menaikkan detail pada halaman yang memang akan dikerjakan lebih dulu.
Beda Wireframe, Mockup, dan Prototipe
Ketiga istilah ini sering dianggap sama, padahal perannya berurutan.
- Wireframe hanya mengatur struktur dan urutan informasi. Tanpa warna, tanpa gambar asli, tanpa keputusan tipografi final.
- Mockup sudah menunjukkan tampilan visual final secara statis: warna, tipografi, ikon, dan gambar. Mockup menjawab pertanyaan “bagaimana bentuknya nanti”, tetapi belum bisa diklik.
- Prototipe menambahkan interaksi. Pengguna bisa menekan tombol, berpindah halaman, dan mencoba alur pemesanan. Biasanya dibuat setelah struktur dan tampilan disepakati.
Urutan pengerjaan yang umum: wireframe, mockup, prototipe, lalu pengembangan. Meski begitu, tidak semua proyek perlu melewati ketiganya. Untuk halaman sederhana seperti halaman kontak, wireframe kasar yang langsung dikembangkan sering sudah memadai. Sebagai gambaran cara menyusun halaman yang berorientasi hasil, ada pembahasan tersendiri di artikel struktur landing page yang baik untuk konversi tinggi.
Isi yang Biasanya Ada di Sebuah Wireframe
Meski terlihat sederhana, kerangka halaman umumnya memuat bagian berikut.
- Header dan menu navigasi beserta urutan menunya, karena urutan ini menentukan ke mana pengunjung diarahkan lebih dulu.
- Blok utama di bagian atas yang memuat pesan pokok, biasanya berisi judul, penjelasan singkat, dan satu tombol tindakan.
- Blok pendukung seperti daftar layanan, bukti pekerjaan, atau testimoni, disusun menurut prioritas, bukan menurut urutan yang paling mudah dikerjakan.
- Ajakan bertindak di beberapa titik, bukan hanya di bagian paling bawah.
- Formulir atau kontak dengan jumlah kolom seperlunya, disertai penanda bidang wajib.
- Footer yang memuat tautan penting, alamat, dan kanal resmi.
Satu hal yang perlu dijaga: hierarki. Karena tidak ada warna untuk menarik perhatian, prioritas harus terlihat dari ukuran, posisi, dan jarak antar elemen. Kalau hierarki sudah jelas di tahap kerangka, desain final biasanya lebih mudah dirapikan.
Ukuran Layar yang Sebaiknya Dipakai
Kerangka biasanya dibuat untuk dua ukuran: ponsel dan desktop. Mulai dari ukuran ponsel lebih dulu, karena ruangnya sempit sehingga Anda terpaksa menentukan prioritas: apa yang benar-benar harus terlihat tanpa perlu menggulir. Setelah versi ponsel selesai, versi desktop dibuat dengan menambah ruang, bukan dengan menambah konten baru.
Untuk ukuran kerja, cukup pakai lebar standar ponsel dan lebar konten desktop yang biasa dipakai tim. Yang penting bukan angka presisinya, melainkan kebiasaan mengambil keputusan susunan pada ukuran sempit lebih dulu. Cara ini menghindari pola yang sering terjadi: tata letak desktop dibuat penuh, lalu dipaksa dikecilkan sampai isinya tidak lagi terbaca di ponsel.
Cara Membuat Wireframe Sederhana
- Kumpulkan tujuan dan kebutuhan halaman. Tentukan siapa yang akan membuka halaman ini dan tindakan apa yang diharapkan dari mereka.
- Daftar elemen wajib. Tulis semua informasi yang harus tampil, lalu buang yang hanya bersifat tambahan.
- Urutkan berdasarkan prioritas pengunjung. Taruh hal yang paling sering dicari di posisi yang paling mudah ditemukan, bukan di posisi yang paling menarik secara visual.
- Mulai dari sketsa kertas. Buat tiga sampai lima alternatif kasar untuk halaman yang sama. Kecepatan membuat versi pertama membuat perbandingan jadi lebih jujur.
- Rapikan versi terpilih. Pindahkan ke perangkat digital dengan grid sederhana, tetap tanpa warna dan gambar asli.
- Tandai alur antar halaman. Hubungkan layar satu dengan lainnya agar terlihat langkah yang harus dilalui pengunjung. Pendekatan yang menggabungkan kerangka layar dengan bagan alur ini dibahas pada penjelasan Nielsen Norman Group tentang wireflows.
- Minta masukan sebelum masuk desain. Tunjukkan kepada calon pengguna atau pihak yang paling memahami isi halaman. Perbaiki struktur dulu, baru lanjut ke tampilan.
Bila tim Anda baru memulai, panduan dasar dari Interaction Design Foundation tentang wireframing bisa dipakai sebagai bahan pelatihan singkat sebelum praktik pertama.
Kesalahan yang Sering Terjadi
- Langsung memakai warna dan foto. Diskusi berpindah ke selera tampilan sebelum struktur disepakati, dan revisi jadi berlapis.
- Terlalu detail di tahap awal. Kerangka yang dipoles berlebihan membuat perubahan terasa mahal sehingga tim enggan mengusulkan perbaikan.
- Tidak menandai prioritas. Semua blok dibuat sama besar, sehingga pengunjung tidak punya arah.
- Hanya dibahas internal. Tanpa masukan dari calon pengguna, halaman yang rapi bisa tetap membingungkan.
- Selesai lalu dilupakan. Kerangka tidak disimpan sebagai acuan, sehingga keputusan yang sudah disepakati hilang saat pengembangan.
Untuk proyek yang dikerjakan bersama pihak lain, pastikan kerangka ini termasuk dalam dokumen serah terima. Sebagai gambaran apa saja yang biasanya perlu disiapkan sebelum situs mulai dibangun, lihat penjelasan pada artikel pengertian website.
Contoh Penerapan: Halaman Beranda dan Halaman Layanan
Agar lebih konkret, berikut gambaran bagaimana kerangka dua halaman yang paling sering diminta disusun.
Halaman beranda. Bagian atas memuat satu pesan pokok dan satu tombol tindakan. Setelah itu tiga blok layanan utama, disusun dari yang paling sering diminta. Berikutnya blok bukti: contoh pekerjaan, angka yang bisa diverifikasi, atau testimoni. Lalu penjelasan singkat proses kerja, daftar pertanyaan yang sering muncul, dan penutup berisi kontak. Perhatikan bahwa urutan ini mengikuti pertanyaan pengunjung, bukan urutan struktur perusahaan.
Halaman layanan. Bagian atas menyebut layanan secara spesifik dan untuk siapa. Setelah itu penjelasan masalah yang diselesaikan, rincian pekerjaan yang termasuk dan tidak termasuk, alur kerja bertahap, informasi biaya atau cara menghitungnya, bukti pekerjaan terkait, lalu pertanyaan yang sering diajukan. Halaman ini biasanya menjadi tempat keputusan, jadi setiap blok sebaiknya menjawab satu keraguan yang mungkin muncul.
Halaman formulir atau kontak. Jumlah kolom dibuat sesingkat mungkin, penanda bidang wajib jelas, dan penjelasan tentang apa yang terjadi setelah formulir dikirim. Bagian terakhir ini sering terlupa, padahal ketidakpastian setelah mengirim pesan menjadi salah satu penyebab calon pelanggan batal menghubungi.
Kalau kerangka tiga halaman itu sudah rapi, sisanya jauh lebih mudah karena struktur umumnya bisa diulang dengan penyesuaian pada jenis kontennya.
Cara Memberi Masukan pada Wireframe
Masukan yang salah arah membuat tahap ini kehilangan manfaatnya. Beberapa kebiasaan berikut membantu.
- Bahas struktur, bukan selera. Pertanyaan seperti “mengapa blok ini di atas blok itu” lebih berguna daripada “saya kurang suka tata letaknya”.
- Minta satu hal terlebih dulu. Contoh pertanyaan yang tajam: informasi apa yang harus dilihat pengunjung pada lima detik pertama.
- Catat perubahan terpisah, jangan langsung dikerjakan. Kumpulkan seluruh masukan, lalu sepakati mana yang dikerjakan pada putaran ini.
- Batasi jumlah perubahan per putaran. Revisi besar berulang kali membuat struktur akhir sulit dievaluasi.
- Tutup dengan keputusan. Setiap pertemuan sebaiknya menghasilkan satu versi yang disetujui, bukan sekadar daftar usulan.
Wireframe untuk Website yang Sudah Berjalan
Kerangka juga berguna saat merombak situs lama. Caranya berbeda sedikit: mulai dari pengamatan, bukan dari kertas kosong.
Periksa data halaman yang paling banyak dibuka dan halaman yang paling cepat ditinggalkan. Tandai bagian yang jarang disentuh pengunjung, lalu tanyakan apakah bagian itu memang tidak dibutuhkan atau hanya sulit ditemukan. Dari situ susun kerangka versi baru untuk satu halaman saja sebagai uji coba. Bila hasilnya membaik, baru terapkan polanya ke halaman lain.
Cara bertahap ini menghindari risiko mengubah seluruh situs sekaligus. Pertanyaan apa itu wireframe di konteks perombakan sederhana saja: alat untuk menyepakati perbaikan sebelum perbaikan itu dikerjakan.
Pertanyaan yang Sering Diajukan
Apa itu wireframe secara singkat?
Wireframe adalah kerangka tampilan halaman yang menunjukkan susunan dan prioritas elemen tanpa warna, foto asli, atau tipografi final. Fungsinya menyepakati struktur sebelum desain dikerjakan.
Apakah wireframe harus dibuat sebelum desain?
Tidak wajib, tetapi membantu pada halaman yang melibatkan banyak pihak atau banyak langkah. Perubahan struktur jauh lebih murah dilakukan di tahap kerangka.
Apa bedanya wireframe dan mockup?
Wireframe hanya mengatur struktur. Mockup sudah menampilkan visual final secara statis, lengkap dengan warna, tipografi, dan gambar, tetapi belum bisa diklik.
Alat apa yang dipakai membuat wireframe?
Bisa dimulai dari kertas dan pensil, lalu dilanjutkan dengan perangkat gratis atau alat khusus wireframing. Untuk tahap awal, cara manual sering lebih cepat dan lebih murah.
Apakah wireframe perlu diuji ke pengguna?
Dianjurkan, terutama untuk halaman yang berperan penting, karena menguji kerangka jauh lebih murah daripada menguji hasil akhir yang sudah dikembangkan.
Kalau Anda memerlukan website yang strukturnya sudah dipikirkan sejak awal, tim Lenteraweb mengerjakan tahap perancangan termasuk susunan halaman, alur pengunjung, hingga desain akhir dan pelatihan singkat untuk pengelolanya. Contoh pekerjaan serta paketnya ada di halaman jasa pembuatan website dan portofolio dan harga.
Baca juga: struktur landing page yang baik · pengertian website · panduan membuat website
