fbpx

Daftar Cloud Depa by Dewabiz - Dapatkan Saldo Gratis Secara Cuma Cuma!

General

Apa Itu Wireframe, Ketahui Pengertian Dan Jenis-Jenisnya

Yodik Prastya

Kebanyakan orang pasti akan memperhatikan desain pada saat membuat website untuk pertama kalinya. Tak salah memang, desain memang salah satu hal penting yang perlu mendapat perhatian ekstra. Oleh karena itu, penting pula bagi pemula untuk memahami apa itu wireframe.

Ketahui Apa Itu Wireframe

Nah, apa itu wireframe? Wireframe adalah kerangka awal sebelum halaman website atau antarmuka sebuah aplikasi didesain. Sementara pekerjaan membuat rancangan tampilan ini disebut sebagai wireframing. Melakukan wireframing dapat dilakukan sesuai preferensi desainer web, entah itu membuat gambar sketsa tangan ataupun menggunakan software tertentu.

Membuat sebuah wireframe juga bisa dikatakan merencanakan kerangka website atau aplikasi secara garis besar. Hal ini bisa meliputi rancangan struktur halaman, layout, arsitektur informasi, user flow, fungsionalitas hingga perilaku yang harapannya dilakukan audiens. Sebuah wireframe yang baik dan disetujui oleh pemilik website atau aplikasi kemudian diteruskan pada developer untuk dibuat interface melalui kode.

Untuk lebih memahami tentang wireframe dan dapat membuatnya dengan baik, Anda pun perlu memahami elemen atau komponen yang harus diperhatikan pada saat membuatnya, antara lain:  

Desain Informasi

Hal pertama yang perlu diperhatikan adalah bagaimana cara untuk mempresentasikan informasi atau konten kepada audiens. Contoh dari elemen ini meliputi input, thumbnail, link, paragraf, gambar dan sebagainya. Hal ini akan mempengaruhi bagaimana informasi atau konten ditempatkan agar mudah dilihat oleh pengunjung website atau pengguna aplikasi.

Layout

Berikutnya adalah tata letak, atau layout yang biasanya berupa kotak-kotak yang mewakili area tertentu. Area ini diatur sesuai tata letak halaman website. Sementara item yang termasuk dalam layout ini antara lain header, menu navigasi, body hingga letak sidebar.

Navigasi

Ketiga adalah navigasi yang berguna untuk memudahkan audiens atau pengguna untuk menjelajahi website atau aplikasi sehingga website terkesan profesional serta menunjang UX. Elemen ini meliputi menu, tanda panah, maupun ikon. Melalui navigasi yang jelas, pengguna bisa mengerti di mana informasi yang mereka inginkan atau bagaimana cara untuk menemukan informasi tersebut. 

Desain Interface

Untuk menentukan desain antarmuka yang baik, desainer perlu melakukan seleksi dan penempatan elemen. Objek yang dikelola antara lain tombol, link, judul, text-align, ukuran font dan sebagainya. Elemen ini dapat memudahkan pengguna dalam berinteraksi dengan interface website dan aplikasi yang juga menunjang informasi untuk pengunjung

Elemen Tambahan

Untuk website atau aplikasi tertentu, ada pula elemen tambahan yang juga perlu mendapat perhatian. Elemen yang disesuaikan dengan jenis proyek dan kebutuhan ini bisa saja berbeda antara website satu dan yang lainnya. Misalnya untuk toko online, cenderung memerlukan elemen seperti fitur cek resi, form konfirmasi pemesanan dan layanan chat.

Jenis-Jenis Wireframe

Setelah memahami elemen yang penting diperhatikan dalam wireframing, berikutnya Anda akan lebih mudah mengenali jenis fwireframe. Anda pun bisa menentukan jenis mana yang paling ideal sesuai kebutuhan atau jenis website Anda nantinya. Secara umum wireframe terbagi ke dalam:

Low-Fidelity Wireframe

Jenis wireframe ini memiliki desain yang sederhana dan biasanya berupa sketsa kasar. Hasil wireframing yang didapat cenderung sederhana yaitu tidak berbasis skala, kisi maupun akurasi piksel. Dalam pembuatannya, jenis sketsa ini dibuat di atas kertas menggunakan pensil saja namun sudah cukup untuk membuat rancangan desain.

Mid-Fidelity Wireframe

Jenis ini menjadi wireframe yang paling banyak dipakai saat ini. Jenis wireframe ini sudah menggunakan penjabaran layout yang lebih detail, meliputi ukuran teks yang berbeda-beda, elemen website yang mulai dipilah menggunakan warna-warni dan sebagainya. Meskipun juga banyak dibuat menggunakan gambar di kertas dan pensil warna, makin banyak jenis wireframing ini dibuat menggunakan software.

High-Fidelity Wireframe

Sesuai namanya, jenis wireframe ini bisa dikatakan sebagai rancangan yang paling spesifik di antara lain. Sketsa desain tersusun atas gambar dan tulisan konten sebenarnya. Selain itu, wireframe ini telah dilengkapi dengan menu interaktif sehingga pemilik proyek memiliki gambaran yang lebih jauh terhadap bakal website mereka.

Selanjutnya, jika Anda tertarik untuk membuat wireframe, maka lagkah yang perlu Anda lakukan nantinya antara lain:

  1. Melakukan riset mengumpulkan informasi dan referensi
  2. Menyiapkan tools yang sesuai
  3. Melakukan setting grid dan layout website atau aplikasi
  4. Mulai menuliskan informasi atau konten

Kesimpulan

Setelah membaca penjelasan tentang apa itu wireframe dan jenis-jenisnya di atas, Anda mungkin sudah memahami pentingnya wireframing ini. Ya, pekerjaan ini berkontribusi terhadap UI dan UX website maupun aplikasi. Manfaat membuat wireframe dalam pembuatan website sendiri antara lain efisiensi waktu, mendapatkan gambaran awal website, pengembangan website jadi lebih terstruktur serta memudahkan koordinasi dengan pemilik proyek dan developer.

Baca Juga