Apakah Anda pernah mendengar tentang pemodelan wireframe? Ini adalah teknik yang digunakan oleh seniman dan insinyur untuk membuat presentasi visual dari objek fisik atau tiga dimensi. Menggunakan garis dan kurva sederhana, model wireframe digunakan sebagai kerangka untuk membangun dan merakit objek dengan format 3D.
Dalam dunia perangkat lunak dan desain web, definisi wireframe juga hampir serupa. Gambar rangka atau wireframe adalah diagram atau sekumpulan diagram yang terdiri dari garis dan bentuk sederhana yang mewakili kerangka situs web atau antarmuka pengguna atau user interface (UI) aplikasi dan fungsi inti.
Wireframing sendiri merupakan langkah penting dalam proses desain layar apa pun, terutama memungkinkan Anda untuk menentukan hirarki informasi desain Anda, membuatnya lebih mudah bagi Anda untuk merencanakan tata letak sesuai dengan cara Anda ingin pengguna memproses informasi. Jika Anda belum pernah menggunakan wireframing, ketahui tentang tentang apa itu wireframe UX, seperti apa bentuknya, dan bagaimana mereka dapat bermanfaat bagi tim Anda.
Daftar Isi
Pengertian Apa Itu Wireframe
Wireframing adalah praktik atau teknik yang digunakan oleh desainer UX yang memungkinkan mereka untuk menentukan dan merencanakan hierarki informasi desain mereka untuk situs web, aplikasi, atau produk. Proses ini berfokus pada bagaimana desainer atau klien menginginkan pengguna untuk memproses informasi di situs, berdasarkan penelitian pengguna yang telah dilakukan oleh tim desain UX.
Saat mendesain layar, Anda perlu mengetahui ke mana semua informasi akan dituju dalam diagram hitam putih sebelum membuat dan melanjutkan apa pun dengan kode. Wireframing juga merupakan cara yang bagus untuk mengetahui bagaimana pengguna berinteraksi dengan antarmuka desain produk Anda, melalui pemosisian tombol dan menu pada diagram.
Tanpa gangguan warna, pilihan jenis huruf atau teks, wireframing memungkinkan Anda merencanakan tata letak dan interaksi antarmuka Anda. Argumen yang umum digunakan untuk wireframing adalah jika pengguna tidak tahu ke mana harus pergi pada diagram yang digambar tangan dari halaman situs Anda, maka tidak relevan warna atau teks mewah apa yang akhirnya akan digunakan. Tombol atau ajakan bertindak harus jelas bagi pengguna meskipun tidak berwarna cerah dan berkedip sehingga akan mudah ditemukan nantinya.
Baca Juga : Profesi Web Developer : Job Deskripsi, Tugas, Kualifikasi, dan Tanggung Jawabnya
Manfaat dari Wireframe
Penggunaan wireframe bukan tanpa sebab, tentunya ada kelebihan yang ditawarkan dari sebuah wireframe. Jika dibandingkan dengan pembuatan prototipe atau segala jenis desain layar mendetail, wireframe memiliki keunggulan dan manfaat sebagai berikut :
-
Mudah digambar
Wireframe memiliki tata letak yang sederhana dan bersih yang dibentuk oleh elemen layar sederhana tanpa gaya dan format yang detail.
-
Mudah dimengerti
Wireframe disambut baik oleh banyak tim pengemban dan pebisnis karena penggunaannya sangat sederhana sehingga setiap orang dapat memahaminya tanpa harus belajar terlebih dahulu.
-
Mudah dimodifikasi
Anda tidak akan memerlukan pemrograman apa pun untuk memvisualisasikan ide dan desain baru Anda sehingga membuatnya lebih praktis dan cepat.
-
Tidak diperlukan pengkodean
Tidak perlu pembuatan prototipe yang berat dan tanpa pengkodean. Anda hanya perlu menggambar wireframe seolah-olah Anda menggunakan alat gambar biasa saja.
-
Anotasi sebaris
Anotasi ide desain di tempat dengan bantuan bentuk anotasi yang mana notasi ini juga dapat ditampilkan dalam spesifikasi persyaratan.
Baca Juga : Mengenal Apa itu React Native : Developer dan Pengembangan Aplikasi & Website
Contoh dari Wireframe
Sebelum Anda mulai mendesain gambar rangka dari aplikasi atau produk Anda sendiri, Anda dapat melihat dari beberapa contoh gambar wireframe yang sudah ada. Ini akan memberi Anda beberapa inspirasi untuk wireframe Anda sendiri, serta memberi Anda gambaran tentang berbagai cara untuk membuatnya. Sedangkan ada beberapa teknik dalam merancang dan menggambar wireframe mulai dari menggambarnya dengan tangan atau dengan menggunakan perangkat pendukung seperti Balsamiq, UXPin atau InVision.
Semua itu tergantung dari pilihan maupun kreatifitas Anda sendiri. Karena itu untuk para pemula, perhatikan contoh dan hal-hal berikut saat memutuskan proses pembuatan wireframe Anda :
- Bingkai gambar yang digambar dengan kertas dan pensil, atau di papan tulis, memiliki keuntungan karena terlihat dan sangat mudah diubah, yang dapat sangat membantu dalam percakapan awal tentang situs web atau produk Anda.
- Dengan bantuan prototipe kertas, Anda dapat menguji dengan pengguna akhir di setiap tahap ide dan desain. Perubahan pada tahap ini jauh lebih mudah dan karena itu lebih murah daripada perubahan yang dianggap perlu setelah pengkodean dilakukan.
- Setelah nanti beralih ke perangkat lunak yang sebelum awalnya menggambar wireframe Anda, akan memungkinkan Anda untuk melacak keputusan yang lebih rinci.
Mungkin akan menguntungkan Anda untuk mulai menggambar wireframe dengan tangan sebelum menjalankan versi yang lebih mendetail menggunakan aplikasi atau perangkat lunak online. Dari sini Anda akan melihat posisi atau desain terbagus dan bagaimana semua informasi dan desain dapat diatur di layar nantinya.
Baca Juga : Profesi Developer : Job Deskripsi, Tugas, Kualifikasi, dan Tanggung Jawabnya
Cara Membuat Wireframe
Gambar rangka atau wireframe adalah sketsa dari sistem yang akan dibangun yang dibuat dengan sederhana, jelas, dan memungkinkan semua orang untuk membaca dan memahami dengan mudah. Berikut ini cara cepat membuat sebuah wireframe :
-
Buat riset
Desain UX adalah adalah sebuah proses dan wireframe adalah komponen terkecilnya. Maka sebelum Anda mulai merancang sketsa, buat dan sempurnakan riset Anda seperti memahami audiens/pengguna, merinci persyaratan, membuat persona pengguna dan menentukan kasus penggunaan, dan melengkapinya dengan penelitian pesaing dan industri lebih lanjut. Ini berarti Anda harus melakukan analisis lini produk serupa dengan milik Anda, menggali tren UX yang berlaku dan praktik terbaik, dan, tentu saja, meninjau pedoman desain internal Anda sendiri. Apabila Anda merancang fitur baru, maka telitilah lebih dalam lagi terutama jika fitur tersebut belum umum digunakan.
-
Proses perancangan
Desain adalah proses organik dan dengan demikian desainer yang berbeda akan membuat wireframing berbeda dan terjemahannya ke visual atau kode dengan cara yang berbeda pula. Anda harus dapat menemukan proses yang menghasilkan ciri khas desain paling ternyaman Anda sendiri karena semua desainer dan pengembang pasti mempunyai caranya masing- masing.
-
Memilih tool atau aplikasi untuk wireframe
Sama seperti para desainer yang berbeda, begitu juga aplikasi, tools atau software yang bisa Anda pilih ada berbagai macam pula mengikuti kenyamanan Anda dalam menggunakannya. Berikut beberapa tool yang bisa Anda pergunakan:
a) Axure
Axure adalah salah satu alat wireframing / prototyping kelas profesional pertama yang sudah cukup populer. Sampai saat ini, Axure hanya tersedia di Windows meskipun begitu, alat ini dikenal sebagai alat yang banyak digunakan di kalangan profesional industri.
b) Mockplus
Mockplus adalah platform desain produk all-in-one untuk zaman modern yang menawarkan alat untuk prototyping (RP), kolaborasi (iDoc), dan sistem desain (DS). Anda dapat memanfaatkan versi premium maupun berbayar sesuai dengan kebutuhan Anda.
d) Figma
Figma telah memimpin dalam dunia lanskap alat desain dalam beberapa tahun terakhir. Dibuat dengan memikirkan desainer web dan UI, Figma sangat cocok untuk wireframing karena berbasis browser sangat ideal untuk berkolaborasi.
-
Penambahan detail dan pengujian
Langkah selanjutnya adalah menambahkan beberapa detail informasi untuk mempersiapkan wireframe Anda untuk peningkatannya dari hanya gambaran saja ke mode prototipe. Disini Anda bisa menambahkan detail bagi setiap desain, karena wireframe Anda adalah kerangka situs Anda maka di samping menambahkan detail yang penting, lakukan pengujian juga.
Baca Juga : Profesi Android Developer : Job Deskripsi, Tugas, Kualifikasi, dan Tanggung Jawabnya
Kesimpulan dan Penutup
Umumnya desainer UX yang berbeda pasti mempunyai cara dan pendekatan wireframe yang berbeda- beda pula. Ada yang memulainya dengan sketsa tangan diatas kertas, ada pula yang menggunakan aplikasi atau alat yang sedikit lebih cenderung teknis. Keputusan untuk membuat wireframe dengan tangan atau di komputer, dan proses yang digunakan untuk berpindah dari sketsa dan wireframe ke kode, lebih terkait dengan pendekatan apa yang dibutuhkan situasi tertentu daripada preferensi dari sang perancang.
Meski wireframe adalah alat yang sangat berguna untuk desainer UX karena berfungsi sebagai blueprint, ternyata semua orang yang terlibat dalam proses pengembangan juga bisa mendapatkan keuntungan dari penggunaan wireframe tadi. Dengan begini, desainer UX dapat melihat bahwa rancangan mereka telah tepat sehingga proses selanjutnya bisa segera dilaksanakan.
