5- Wireframe

5 - Wireframe

Author: Muhammad Fauzan Arrafi

Apasih Wireframe?

Bagi seorang designer interface aplikasi atau seorang UIUX designer, wireframe adalah salah satu hal yang paling wajib untuk di ketahui, tapi apa sih wireframe???

Singkatnya, Wireframe itu kerangka dari sebuah halaman web atau aplikasi. wireframe ini membantu kita melihat dengan jelas struktur halaman, tata letak, arsitektur informasi, alur pengguna, fungsionalitas, dan perilaku yang diinginkan. Biasanya, untuk desain, warna, grafik, dan elemen lainnya dijaga seminimal mungkin biar fokus pada fungsinya.

Wireframe bisa digambar atau dibuat secara digital, tergantung seberapa detail yang dibutuhkan. Semakin kompleks proyeknya, semakin penting untuk merencanakan dengan matang.

Proses wireframing ini paling sering dipakai oleh desainer UX. Ini adalah cara yang bagus supaya semua pihak yang terlibat bisa sepakat tentang di mana informasi akan diletakkan sebelum para developer mulai ngebangun antarmuka. Dengan begitu, semua orang bisa lebih paham dan terhindar dari kebingungan dan mengurangi salah paham saat develop aplikasi.

Kenapa Wireframing Penting?

Fungsi dari wireframe sendiri cukup jelas dari sekilas mata, tapi apakah wireframe sepenting itu?? YES, mungkin jika skala project yang kita kerjakan hanya sebatas personal project, kita bisa skip proses wireframing karena tidak ada tim atau client yang di libatkan dan kita dapat bebas mengubah setiap elemen design di dalam personal project kita, akan tetapi, seorang UIUX yang profesional selalu mengikuti tahapan-tahapan sesuai best practice yang ada. Berikut adalah beberapa point dari pentingnya membuat wireframe.

Visualisasi Ide: Bayangkan kamu punya ide keren untuk sebuah aplikasi. Dengan wireframe, kamu bisa menggambarkan ide itu secara visual. Ini bikin semua orang di tim bisa paham dan berbagi visi yang sama. Jadi, enggak ada lagi yang salah paham!
Efisiensi Waktu dan Biaya: Siapa sih yang mau menghabiskan waktu dan uang untuk perbaikan besar-besaran di tengah jalan? Dengan wireframe, kita bisa mendeteksi masalah sejak dini. Ini membantu kita menghindari perubahan yang bisa bikin proyek jadi molor dan anggaran membengkak.
Kolaborasi yang Lebih Baik: Wireframing bikin komunikasi jadi lebih lancar antara desainer, pengembang, dan semua pihak yang terlibat. Semua bisa memberikan masukan dan sepakat tentang tata letak sebelum coding dimulai. Jadi, semua tim punya suara!
Fokus pada Pengalaman Pengguna: Kita semua tahu betapa pentingnya pengalaman pengguna, kan? Dengan wireframe, kita bisa memastikan bahwa alur pengguna dan interaksi sudah diperhitungkan. Ini membantu kita menciptakan produk yang lebih ramah pengguna.
Pengujian Awal: Wireframe juga memungkinkan kita melakukan pengujian awal dengan pengguna. Gimana caranya? Kita bisa mendapatkan umpan balik dari mereka tentang desain yang kita buat. Ini membantu kita memahami apakah desain sudah sesuai dengan yang mereka butuhkan.

Jadi, dengan semua keuntungan ini, wireframing benar-benar jadi langkah yang enggak bisa dilewatkan. Ini membantu kita memastikan produk akhir lebih efektif, sesuai harapan, dan tentunya, memuaskan pengguna!

Perbandingan Jenis Wireframe

Wireframe tidak hanya memiliki satu jenis saja, ada banyak jenis yang dapat di tentukan oleh seorang UIUX designer dalam pembuatan wireframe, tentu saja semuanya tergantung pada keperluan dan manfaat dari jenis wireframe yang di buat, masing-masing jeins wireframe memiliki kelebihan dan kekurangan masing-masing, bahkan tidak jarang seorang UIUX designer membuat lebih dari 1 jenis wireframe di sebuah project, dalam jenis wireframe ada 3 jenis yang paling penting untuk di ketahui, yaitu:

Low-Fidelity Wireframe: Cocok untuk tahap awal ketika ide masih dalam proses pengembangan. Biasanya dibuat dengan tangan atau alat sederhana, ini membantu tim untuk cepat beradaptasi dengan perubahan tanpa banyak beban.
Mid-Fidelity Wireframe: Sangat berguna untuk mendiskusikan fungsionalitas dan tata letak yang lebih konkret. Ini mulai menarik perhatian pada interaksi pengguna dan membantu dalam menentukan elemen yang paling penting.
High-Fidelity Wireframe: Penting saat presentasi kepada klien atau saat ingin melakukan pengujian pengguna. Biasanya ini adalah langkah terakhir sebelum masuk ke tahap pengembangan, memberikan gambaran yang sangat jelas tentang produk akhir.

