Kenalan dengan Wireframe yuk!

Wireframe adalah blueprint bagi para UI/UX designer. Mereka adalah skema atau kerangka yang dapat memberikan gambaran kasar (low-fidelity) setiap halaman yang terdapat dalam sebuah website/aplikasi sebelum memasuki tahapan visual mockup.

Wireframe digunakan sebagai alat komunikasi efektif antara anggota tim terkait konsep sebuah produk digital. Dalam proses pembuatannya, designer akan menguji kemungkinan realisasi produk serta menerima feedback dan bahan pertimbangan lainnya. Oleh karena itulah, wireframe juga sering disebut sebagai pembuktian konsep ide seorang desainer atau Proof of Concept. Semakin jelas gambaran tata letak produk yang didapatkan pada akhir proses, semakin kecil kemungkinan tim untuk mengulang tahapan visual mockup yang sering menghabiskan banyak biaya.

Proses pembuatan wireframe

1. Penentuan Alur dan Konten

Proses pembuatan wireframe selalu diawali dengan penentuan alur dan konten berdasarkan pada interaksi antara user dan produk. Alur berarti pergerakan yang dilakukan atau alami pengguna dalam produk digital sedangkan konten adalah informasi yang akan ditampilkan kepada pengguna di setiap tahapan atau halaman.

Sebagai contoh, berikut adalah alur bagaimana user menggunakkan aplikasi mobile untuk memesan ojek online.

Pemaparan alur ini kemudian dapat membantu kita untuk menuliskan dan memprioritaskan konten dalam tiap tahapan yang akan dilalui oleh pengguna. Selain menjadi media yang bisa dibaca, ditonton atau didengarkan, konten berfungsi untuk membantu pengguna untuk menyelesaikan tujuannya. Konten dapat berupa teks, gambar ilustrasi, foto, suara, video, dan lain lain. Contoh, berikut adalah contoh konten yang terlihat dalam halaman profil mentor di sebuah aplikasi belajar online.

2. Wireframing dengan “Tangan”

Ambilah sebuah kertas dan alat tulis untuk menggambarkan tiap-tiap halaman yang dimiliki sebuah produk digital. Dalam setiap halaman, posisikan konten / informasi yang sesuai dengan alur yang akan dilalui oleh calon user. Tidak perlu khawatir jika wireframe terlihat ‘jelek.’ Tahap ini bertujuan untuk mengeluarkan seluruh ide interface yang dimiliki dalam kurun waktu yang singkat. Buang yang kurang sesuai, modifikasi atau gabungkan yang perlu perbaikan dan pilih wireframe terbaik yang paling dapat membantu calon user meraih tujuan akhir.

3. Digital Wireframing

Proses pembuatan wireframe sebenarnya bisa berhenti di tahap dua saja. Namun, jika ingin secara resmi bergabung di industri UI/UX design, designer akan dituntut untuk memiliki kemampuan penerjemahan wireframe ke dalam bentuk digital. Wireframe dalam bentuk ini akan lebih mudah dikirimkan kepada pihak lain yang terlibat, seperti, web/app developer atau klien yang telah membayar jasa. Alat digital wireframing biasanya juga memiliki fitur penyajian umpan balik yang baik sehingga proses perbaikan dapat berjalan lebih cepat. Contoh alat pembuatan wireframe yang kini populer untuk digunakan adalah Sketch, Adobe XD, Figma. Mereka memiliki kelebihan/kekurangan tersendiri dan beberapa diantaranya lebih cocok untuk produk digital tertentu.

Tips Penyusunan Wireframe

1. Gunakan warna hitam putih

Penggunaan warna hanya akan mengalihkan tenaga serta waktu desainer dari penyampaian konsep. Tahap ini tidak menuntut desainer untuk fokus pada penampakannya produk digitalnya.

2. Perlakukan teks sebagai bagian dari design

Gunakanlah teks yang diperkirakan dipakai di tampilan akhir produk. Jika desainer masih belum menemukan pilihan kata yang bagus, maka carilah kata lain yang sesuai atau sinonim dengan hal yang ingin kita sampaikan dengan pengguna.