Pengertian Wireframe

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.

Manfaat dari wirefream

wireframe memiliki keunggulan dan manfaat sebagai berikut :

  • Mudah digambarWireframe memiliki tata letak yang sederhana dan bersih yang dibentuk oleh elemen layar sederhana tanpa gaya dan format yang detail.
  • Mudah dimengertiWireframe disambut baik oleh banyak tim pengemban dan pebisnis karena penggunaannya sangat sederhana sehingga setiap orang dapat memahaminya tanpa harus belajar terlebih dahulu.
  • Mudah dimodifikasiAnda tidak akan memerlukan pemrograman apa pun untuk memvisualisasikan ide dan desain baru Anda sehingga membuatnya lebih praktis dan cepat.
  • Tidak diperlukan pengkodeanTidak perlu pembuatan prototipe yang berat dan tanpa pengkodean. Anda hanya perlu menggambar wireframe seolah-olah Anda menggunakan alat gambar biasa saja.
  • Anotasi sebarisAnotasi ide desain di tempat dengan bantuan bentuk anotasi yang mana notasi ini juga dapat ditampilkan dalam spesifikasi persyaratan.

Komponen dari wirefream

1. Layout Utama

Komponen utama wireframe adalah layout utama. Komponen ini biasanya berupa kotak-kotak yang telah diatur sesuai dengan tata letak halaman website. Dalam komponen ini, terdapat beberapa bagian, seperti header, menu navigasi, body, hingga letak sidebar. 

2. 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.

3. 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.

4. Komponen Informasi

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.

X