Apa itu Wireframe?
Wireframe merupakan komponen penting dari proses desain UX.
Melansir dari experienceux.co.uk, wireframe adalah kerangka dasar sebuah website atau app yang menggambarkan isi dan fungsionalitasnya.
Wireframe biasanya digunakan di tahap awal web development untuk membangun struktur dasar sebelum suatu desain visual dan konten ditambahkan.
Kenapa Harus Membuat Wireframe?
Wireframe penting untuk dibuat sebelum melangkah ke tahap pengembangan web atau app lebih lanjut dengan alasan sebagai berikut:
- Wireframe merupakan kerangka visual untuk website atau aplikasi sehingga desainer dan developer dapat merencanakan dan mengatur tata letak, konten, dan fungsionalitas web atau app.
- Wireframe bermanfaat bagi desainer dan developer untuk mengkomunikasikan ide dan konsep mereka dengan jelas dan efektif kepada stakeholder lain, misalnya klien.
- Wireframe membantu mengidentifikasi dan menyelesaikan masalah sebelum beralih ke desain dan pengembangan yang lebih detail.
- Wireframe biasanya lebih cepat dan lebih murah untuk dibuat dibandingkan dengan versi lengkap suatu desain, sehingga bisa hemat biaya untuk mengevaluasi dan menyempurnakan ide dan konsep di awal proses desain.
Elemen Wireframe
Mengutip dari designlab.com, di bawah ini adalah elemen yang umum didapati pada wireframe:
- Placeholder text: merupakan kotak teks sementara yang menunjukkan tempat konten akan dibuat.
- Search bar: merupakan elemen yang memungkinkan pengguna mencari konten tertentu.
- Logo: merupakan elemen visual yang mewakili merek atau perusahaan.
- Social sharing button: merupakan tombol yang memungkinkan pengguna untuk berbagi konten di media sosial.
- Header dan footer: merupakan bagian atas dan bawah halaman yang konsisten, yang berisi suatu informasi.
- Navigation menu: merupakan elemen yang bermanfaat bagi pengguna supaya dapat menjelajahi situs web atau aplikasi.
- Informasi kontak: merupakan alamat, nomor telepon, alamat e-mail, atau detail kontak lain terkait perusahaan.
Tipe-tipe Wireframe
Berdasarkan uxdesigninstitute.com, terdapat tiga jenis wireframe, yaitu:
#1 Low-fidelity wireframe
Low-fidelity wireframe adalah jenis paling dasar dan sering kali dibuat dengan pena dan kertas atau alat digital yang sederhana. Kerangka ini menggunakan bentuk dan placeholder sederhana untuk merepresentasikan suatu konten dan fungsionalitasnya dengan detail minimal dan tanpa warna atau elemen desain. Hal ini membuat low-fidelity wireframe cepat dibuat.
#2 Mid-fidelity wireframe
Wireframe ini memiliki lebih banyak detail, dan seringnya dibuat menggunakan software khusus. Dalam mid-fidelity wireframe terdapat bentuk, warna, dan tipografi yang lebih realistis untuk memberikan gambaran yang lebih jelas tentang tata letak dan fungsionalitas website atau aplikasi.
Mid-fidelity wireframe lebih memakan waktu untuk diproduksi daripada low-fidelity wireframe, tetapi memberikan representasi desain akhir yang lebih akurat.
#3 High-fidelity wireframe
High-fidelity wireframe merupakan tipe yang paling detail dan realistis karena menyertakan elemen desain seperti gambar, warna, dan tipografi. Kerangka ini umumnya dibuat menggunakan software desain.
High-fidelity wireframe memberikan representasi mendekati hasil final suatu website atau aplikasi sehingga desainer dan stakeholder lain dapat memperkirakan bagaimana tampilan desain akhirnya. Karena kompleksitasnya, wireframe ini memakan waktu untuk diproduksi, dan biasanya digunakan di tahap lanjut dalam proses desain.
Contoh Wireframe
Di bawah ini adalah contoh wireframe dengan elemen-elemennya yang dibuat menggunakan suatu software. Wireframe ini menyediakan representasi visual sederhana dari tata letak dan fungsionalitasnya sebelum beralih ke tahap desain dan pengembangan yang lebih mendetail.
Penutup
Wireframe merupakan bagian penting dari proses desain website atau app karena dengan alat ini, desainer dapat membuat sketsa ide dan konsep suatu website atau app dengan cepat dan mudah.
Wireframe juga memfasilitasi komunikasi yang efektif antara desainer, developer, dan stakeholder lain. Melalui wireframe, mereka dapat membuat perubahan yang diperlukan sebelum beralih ke tahap desain dan pengembangan yang lebih detail.
FAQ (Frequently Asked Question)
Apa contoh tools untuk membuat wireframe?
Berdasarkan Zapier.com, berikut ini adalah tools terbaik untuk membuat wireframe:
- Sketch: software desain populer yang menyertakan template wireframe dan alat untuk membuat berbagai tipe wireframe.
- Figma: software desain berbasis cloud yang memungkinkan desainer membuat wireframe secara kolaboratif. Software ini juga memiliki berbagai template desain wireframe siap pakai maupun komponen UI lainnya.
- Adobe XD: software yang juga menyertakan fitur pembuatan wireframe serta template wireframe. Selain itu, Adobe XD juga dapat diintegrasikan dengan software Adobe lainnya seperti Photoshop atau Illustrator.
- UXPin: software dengan fitur untuk membuat wireframe, yang juga dapat diintegrasikan dengan dengan tools desain lainnya.
- Mockflow: software khusus untuk membuat wireframe dengan template siap pakai dan export desain yang dapat dilakukan dengan mudah.
- Justinmind: software untuk wireframing dengan fitur untuk membuat desain yang kompleks seperti logika kondisional dan konten dinamis, serta tools kolaborasi untuk berbagi desain.
