Apa Itu Wireframe: Pengertian dan Tahapan Wireframing

Wireframing

Dalam sebuah project aplikasi diperlukan adanya rancangan, hal yang sangat diperlukan disini adalah peran dari Wireframe. Wireframe mampu meningkatkan desain dari sebuah project aplikasi agar terlihat profesional dan sempurna dalam merancang sebuah prototype. Lalu seberapa pentingkah peran dari desain Wireframe untuk menunjang keperluan seorang UI dan UX Designer? langsung aja simak pembahasan dibawah. Cekidot.

Pengertian Wireframe

Menurut Wikipedia, Wireframe adalah sebuah desain yang digambarkan oleh seorang desainer untuk merancang kerangka atau prototype dari website ataupun mobile device. Wireframe ini mempunyai tujuan untuk mengatur tampilan-tampilan dari aplikasi tersebut ketika nantinya selesai dibuat. Pada proses pembuatan wireframe atau biasa disebut dengan wireframing seorang UI designer akan membuat tata letak dari aplikasi dan selanjutkan akan didiskusikan bersama dengan web dan mobile development ataupun UX designer. 

Tahapan Wireframing

Untuk membuat sebuah desain aplikasi juga diperlukan tahapan agar hal yang diinginkan dapat terwujud, berikut ini adalah tahapan dalam melakukan wireframing :

1. Melakukan Riset

Hal pertama yang harus kita lakukan dalam membuat desain aplikasi adalah melakukan riset. Hal ini digunakan untuk mencari insipirasi atau ide semenarik mungkin agar desain tersebut dapat mengikuti perkembangan trend teknologi.

2. Menggunakan Peralatan

Tahapan selanjutnya yaitu adalah menggunakan peralatan, dalam membuat wireframe kalian bisa menggunakan alat yang sederhana seperti kertas, pensil, penggaris, pewarna, dan penghapus. Namun, untuk membuat desain wireframe yang lebih kompleks maka diperlukan software pembantu seperti, Mockflow, Mockingbird, Figma, dan lainnya.

3. Menentukan Tata Letak

Setelah tahapan pertama dan kedua selesai, maka tahapan selanjutnya adalah menentukan tata letak. Ditahap ini kalian bisa meletakkan elemen-elemen yang ingin kalian buat di aplikasi ataupun websitenya. Usahakan penempatannya rapi dan menarik dimata pengguna, hal ini sangat berpengaruh pada kesuksesan desain kalian nantinya.

4. Berikan Keterangan

Tahapan yang terakhir adalah memberikan keterangan, maksud dari memberikan keterangan ini adalah untuk memperjelas fungsi dari tampilan desain wireframenya, contoh, tombol 'kembali' diisi dengan keterangan 'back'. Hal ini akan mempermudah dalam perancangan yang selanjutnya. Gunakan juga font tulisan yang tepat, supaya interaksi desain dengan pengguna dapat berlangsung dengan baik dan nyaman.

Begitulah penjelasan mengenai wireframe yang sangat erat kaitannya dengan UI dan UX. Semoga kalian bisa mengerti ya, mohon maaf apabila ada kesalahan dalam penulisan. Sampai ketemu dipostingan selanjutnya. See You :) 

Bagikan Artikel ini