Dengan memahami perbedaan ini, kamu bisa memilih jenis wireframe yang tepat sesuai dengan kebutuhan proyekmu, memastikan proses desain berjalan lebih lancar!

Berikut adalah tabel perbandingan yang lebih mendetail antara low-fidelity, mid-fidelity, dan high-fidelity wireframe:

Jenis Wireframe	Deskripsi	Kelebihan	Kekurangan	Elemen yang Ada
Low-Fidelity	Sketsa sederhana, fokus pada struktur dan layout.	- Cepat dibuat- Ideal untuk brainstorming- Fleksibel untuk perubahan	- Kurang detail- Sulit untuk mendapatkan umpan balik yang spesifik	- Garis besar layout- Blok teks- Placeholder gambar- Navigasi dasar
Mid-Fidelity	Menambahkan elemen teks dan navigasi, lebih detail.	- Memberi gambaran yang lebih jelas tentang fungsionalitas- Mendorong diskusi yang lebih produktif	- Masih kurang detail visual- Bisa membuat orang bingung tentang tampilan akhir	- Teks yang lebih lengkap- Elemen navigasi yang lebih jelas- Blok gambar- Interaksi dasar
High-Fidelity	Hampir identik dengan desain akhir, mencakup semua elemen.	- Memberikan presentasi yang realistis kepada klien- Memudahkan pengujian pengguna	- Memakan waktu dan sumber daya lebih banyak untuk dibuat- Kurang fleksibel untuk perubahan mendadak	- Desain visual lengkap- Warna dan font yang sesuai- Gambar dan ikon yang relevan- Interaksi yang lebih kompleks

> [!NOTE] > Funfact: Sebelum adanya tools digital untuk membuat wireframe, UIUX designer menggunakan kertas sebagai sarana pembuatan wireframe, kertas tersebut di gambar dan di buat menyerupai device target dari design.

Ngomong-nomong tentang pembuatan wireframe, ada banyak tools yang tersedia untuk pembuatan wireframe, di modul ini kita akan mengunakan figma untuk pembuatan wireframe, tapi aku akan kasih tau beberapa tools alternatif yang bisa di pakai untuk membuat wireframe.

Berbagai Tools Pembuatan Wireframe

Saat ini, ada banyak tools yang bisa membantu kamu dalam membuat wireframe. Berikut adalah beberapa yang populer dan sering digunakan oleh desainer:

Balsamiq Mockups
- Deskripsi: Tool ini menawarkan antarmuka yang user-friendly dan desain sketsa tangan, sehingga wireframe terlihat lebih kasual.
- Kelebihan: Sangat cepat untuk membuat wireframe dan mudah digunakan, cocok untuk low-fidelity wireframes.
Axure RP
- Deskripsi: Tool ini lebih canggih, memungkinkan pembuatan wireframe interaktif dan prototipe fungsional.
- Kelebihan: Memfasilitasi pengujian usability dan kolaborasi tim, ideal untuk mid-fidelity dan high-fidelity wireframes.
Figma
- Deskripsi: Sebuah platform desain kolaboratif berbasis web yang memungkinkan tim untuk bekerja secara real-time.
- Kelebihan: Mendukung pembuatan wireframe, prototyping, dan desain UI dalam satu tempat, sangat fleksibel untuk berbagai jenis wireframe.
Sketch
- Deskripsi: Tool desain populer di kalangan desainer UX/UI yang memungkinkan pembuatan wireframe dan desain visual.
- Kelebihan: Memiliki banyak plugin dan komunitas yang aktif, cocok untuk high-fidelity wireframes.
Adobe XD
- Deskripsi: Bagian dari suite Adobe, ini memungkinkan pembuatan wireframe dan prototipe interaktif dengan mudah.
- Kelebihan: Integrasi yang baik dengan alat Adobe lainnya, mendukung kolaborasi tim dalam real-time.
Wireframe.cc
- Deskripsi: Tool sederhana yang memungkinkan pembuatan wireframe dengan cepat tanpa banyak gangguan.
- Kelebihan: Antarmuka minimalis yang memudahkan fokus pada desain tanpa distraksi.
Mockplus
- Deskripsi: Platform desain yang memungkinkan pembuatan wireframe dan prototipe dengan drag-and-drop.
- Kelebihan: Mudah digunakan dan cocok untuk berbagai jenis wireframing, dari yang sederhana hingga kompleks.

Dengan berbagai tools ini, kamu bisa memilih yang paling sesuai dengan kebutuhan dan gaya kerjamu. Masing-masing memiliki kelebihan dan kekurangan, jadi coba eksplorasi beberapa untuk menemukan yang paling cocok.

Wireframing di Figma

Modul berikutnya akan membahas tentang wireframing di figma, kita akan mulai dari pembuatan wireframe sederhana dengan jenis lo-fi dan akan berakhir di pembuatan prototype di figma, checkout modul berikutnya Lofi Wireframe