Sebelum warna, font, atau gambar produk dipasang, ada satu tahap yang sering dilewati oleh bisnis yang terburu-buru ingin websitenya jadi, yaitu wireframe. Kerangka hitam putih berisi kotak dan garis ini terlihat sederhana, tapi justru di tahap inilah keputusan paling penting soal struktur halaman diambil.
Apa yang Ditentukan di Tahap Wireframe
Wireframe berfungsi sebagai peta tata letak sebelum desain visual dan pengembangan teknis dimulai. Di layar yang masih berupa garis dan blok abu-abu itu, tim menentukan di mana logo diletakkan, seberapa besar area untuk formulir kontak, urutan konten pada halaman produk, hingga posisi tombol yang paling ingin ditekan pengunjung.
- Hierarki informasi, bagian mana yang tampil lebih dulu di halaman
- Alur navigasi antar halaman dan menu utama
- Penempatan elemen fungsional seperti tombol, formulir, dan search bar
- Prioritas konten pada tampilan mobile dibanding desktop
Melewatkan tahap ini biasanya berujung pada revisi berulang setelah desain visual selesai, atau bahkan setelah kode mulai ditulis. Mengubah posisi elemen di atas kertas atau software wireframe jauh lebih murah dan cepat dibanding mengubah struktur setelah developer menghabiskan waktu membangun komponennya.
Beberapa hal yang biasanya diputuskan pada tahap wireframe dirangkum pada daftar berikut.
Wireframe juga menjadi bahasa bersama antara pemilik bisnis, desainer, dan developer. Klien yang belum terbiasa membaca mockup penuh warna bisa lebih fokus memberi masukan soal struktur dan alur, bukan malah terjebak diskusi soal pilihan warna yang belum waktunya dibahas. Diskusi jadi lebih terarah karena semua pihak melihat kerangka yang sama.
Proses ini biasanya melalui beberapa revisi sebelum disepakati, dan itu wajar. Justru di tahap murah inilah kesalahan struktur paling baik ditemukan, jauh sebelum halaman penuh gambar produk, animasi, dan kode yang jika diubah lagi akan menyita waktu tim pengembang berkali lipat.