Apa itu Wireframe Website? Mengenal Wireframe Website dan Manfaatnya

Last Updated on April 2, 2022 by

Bagi Anda para UX Designer, mungkin Anda seringkali mendengar istilah ‘wireframe’ atau wireframe website. Namun, tahukah Anda apa itu Wireframe? Wireframe adalah kerangka (skeletal) dua dimensi dari suatu laman web atau aplikasi.

Di masa kini, wireframe tidak hanya dibutuhkan dalam pembuatan website saja, tetapi juga pada pembuatan aplikasi.

Wireframe memberi Anda gambaran yang jelas mengenai struktur halaman, tata letak, arsitektur informasi, aliran pengguna, fungsionalitas, dan perilaku yang diinginkan. Wireframe sendiri mewakili konsep produk awal, gaya, warna dan grafik yang dibuat seminimal mungkin.

Proses dalam membuat wireframe disebut dengan wireframing. Secara harfiah, wireframing adalah proses penting dalam memproduksi desain website ataupun aplikasi. Wireframing adalah cara untuk mendesain sebuah layanan website.

Wireframe biasanya digunakan untuk meletakkan konten dan fungsionalitas pada halaman yang memperhitungkan kebutuhan pengguna dan perjalanan pengguna. Wireframe biasanya digunakan pada awal proses pengembangan untuk menetapkan struktur dasar halaman sebelum desain visual dan konten ditambahkan.

Tujuan Wireframing

Wireframing sangat penting dalam mendesain UI. Tujuan wireframe adalah untuk memberikan pemahaman visual tentang halaman di awal proyek untuk mendapatkan persetujuan stakeholder dan tim proyek sebelum fase kreatif berlangsung.

Wireframe juga dapat digunakan untuk membuat navigasi sekunder dan global guna memastikan terminologi dan struktur yang digunakan untuk situs memenuhi harapan pengguna.

Beberapa tujuan lain dari Wireframing yang tak kalah penting adalah:

1. Wireframe menjaga konsep dari website atau aplikasi tetap fokus pada pengguna.

Wireframe sangat efektif digunakan sebagai perangkat komunikasi karena wireframe memfasilitasi feedback dari pengguna, memicu percakapan dengan klien dan menghasilkan ide di antara para desainer.

Melakukan pengujian pengguna selama tahap wireframing awal dan memungkinkan perancang untuk menyimpan feedback, dan mengidentifikasi poin-poin penting yang membantu membangun dan mengembangkan konsep produk.

Wireframing adalah cara sempurna bagi para desainer untuk mengukur bagaimana pengguna akan berinteraksi dengan antarmuka. Wawasan ini membantu perancang untuk memahami apa yang terasa intuitif bagi pengguna dan menciptakan produk yang nyaman dan mudah digunakan.

2. Wireframe memperjelas dan menentukan fitur dari situs web maupun aplikasi.

Fitur khusus Wireframing akan menyampaikan dengan jelas kepada klien, bagaimana mereka akan menggunakan situs web atau aplikasi serta tujuan apa yang akan mereka layani dengan situs serta aplikasi tersebut.

Wireframing memungkinkan semua stakeholder untuk mengukur berapa banyak ruang yang perlu dialokasikan untuk setiap fitur, menghubungkan arsitektur informasi situs ke desain visualnya dan memperjelas fungsionalitas dari suatu halaman.

Melihat fitur pada wireframe juga akan memungkinkan Anda untuk memvisualisasikan bagaimana semuanya bekerja sehingga Anda dapat menghapus beberapa fitur jika Anda merasa fitur tersebut tidak berfungsi dengan baik dengan elemen laman lainnya.

Keuntungan Membuat Wireframe

1. Cepat, Mudah, dan Murah.

Banyak UI/UX designer lebih suka melakukan wireframing untuk membuat kerangka website maupun aplikasi karena murah dan cepat. Hal ini adalah bagian terbaik dari Wireframe, yakni cepat, mudah, dan mudah untuk dibuat.

Untuk membuat wireframe sejatinya tidak dibutuhkan aplikasi khusus, hanya dengan kertas dan pulpen saja Anda sudah dapat membuat wireframe website ataupun aplikasi.

Namun saat ini Anda juga dapat menggunakan beberapa aplikasi pembuat wireframe yang tersedia di mana pada aplikasi ini Anda juga bisa langsung mengembangkan website atau aplikasi yang sudah ada wireframing sebelumnya.

2. Menyediakan Gambaran Website atau Aplikasi dari Awal

Sering digunakan untuk menyelesaikan proses User Centred Design, wireframe juga digunakan pada awal fase desain. Uji kegunaan prototipe sering kali menjadi pengujian halaman wireframe untuk memberikan masukan pengguna sebelum proses kreatif.

Wireframe dapat digambar dengan tangan, tetapi sering kali disatukan menggunakan perangkat lunak seperti Microsoft’s Visio, untuk memberikan pengiriman di layar.

Namun, jika wireframe akan digunakan untuk uji kegunaan prototipe, yang terbaik adalah membuatnya dalam HTML. Ada beberapa perangkat lunak bagus yang memungkinkan Anda melakukan ini dengan mudah termasuk Axure RP atau Omnigraffle (khusus Mac).

3. Memudahkan koordinasi dan memberi umpan balik (feedback).

Keuntungan lainnya dari wireframing adalah ia memberikan visual awal yang dapat digunakan untuk melakukan pratinjau dengan klien Anda. Pengguna juga dapat memeriksanya sebagai mekanisme feedback awal untuk uji kegunaan prototipe.

