Yuk Mengenal Desain Wireframe

     Hallo semuanya dikesempatan kali ini kita akan membahas seputar Desain Wireframe. Seperti yang kita ketahui desain adalah suatu kegiatan merancang sesuatu yang akan memberikan hasil yang memuaskan. Sedangkan Wireframe perancangan sebelum membuat suatu produk digital.

    Jadi , kira - kira apa ya yang dimaksud dengan Desain Wireframe? Yukk simak penjelasannya...

Pengertiain Wireframe

    Wireframe merupakan kerangka dasar dari halaman web atau sebuah kerangka struktural yang biasanya digunakan untuk membuat sebuah tata letak dari suatu website agar sesuai dengan keinginan client sebelum masuk ke proses desain. Proses pembuatan wireframe website disebut wireframing yang biasanya dilakukan oleh seorang UI Designer dengan memanfaatkan software desain khusus wireframe.

    Dengan wireframe, kita bisa merancang struktur halaman yang baik, tata letak, arsitektur informasi, langkah - langkah sebuah perintah dan kegunaanya. Adapun komponen yang menjadi bahan untuk proses wireframe antara lain meliputi, bagian header, footer, sidebar, dan beberapa komponen tambahan lainnya. Sebenarnya secara visual wireframe memang hanya berbentuk garis dan kotak tanpa warna. Bahkan tulisan pada wireframe berbentuk teks sederhana, sebab, yang diutamakan adalah gambaran rancangan halaman websitenya saja.

Komponen Wireframe Website

1. Layout Utama

    Komponen Wireframe Website biasanya berupa kotak - kotak yang telah diatur sesuai dengan tata letak halaman website. Komponen ini terdiri dari beberapa bagian seperti header, menu navigasi, body, dan tata letak sidebar.

2. Komponen Interface

    Komponen ini berhubungan dengan media interaksi antara tampilan website dangan pengunjung. Komponen ini juga digunakan sebagai penunjang informasi berupa button, link, judul, logo, font size, dan lain sebagainya.

3. Komponen Navigasi

    Komponen ini biasanya digunakan untuk mengarahkan kemana pengunjung kan menjelajahi website dengan mudah. Biasanya desai yang digunakan berupa menu, tanda panah, atau ikon - ikon lain sesuai yang di inginkan.

4, Komponen Informasi

    Komponen ini merupakan komponen utama yang ingin disampaikan kedapa audiens. Contohnya seperti thumbnail, link, paragraf, dan lain sebagainya. Oleh karena itu penempatan komponen ini harus sesuai atau pada bagian yang mudah untuk dilihat oleh pengunjung.

5. Komponen Tambahan

    Komponen ini biasanya dimasukkan dalam wireframe sesuai dengan jenis dan kebutuhan website. Contohnya seperti ketika merancang website untuk sebiah toko online, komponen yang biasa digunakan seperti, fitur cek resi, form konfirmasi pemesanan, dan lain sebagainya.

Beberapa Manfaat Wireframe 

1. Menghemat Waktu
2. Memberikan Gambaran Website Sejak Awal
3.  Pengembangan Lebih Terstruktur
4. Memudahkan Koordinasi

Langkah - Langkah Membuat Wireframe 

1. Melakukan Sebuah Riset

    Hal ini dilakukan untuk merancang website agar sesuai dengan trend sekarang ini. Melakukan riset berguna untuk mendapatkan inspiraasi desain yang menarik.

2. Menyiapkan Tools

    Langkah selanjutnnya yaitu menyiapkan sebuah tools untuk membangun desain wireframe. Seperti kertas, pewarna, dan pensil. Ada beberapa tools wireframe yang biasa digunakan :

1. Mockflow
2. Mockingbird
3. Cacoo
4. Figma
5. Balsamiq

3. Melakukan Setting Grid

    Langkah ini dilakukan untuk mengatur halaman website menjadi beberapa kolom sebagai tempat dari komponen yang sudah ditentukan. Melakukan Setting Grid bertujuan agar membuat penataan lebih mudah dengan hasil yang rapi sehingga tampuilan website akan terlihat seimbang dengan beberapa komponen di dalamnya.

4.Menentukan Tata Letak

    Setelah Melakukan Setting Grid langkah selanjutnya yaitu menentukan tata letak elemen website. Dengan bantuan grid kita bida menggunakan bentuk kotak untuk setiap komponen yang akan digunakan. Pada bagian ini kita bida menentukan seberapa besar bagian footer website, dan sesuaikanlah letak nya sesuai keinginan.

5. Tuliskan Informasi Konten

    Pastikan informasi konten jelas dan mudah untuk dibaca. Gunakanlah ukuran dan jenis font yang berbeda untuk masing - maasing komponen. Jadi, bisa sekaligus membedakan berbagai informasi dalam desain tersebut.

    Jadi, itu dia pembahasan seputar Wireframe. Semoga para pembaca bertambah wawasannya setelah membaca postingan ini dan semoga bermanfaat.

Terimakasih sudah mampir...