Rabu, 14 April 2021

WIREFRAME

 


Wireframe merupakan suatu kerangka dasar dari halaman website. Di wareframe terdapat berbagai komponen seperti banner, header content, footer, link, form dan lainnya. Wireframe biasanya dilakukan oleh UI designer. Biasanya seorang UI Designer terlebih dahulu akan mendiskusikan wireframe website kepada tim web development atau di sebut sebagai klien untuk mendapat masukkan demi perbaikan desain. Setelah disepakati, kerangka dasar tersebut akan diwujudkan menjadi desain visual yang lebih rapi.  

Proses pembuatan wireframe website disebut wireframing di mana Anda akan mengatur semua komponen di atas sesuai dengan tata letak yang diinginkan. Secara visual, wireframe memang hanya berbentuk garis dan kotak tanpa warna. Bahkan tulisan pada wireframe berbentuk teks sederhana atau coretan ala kadarnya. Sebab, yang diutamakan adalah gambaran rancangan halaman website saja. 

v  Komponen yang terdapat pada wireframe pada website

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 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       : Komponen ini berguna untuk mengarahkan pengunjung menjelajahi website Anda dengan mudah. Desain yang digunakan bisa berupa menu, tanda panah, atau ikon lain sesuai keinginan. Salah satu komponen dalam wireframe website adalah navigasi

4.      Komponen informasi     : Komponen informasi merupakan konten utama yang ingin disampaikan pada audiens.

5.      Komponen Tambahan   : biasanya Komponen tambahan ini bisa dimasukkan dalam wireframe sesuai jenis dan kebutuhan website.

 

v  Ada beberapa tipe tipe wireframe, yaitu:

1.      Low-fidelity wireframe  : wireframe dengan desain yang paling sederhana.  Tipe wireframe ini biasanya dibuat dalam bentuk yang masih kasar. Maksudnya, tanpa menggunakan skala, kisi, dan akurasi piksel.

2.      Mid-fidelity wireframe  : Tipe wireframe yang paling umum digunakan. Wireframe tipe ini menampilkan representasi layout yang lebih akurat, meskipun masih belum menggunakan gambar.

3.      High-fidelity wireframe: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. 

 

0 komentar:

Posting Komentar