Assalamualaikum wr wb,Baiklah Bersama admin kali ini kita bakal mengupas pembahasan tentang Desain WireFrame.
Apa itu Wireframe?
Wireframe adalah kerangka dasar dari halaman website. Di dalam wireframe terdapat berbagai komponen seperti banner, header, content, footer, link, form, dan lain-lain.
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.
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.
Kurang lebih, contoh Wireframe adalah sebagai berikut:
Wireframe dari sebuah website bisa berbeda satu sama lain, tergantung jenis website serta kebutuhan pengguna. Nah, contoh wireframe di atas cocok untuk website company profile. Jika ingin membuat wireframe website toko online, tentu perlu lebih fokus ke bagian daftar produk.Lalu, apa saja komponen utama dari sebuah wireframe website ?
Komponen Wireframe Website
Inilah beberapa komponen yang diperlukan dalam membuat sebuah wireframe 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 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.
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.
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.
Tipe-Tipe Wireframe
Secara umum wireframe dibagi menjadi tiga jenis sesuai dengan detail kerangka desain yang dibuat:
1. Low-fidelity Wireframe
Low-fidelity wireframe adalah wireframe dengan desain yang paling sederhana. Tipe wireframe ini biasanya dibuat dalam bentuk yang masih kasar. Maksudnya, tanpa menggunakan skala, kisi, dan akurasi piksel. Bahkan, hanya bermodal kertas dan pensil saja, Anda sudah bisa membuat low fidelity wireframe.
2. Mid-fidelity Wireframe
Mid-fidelity wireframe adalah tipe wireframe yang paling umum digunakan. Wireframe tipe ini menampilkan representasi layout yang lebih akurat, meskipun masih belum menggunakan gambar.
Pada tipe wireframe ini, sudah terlihat perbedaan ukuran teks yang dapat memisahkan judul dan konten dengan baik. Tipe ini juga sudah menggunakan beberapa elemen website yang menonjol dengan pewarnaan yang berbeda.
Mid fidelity wireframe memang bisa digunakan dengan modal kertas dan pensil. Namun, dengan menggunakan software, hasilnya bisa jauh lebih akurat.
3. High-fidelity Wireframe
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.
4 Manfaat Membuat Wireframe
Berikut manfaat yang bisa Anda dapatkan dengan membuat wireframe:
1. Menghemat Waktu
Dengan menggunakan wireframe, pembuatan website akan lebih menghemat waktu. Kenapa bisa demikian? Sebab, perubahan pada desain website jauh lebih mudah dan cepat jika dilakukan pada saat masih berupa konsep.
Bayangkan jika programmer sudah mulai mengerjakan coding dan setelah selesai desain masih harus diganti. Artinya, tahapan desain dan coding bisa mulai dilakukan setelah konsep desain sudah disepakati.
2. Memberikan Gambaran Website Sejak Awal
Tak perlu menunggu website jadi untuk tahu konsep desainnya. Dengan wireframe, semua orang yang terlibat dalam proses pengembangan website bisa mengetahui gambaran website sejak awal.
3. Pengembangan Lebih Terstruktur
Dengan adanya wireframe, pengembangan website jauh lebih terstruktur. Tidak hanya karena konsep dasar sudah diketahui tapi juga karena masing-masing komponen sudah tertata dengan baik. Bahkan, navigasi website pun sudah termasuk di dalam kerangka dasar tersebut.
Dengan kondisi tersebut, resiko untuk melakukan perbaikan setelah website jadi lebih kecil. Sebab, setiap tahapan dikerjakan dengan konsep yang jelas.4. Memudahkan Koordinasi
Penggunaan wireframe website memudahkan koordinasi dalam pengembangan website. Baik ketika Anda mengerjakan website sendiri atau untuk klien.
Semua proses pengerjaan website bisa mengacu pada kerangka dasar yang sudah disepakati. Jadi ketika berdiskusi untuk melakukan perbaikan, Anda bisa melihat pada wireframe tersebut.
Sekian Terima Kasih
Wassalamualaikum wr wb
0 Komentar