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:
- Melakukan riset mengumpulkan informasi dan referensi
- Menyiapkan tools yang sesuai
- Melakukan setting grid dan layout website atau aplikasi
- 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.
