Wireframe merupakan salah satu bagian penting dalam proses pengembangan website atau aplikasi. Dengan wireframe, sebagai UX designer kamu dapat memberikan pemahaman visual kepada klien sebelum halaman website atau aplikasi tersebut benar-benar selesai.
Agar kamu lebih mengenal konsep wireframe dan peranannya dalam UX, perhatikan ulasan selengkapnya berikut ini.
Apa itu wireframe?
Wireframe memberikan gambaran visual tentang struktur web - EKRUT
Wireframe adalah kerangka atau blueprint dalam UX Design yang menjadi representasi visual dari struktur website atau aplikasi. Untuk memahami wireframe secara sederhana, kamu bisa membayangkan proses membuat rumah. Sebelum mengaplikasikan cat dan menaruh perabot, seorang arsitek perlu menggambar denah lantai. Ia perlu memastikan ruang di rumah tersebut berfungsi baik dan sesuai dengan harapan penghuninya.
Dalam ilustrasi ini denah lantai bisa diandaikan sebagai wireframe saat membangun sebuah website. Kamu perlu membuat wireframe sebelum memasukkan semua unsur dan elemen yang menunjang interface sebuah website. Proses wireframing sendiri biasanya dilakukan selama fase eksplorasi dari product life cycle. Selama fase ini, desainer biasanya akan menguji ruang lingkup produk, mengkolaborasikan ide, dan mengidentifikasi kebutuhan bisnis.
Stakeholder atau tim proyek akan menyetujui atau menolak wireframe sebelum proses kreatif dimulai. Wireframe juga digunakan untuk memastikan bahwa pengalaman yang diberikan oleh website atau elemen web sesuai dengan target pengguna. Di sinilah wireframe digunakan sebagai titik awal desain produk sebelum akhirnya dikembangkan lagi menjadi lebih detail ke dalam prototipe atau mockup.
Biasanya wireframe sendiri akan berbentuk seperti layout hitam putih sederhana tanpa warna, font, logo atau elemen desain lainnya secara spesifik. Setidaknya ada 3 elemen utama yang biasanya ada pada wireframe, yaitu:
- Desain informasi. Berisi informasi utama, menguraikan struktur dan layout halaman website.
- Desain navigasi. Membuat navigasi yang meningkatkan pengalaman pengguna .
- Desain interface. Memberikan visual dan deskripsi user.
Baca juga: Catat, ini 10 tips desain UI/UX yang ‘menjual’
Seberapa penting wireframe?
Wireframe membantu kamu tetap fokus pada usability - EKRUT
Tujuan utama wireframe adalah untuk mengilustrasikan hierarki, struktur website dan elemen interface yang akan ada dan diisi saat pengembangan situs.
Di luar itu, beberapa manfaat lain dari wireframe adalah:
- Memberikan UI Designer gambaran dasar sebelum mulai membuat screens.
- Menjadi titik referensi untuk pengembangan situs atau aplikasi.
- Mengkomunikasikan pengalaman menggunakan situs kepada pemangku. kepentingan atau klien tanpa terlalu banyak menyoroti desain visual dan branding.
- Membantu tetap fokus pada pengalaman pengguna.
- Memperjelas dan menentukan fitur dalam website.
- Menggali ide dengan cepat.
- Sebagai dasar untuk pembuatan prototipe dan user testing sejak awal.
Dari beberapa manfaat tadi kamu bisa memahami mengapa tahapan wireframing pada dasarnya penting dan sebaiknya tidak dilewatkan begitu saja. Wireframing akan membuatmu menghemat lebih banyak waktu. Sebab, ketika kamu membuat wireframe di awal proses desain, tentu akan lebih mudah ketika kamu harus membuat perubahan atas umpan balik yang diterima dibanding membuat perubahaan pada mockup final dengan banyak elemen visual.
Dengan begitu kamu bisa memetakan fungsionalitas halaman, mengutamakan usability, menangkap masalah lebih awal dan menghemat waktu untuk revisi.
Itu sebabnya jika kamu ingin lebih efisien saat mengembangkan website atau aplikasi, maka wireframing adalah tempat kamu harus memulainya.
3 Elemen wireframe
Wireframe terdiri dari beberapa elemen pokok seperti pada umumnya aplikasi atau website (Sumber: Pexels)
Setidaknya terdapat tiga elemen atau komponen utama dalam wireframe yang adalah sebagai berikut,
1. Navigasi
Seperti pada umumnya proses pengembangan perangkat lunak, elemen navigasi merupakan aspek penting yang digunakan dalam wireframe untuk menunjukkan arah bagi pengguna atau pengunjung situs. Adanya elemen navigasi memungkinkan pengguna dapat mengetahui di mana letak kursor, ikon, menu, dan beberapa hal lain sesuai user experience.
2. Desain Informasi
Desain informasi merupakan elemen wireframe yang dapat menjadi representasi konten atau informasi kepada pengguna. Elemen ini umumnya terdiri dari penyajian dan penempatan informasi untuk memfasilitasi pemahaman pengguna. Desain informasi ini nantinya berhubungan juga dengan user experience untuk menampilkan informasi secara efektif dan jelas.
3. Desain Antarmuka
Elemen wireframe yang juga penting adalah desain antarmuka atau interface. Elemen ini mencakup bagaimana pengembang memilih pengaturan ikon tampilan antarmuka untuk membuat pengguna merasa berinteraksi dengan sistem secara fungsional. Desain antarmuka dibuat dengan tujuan efisiensi dan nilai guna seperti penempatan tombol tindakan, kotak centang, dan penempatan menu.
Baca juga: Mengenal design thinking: 4 Elemen, tahapan, dan contohnya
Tipe-tipe wireframe
Kamu bisa membuat wireframe dengan pena dan kertas hingga tools digital lainnya - EKRUT
Ada beberapa jenis atau tipe wireframe yang biasa digunakan oleh UX Designer. Beberapa jenis wireframe adalah:
1. Low-fidelity wireframe
Ini adalah representasi visual paling dasar yang digunakan sebagai titik awal desain. Tipe wireframe ini biasanya dibuat dalam bentuk kasaran dan tanpa skala, kisi atau akurasi piksel. Jenis wireframe ini menghilangkan detail-detail yang berpotensi mengganggu dan hanya menyertakan gambar sederhana seperti blok atau teks untuk label dan heading. Low fidelity wireframe cocok digunakan jika kamu memiliki banyak konsep produk dan akan memutuskan arah mana yang harus dituju secara cepat. Untuk membuat low fidelity wireframe kamu cukup membuat sketsa dengan pena di atas kertas.
2. Mid-fidelity wireframe
Mid-fidelity wireframe adalah jenis wireframe paling umum digunakan. Wireframe ini menampilkan representasi layout yang lebih akurat meskipun masih menghindari penggunaan gambar atau tipografi yang dianggap dapat mengganggu. Pada mid-fidelity wireframe, lebih banyak detail yang ditetapkan ke komponen tertentu dan pembedaan fitur yang lebih jelas satu sama lain. Variasi bobot teks juga digunakan untuk memisahkan judul dan konten.
Meski terbilang masih sederhana dan menggunakan unsur hitam dan putih, namun desainer dapat menggunakan nuansa abu-abu untuk mengomunikasikan keunggulan visual elemen secara spesifik. Biasanya jenis wireframe ini dibuat menggunakan tools seperti Sketch atau Balsamiq.
3. High-fidelity wireframe
Jenis wireframe ini menggunakan layout yang sudah spesifik. High fidelity wireframe dapat menggunakan gambar yang sebenarnya dan membuat konten tertulis yang relevan sehingga membuat jenis wireframe ini ideal untuk memberikan gambaran dan mendokumentasikan konsep website yang kompleks seperti sistem menu atau peta interaktif.
Baca juga: Mengupas peran dan tugas UI/UX Designer lebih dalam
Cara membuat wireframe
Lakukan persiapan sebelum membuat wireframe - EKRUT
Lakukan persiapan sebelum membuat wireframe dengan matang. Beberapa persiapan tersebut seperti mengetahui motivasi, tujuan dan kebutuhan pengguna kamu dengan jelas. Kamu juga harus memahami tujuan setiap halaman website dalam hal tugas dan pengalaman pengguna serta membuat outline sitemap sebelum proses wireframing.
Ketika semua persiapan selesai, maka kamu dapat mulai membuat wireframe.
Adapun beberapa langkah dalam membuat wireframe adalah:
1. Siapkan tools
Kamu bisa memanfaatkan beragam tools saat membuat wireframe. Jika kamu ingin membuat low fidelity wireframe, kamu cukup menggunakan pena dan kertas. Namun, jika kamu ingin membuat wireframe yang lebih detail, manfaatkanlah tools wireframing yang ada seperti Axure, Indigo Studio, UXToolbox, dan lain-lain.
2. Masukkan konten
Pikirkan tentang jenis informasi apa yang pengguna ingin lihat di setiap halaman website dan sertakan konten yang mendekati hal tersebut. Untuk membantumu dalam melewati tahapan ini, coba tanyakan pada diri beberapa pertanyaan seperti:
- Apa yang diharapkan pengguna ketika melihat halaman website ini?
- Konten apa yang paling penting? Dan bagaimana caranya agar pengguna dapat segera melihatnya?
- Bagaimana kamu bisa mengatur alur untuk memenuhi pengalaman pengguna?
- Button dan touch points mana yang perlu digunakan pengguna untuk mencapai tujuan mereka?
3. Tambahkan detail
Setelah membuat layout dasar dan memasukkan gambaran konten yang diantisipasi, kamu bisa mulai menerapkan beberapa detail dan menguji wireframe. Tambahkan detail secukupnya agar wireframe yang kamu buat dapat mudah dipahami dan direalisasikan sebelum dibagikan ke anggota tim atau stakeholders.
Detail yang perlu dipertimbangkan misalnya tool tips, usability conventions, dan instruksi untuk konten tertentu seperti CTA.
Baca juga: Usability testing dan 9 langkah melakukannya
Perbedaan antara wireframe, mockup, dan prototype
Wireframe berbeda dengan mockup dan prototype karena umumnya wireframe hanyalah tampilan dua dimensi atau cetak biru (Sumber: Pexels)
Tentunya kita sedikit bingung tentang perbedaan wireframe dengan beberapa proses pengembangan perangkat lunak lain seperti mockup dan prototype. Adapun perbedaan dari ketiganya adalah sebagai berikut,
| Wireframe | Mockup | Prototype |
| Mempresentasikan produk dengan ketelitian rendah. | Menyajikan konten dan fungsi secara statis dengan ketelitian tinggi. | Tahapan paling dekat dengan produk akhir, dapat disimulasikan dan diuji oleh pengguna. |
| Bertindak sebagai kerangka atau cetak biru dari desain atau struktur produk. | Bertindak sebagai representasi produk awal atau visualisasi produk. | Bertindak sebagai produk awal mula yang dapat diuji maupun dicoba secara aktif. |
| Digunakan untuk membantu tim pengembang memahami proyek dengan baik. | Digunakan untuk memberikan gambaran kepada klien tentang bagaimana produk akan dibuat dan untuk meninjau proyek secara visual. | Digunakan untuk mendapatkan umpan balik pengguna setelah pengujian produk. |
Contoh wireframe
Ilustrasi pembuatan wirieframe. (Sumber: Pexels)
Untuk lebih memahami tentang apa itu wireframe, berikut ini adalah beberapa contoh wireframe yang dapat dilihat dan dicermati,
Contoh wireframe YouTube (Sumber: visual-paradigm.com)
Contoh wireframe untuk tampilan aplikasi (Sumber: xd.adobe.com)
Contoh wireframe untuk media sosial dengan tampilan mobile dan desktop (Sumber: careerfoundry.com)
Baca juga: Pitch deck: Tujuan, elemen, cara pembuatan, dan 3 contohnya
Itulah beberapa informasi yang harus kamu ketahui tentang wireframe dalam UX design. Meski terkesan mendasar, namun dengan wireframe kamu bisa merancang desain website dengan lebih efektif ke depannya.
Jika kamu ingin memulai karier di bidang user experience design (UX Design) maupun pengembangan aplikasi perangkat lunak, maka EKRUT mungkin bisa jadi salah satu jalanmu. Berbagai perusahaan dapat menemukanmu di EKRUT saat kamu mendaftar dan memasukkan portofoliomu di sana. Silakan klik tautan di bawah ini untuk memulai kariermu lewat EKRUT.
Last update: 22 October 2021
Sumber:
- careerfoundry.com
- indeed.com
- prototypr.io
- https://medium.com/@Vincentxia77/wireframe-vs-mockup-vs-prototype-selection-of-prototyping-tools-febf826cdd98
- https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/
- https://www.indeed.com/career-advice/career-development/wireframes
.jpg)