Wireframing tidak hanya lebih mudah untuk diubah daripada desain konsep, setelah disetujui oleh klien dan pengguna, mereka memberikan kepercayaan kepada desainer. Wireframing juga memastikan konten halaman dan fungsionalitas ditempatkan dengan benar berdasarkan kebutuhan bisnis.

Seiring dengan kemajuan proyek, mereka dapat digunakan sebagai dialog yang baik antara anggota tim proyek untuk menyetujui visi dan ruang lingkup proyek.

Jenis-Jenis Wireframe

Ada beberapa jenis wireframe yang sering dibuat oleh para UI/UX designer yaitu: low-fidelity wireframe, mid-fidelity wireframe, dan high-fidelity wireframe. Berikut penjelasan lebih detil tentang masing-masing jenis wireframe:

1. Low-fidelity wireframe

Low-fidelity wireframe adalah representasi visual dasar dari laman web dan biasanya berfungsi sebagai titik awal desain. Oleh karena itu, Low-fidelity wireframe cenderung cukup kasar, dibuat tanpa skala, kisi, atau akurasi piksel.

Wireframe dengan ketelitian rendah menghilangkan detail yang berpotensi menjadi gangguan dan hanya menyertakan gambar sederhana, bentuk blok, dan konten tiruan, seperti teks pengisi untuk label dan tajuk.

Meski demikian, Low-fidelity wireframe berguna untuk memulai percakapan, membuat navigation layout, dan memetakan alur pengguna (user flow). Dengan kata lain, low-fidelity wireframe cocok digunakan apabila Anda memiliki stakeholder atau klien yang ingin membuat suatu produk dengan fitur tersebut.

Low-fidelity wireframe juga sangat berguna bagi desainer yang memiliki banyak konsep produk dan ingin dengan cepat memutuskan kearah mana website atau aplikasinya akan dibawa.

2. Mid-fidelity wireframe

Mid-fidelity wireframe adalah wireframe paling banyak digunakan dari ketiga jenis wireframe. Wireframe jenis ini menampilkan representasi tata letak yang lebih akurat dibanding yang lainnya.

Meskipun mid-fidelity wireframe masih menghindari gangguan seperti gambar atau tipografi dan lebih menekankan banyak detail yang ditetapkan ke komponen tertentu, serta fitur-fitur yang ada dibedakan dengan jelas satu sama lain.

Variasi bobot teks juga dapat digunakan untuk memisahkan judul dan konten isi. Meskipun masih relevan di tahap awal produk, mid-fidelity wireframe biasanya dibuat menggunakan alat wireframing digital, seperti Sketch atau Balsamiq.

3. High-fidelity wireframe

Keunggulan dari high-fidelity wireframe adalah tata letak khusus piksel. Jika low-fidelity wireframe dapat menyertakan pengisi teks pseudo-Latin dan kotak abu-abu yang diisi dengan ‘X’ untuk menunjukkan gambar, high-fidelity wireframe dapat menyertakan gambar unggulan aktual dan konten tertulis yang relevan.

Detail tambahan ini membuat wireframe high-fidelity ideal untuk menjelajahi dan mendokumentasikan konsep kompleks seperti sistem menu atau peta interaktif. High-fidelity wireframe membutuhkan penanganan yang sedikit berbeda, yakni harus disimpan untuk tahap terakhir dari siklus desain produk.

Fitur-fitur pada Wireframe

Fitur-fitur yang disertakan dalam wireframe sangat bergantung pada jenis wireframe. Namun, elemen yang biasanya ditemukan di wireframe adalah  logo, bidang pencarian (search field), header, tombol berbagi, dan teks placeholder pseudo-Latin ( yang biasanya ditulis dengan Lorem Ipsum).

Pada high-fidelity wireframe juga dicantumkan sistem navigasi, informasi kontak, dan footer.

Tipografi dan citra sejatinya tidak bisa  menjadi bagian dari low-fidelity wireframe atau mid-fidelity wireframe, tetapi desainer seringkali berkreasi dengan ukuran teks untuk mewakili hierarki informasi atau menunjukkan tajuk.

Wireframe secara tradisional dibuat dalam grayscale, jadi desainer berkreasi memainkan warna ini. Contoh permainan warna ini,  menggunakan bayangan abu-abu yang lebih terang untuk mewakili warna terang, dan bayangan yang lebih gelap untuk mewakili warna yang lebih berani.

Dalam high-fidelity wireframe, desainer dapat sesekali memasukkan warna; seperti merah untuk menunjukkan peringatan atau pesan kesalahan, atau biru tua untuk menunjukkan tautan aktif.

Karena wireframe adalah dua dimensi, penting untuk diingat bahwa wireframe tidak berfungsi dengan baik dalam menampilkan fitur interaktif antarmuka seperti drop-down, status hover, atau accordion, yang menerapkan fungsi tampilkan dan sembunyikan (show and hide).

Itulah penjelasan tentang wireframe website serta aplikasi, tujuan wireframe, keuntungan wireframe, jenis-jenis wireframe, dan fitur-fitur yang ada pada wireframe. Wireframe sangat penting untuk Anda ketahui sebelum Anda membuat suatu website maupun aplikasi.

Wireframe adalah hal yang penting untuk Anda ketahui. Meski penjelasan ini tergolong penjelasan yang sangat dasar, namun perlu diketahui agar Anda dapat memperoleh pengguna, klien, maupun stakeholder yang dapat memberi approve pada website atau aplikasi buatan Anda.

Jangan lupa kunjungi Web App di https://appkey.id/ atau download aplikasinya di Google Play Store agar Anda tidak ketinggalan informasi terbaru.