Wireframe
Wireframe adalah sebuah kerangka
yang berfungsi untuk membuat tata letak suatu website agar sesuai dengan
keinginan klien sebelum masuk ke proses desain atau coding. Proses wireframing
biasanya dilakukan oleh seorang UI Designer dengan memanfaatkan software desain
khusus wireframe atau coretan kertas secara manual. Adapun komponen yang
menjadi bahan untuk proses wireframe antara lain meliputi, bagian header,
body/content, footer, sidebar, dan beberapa komponen tambahan lainnya. Proses
pembuatan wireframe website disebut wireframing di mana Anda akan mengatur
semua komponen di atas sesuai dengan tata letak yang diinginkan. Wireframing
biasanya dilakukan oleh UI Designer. Dialah orang yang bertanggung jawab
membuat website menarik. Seorang UI
designer biasanya akan mendiskusikan wireframe website kepada tim web
development atau klien untuk mendapat masukkan demi perbaikan desain. Setelah
disepakati, kerangka dasar tersebut akan diwujudkan menjadi desain visual yang
lebih rapi.
Komponen Wireframe Website
1.Layout Utama
Hal pertama yang perlu
dipersiapkan dalam membuat wireframe website adalah antarmuka atau layout
utama. Elemen yang termasuk dalam layout sendiri meliputi bagian kepala
(header), menu navigasi, body, pemilihan jenis dan ukuran font, hingga
pemilihan letak sidebar apakah ada di sebelah kiri atau sebelah kanan.
2. Komponen Navigasi
Salah satu komponen dalam
wireframe website adalah navigasi. Komponen ini berguna untuk mengarahkan
pengunjung menjelajahi website Anda dengan mudah. Desain yang digunakan bisa
berupa menu, tanda panah, atau ikon lain sesuai keinginan. Dengan komponen
navigasi yang jelas, nantinya website akan mampu memberikan user experience
yang baik kepada pengunjungnya.\
3. Komponen Interface
Komponen interface adalah
komponen yang terkait dengan media interaksi antara tampilan website dengan
pengunjung. Komponen ini digunakan sebagai penunjang informasi pada pengunjung
yang biasanya berupa button, link,
judul, font size, logo, dan lain-lain.
4. Komponen Informasi
Komponen informasi
merupakan salah satu komponen utama dalam wireframe website Sesuai namanya,
komponen informasi merupakan konten utama yang ingin disampaikan pada audiens.
Contohnya, input, thumbnail, link, paragraf, dan lain-lain. Oleh karena itu,
penting untuk menempatkan komponen ini di bagian yang paling mudah dilihat
pengunjung.
5 Komponen Tambahan
Komponen tambahan bisa
dimasukkan dalam wireframe sesuai jenis dan kebutuhan website. Sebagai contoh
jika merancang website untuk toko online. Komponen tambahan yang bisa Anda
gunakan seperti, fitur cek resi, form konfirmasi pemesanan, hingga layanan chat
dengan pembeli secara langsung.
Tipe-Tipe Wireframe
1. Wireframe low-fidelity
Wireframe low-fidelity merupakan representasi visual yang
paling dasar. Biasanya, desain wireframe low-fidelity digunakan sebagai titik
awal proses desain wireframe. Wireframe low-fidelity adalah desain kasar yang
dibuat tanpa ukuran dan akurasi piksel, jadi, desain ini masih sangat sederhana
dan tidak terinci.
2. Wireframe mid-fidelity
Kebanyakan desainer UI dan UX menggunakan wireframe
mid-fidelity. Wireframe mid-fidelity memiliki detail yang lebih baik dibanding
low-fidelity. Semua fitur web ataupun aplikasi dapat terdiferensiasi dengan
jelas pada tipe wireframe ini. Biasanya, wireframe mid-fidelity dibuat dengan
warna hitam putih atau sedikit abu-abu untuk memperjelas elemen-elemen yang
ada. Tool yang bisa digunakan untuk membuat wireframe mid-fidelity adalah
Sketch atau Balsamiq.
3. Wireframe high-fidelity
High-fidelity wireframe adalah tipe wireframe yang paling
spesifik. Kerangka desain sudah menggunakan gambar dan tulisan konten yang
sebenarnya. Tak hanya itu, tipe wireframe ini juga sudah dilengkapi menu
interaktif dalam desainnya.
EmoticonEmoticon