Bentuk dan Fungsi – Panduan untuk Alat Wireframe Teratas

Pada 1487, Leonardo da Vinci menggambar skema yang disebut "kendaraan tempur", yang dirancang saat ia berada di bawah perlindungan Ludovico Sforza, Adipati Milan. Meskipun mesin itu sengaja dirancang untuk tidak berfungsi dengan baik, sekelompok insinyur menciptakannya kembali pada tahun 2010. Skema Da Vinci adalah salah satu contoh paling awal dari wireframe dasar.

Istilah wireframe telah digunakan selama beberapa dekade, jauh sebelum diadopsi oleh dunia desain web. Wireframes awalnya digunakan dalam perangkat lunak Computer Aided Design (CAD) untuk menggambarkan desain objek tanpa perlu detail. Hasilnya adalah cetak biru yang tampak seperti terbuat dari kabel, ergo, kami berakhir dengan gambar rangka.

Tapi apa itu wireframe dalam desain, dan apa tujuan memilikinya?

Wireframe dalam desain digital adalah panduan visual atau skema halaman yang dilucuti dari gaya tipografi, warna, grafik, dan elemen interaktif, dan mewakili titik tertentu dalam proses desain. Tujuannya adalah untuk menunjukkan ide tata letak tingkat halaman yang menggambarkan fungsionalitas, perilaku, dan prioritas konten.

Desainer menggunakan gambar rangka untuk menghubungkan struktur konseptual yang mendasarinya dengan desain visual situs atau layar aplikasi. Ada tiga jenis wireframe yang berbeda:

• Fidelitas rendah - gambar tahap awal tanpa banyak detail. Gambar rangka dengan ketelitian rendah sering kali berupa sketsa yang digambar tangan, atau garis dan bentuk yang mewakili sebuah ide.
• Mid-fidelity - gambar rangka yang mulai menampilkan lebih banyak detail komponen, dan difokuskan pada tata letak konten dan struktur halaman secara keseluruhan.
• High-fidelity - gambar tahap selanjutnya (pasca iteratif) yang menggambarkan lebih detail dan rendering tingkat komponen yang lebih tinggi, dengan karakteristik perilaku dan fokus pada tata letak konten.

Evolusi wireframes dalam desain digital adalah artefak UX dan hasil lainnya: wireflow. Wireflows adalah kombinasi dari wireframes dan diagram alur, dua artefak yang desainer UX telah perlahan-lahan bergabung menjadi satu untuk tujuan lain: untuk menggambarkan dan mengikuti interaksi yang mewakili alur tugas dalam produk seperti aplikasi web.

Masalah yang dihadapi desainer dengan gambar rangka adalah mengomunikasikan perjalanan pengguna. Meskipun ada cara yang lebih kompleks untuk menunjukkan perjalanan pengguna, ada kecenderungan untuk menyertakannya dalam kesederhanaan wireframe. Alat yang berguna untuk itu adalah peta gambar rangka.

Peta gambar rangka menggabungkan gambar rangka dengan perjalanan pengguna (atau alur pengguna) untuk menunjukkan perjalanan pengguna melalui produk menggunakan gambar rangka.

Alat Wireframing Teratas

Desainer memiliki banyak pilihan saat memutuskan alat wireframing mana yang akan digunakan. Alat-alat baru terus memasuki pasar sehingga sulit untuk mengikutinya. Berikut adalah beberapa karakteristik alat wireframing hebat yang harus dicari:

• Kemampuan untuk menghasilkan berbagai kesetiaan (rendah ke tinggi)
• Perangkat lunak stabil yang mudah digunakan dan sering diperbarui
• Templat bawaan, simbol, dan komponen UI standar dengan kemampuan tambahan

Beberapa alat dalam panduan ini lebih fokus pada wireframing, sementara yang lain mencoba untuk menyeimbangkan antara wireframing dan prototyping, dan fungsionalitas mockup. Memilih untuk menggunakan satu alat di atas yang lain (atau beberapa bersama-sama) bermuara pada preferensi desainer.

Balsamiq

Balsamiq adalah alat wireframing dengan ketelitian rendah dan mudah digunakan yang disukai karena kemudahan penggunaan dan tampilan "gambar tangan" yang ikonik. Muncul dengan satu set templat yang dibuat sebelumnya yang dapat digunakan dengan cepat dan mudah dengan editor drag-and-drop. Desainer dapat menambahkan aset mereka sendiri dan menyesuaikan tata letak.

Pembuatan prototipe dasar dapat dicapai dengan menautkan maket untuk membuat pengalaman klik-tayang sederhana untuk pengujian kegunaan saat menampilkan proyek dalam mode Presentasi Layar Penuh atau sebagai PDF yang diekspor.

Balsamiq ditawarkan sebagai versi desktop (Windows dan Mac), layanan cloud, atau sebagai plug-in untuk Google Drive, Confluence, dan JIRA.

Moqups

Moqups adalah alat kolaborasi kreatif lainnya yang berfokus pada wireframing tetapi juga dapat digunakan untuk pembuatan prototipe. Tidak seperti Balsamiq, ini murni berbasis web dan dimaksudkan untuk membuat gambar rangka untuk aplikasi web dan seluler.

Perbedaan utama antara Moqups dan Balsamiq adalah kesetiaan gambar rangka. Sementara Balsamiq menghasilkan tampilan "gambar tangan", Moqups menyediakan stensil dan kit penuh warna untuk aplikasi seluler dan desain web termasuk iOS, Android, dan Bootstrap.

Moqups membedakan dari Balsamiq dalam beberapa cara lain. Perangkat lunak ini memungkinkan pengeditan objek terbatas dan manajemen halaman, memberi desainer kemampuan untuk mendefinisikan objek "master", yang dapat menghemat banyak waktu saat membuat perubahan pada gambar rangka selama proses iterasi.

Misalnya, seorang desainer membuat objek tombol master dengan ukuran, bentuk, dan warna tertentu. Tombol ini digunakan beberapa kali di seluruh wireframe. Kemudian, dalam proses iterasi, jika desainer perlu mengubah warna tombol, alih-alih mengubah setiap objek tombol, mereka dapat mengubahnya sekali, dan semua objek tombol anak akan segera terpengaruh.

Pidoco

Pidoco adalah alat wireframing teratas yang berfokus pada kiriman dengan ketelitian rendah dengan beberapa interaktivitas dasar. Juga berbasis cloud, ia menggunakan komponen yang dapat digunakan kembali dan membedakan dari Balsamiq dan Moqups dengan pengalaman wireframe klik-tayang yang lebih kuat.

Pidoco berguna untuk aplikasi seluler dan desain web karena memiliki tampilan seluler bawaan sehingga desainer dapat melihat bagaimana halaman aplikasi mereka akan terlihat pada berbagai ukuran layar. Fitur bawaan lainnya adalah fungsi ekspor dan spesifikasi . Ini membantu desainer berpindah dari wireframe ke prototipe/mockup tanpa memerlukan plug-in atau ekstensi.

Picoco terlihat dan terasa rendah kesetiaan tetapi mencakup beberapa fitur yang biasanya ditemukan di alat desain yang lebih kompleks. Ini bekerja dengan baik untuk desainer yang melakukan lean UX dan perlu beralih dengan cepat dengan siklus umpan balik yang lebih pendek.

Gliffy

Gliffy adalah alat wireframing mid-fidelity dengan beberapa fitur unik yang membedakannya dari Balsamiq dan Mockup. Salah satu fitur unik adalah kemampuan untuk membuat wireflow. Gliffy memiliki kemampuan bagan alur dan diagram bawaan dengan stensil yang disertakan, peta pikiran, dan pemodelan proses bisnis.

Seperti alat wireframing lainnya, Gliffy menyediakan perpustakaan bentuk, ikon, dan kemampuan untuk berbagi gambar rangka secara native ke Atlassian's Confluence, Slack, Basecamp, Trello, dan WordPress.

Ini adalah alat desain gambar rangka UX yang relatif baru, namun alat ini menawarkan basis pelanggan besar dari desainer profesional yang mencari integrasi dan kemampuan sederhana di luar gambar rangka statis.

Gambar rangka.cc

Wireframe.cc adalah alat wireframing dasar seperti Balsamiq. Ini memiliki antarmuka yang bersih tanpa banyak bilah alat dan ikon yang mengganggu. Tidak seperti banyak alat lain, ini memungkinkan Anda untuk "membuat sketsa" gambar rangka dengan mouse.

Wireframe.cc menyediakan perpustakaan stensil, dan penanganan objek yang bersih dan tidak rumit. Elemen bermanfaat yang ditawarkan Wireframe.cc saat bekerja dengan lean UX, adalah URL untuk setiap halaman wireframe sehingga dapat dibagikan untuk umpan balik dengan cepat dan mudah.

Tidak ada prototyping atau interaktivitas built-in karena difokuskan murni pada wireframing kesetiaan rendah.

Aneh

Disebut "Google Documents" untuk gambar rangka, Whimsical meniru alat diagram seperti OmniGraffle dan Visio. Itu tidak fokus pada prototyping/mockup, karena fokus utamanya adalah pada wireframing dan diagram alur, menjadikannya kandidat yang bagus untuk memproduksi wireflow.

Seperti Gliffy, Whimsical adalah alat wireframing mid-fidelity dan mencakup perpustakaan besar elemen yang dapat dikonfigurasi (tombol, input, kotak centang, dll.).

Kolaborasi tanpa batas pada dokumen gambar rangka yang sama pada saat yang sama adalah fitur bawaan yang hebat untuk tim desain jarak jauh.

Adobe XD

Adobe XD baru-baru ini menarik perhatian para desainer karena antarmukanya yang sederhana, ikatan yang erat dengan produk Adobe lainnya, kemudahan penggunaan, dan fungsionalitas bawaan yang mengurangi kebutuhan untuk mengandalkan plugin dan ekstensi.

Ada dua cara untuk membangun gambar rangka di Adobe XD. Mereka dapat dibangun menggunakan garis dan bentuk untuk membuat objek dan elemen, atau mereka dapat dibangun menggunakan kit UI premade dari sumber seperti behance.net dan sumber daya XD.

Salah satu fitur Adobe XD yang menghemat waktu adalah kemampuan untuk membuat komponen "master" (disebut Simbol dalam Sketsa), yang berguna saat membuat perubahan karena semua komponen yang dibuat dari master akan mewarisi perubahan apa pun.

Keuntungan lain menggunakan XD sebagai alat wireframing adalah kemampuan untuk beralih ke mode prototyping dengan mengklik mouse. Mode prototipe dibangun ke dalam XD dan bekerja di latar belakang sehingga desainer tidak membuang waktu saat berpindah dari gambar rangka ke prototipe.

Sketsa

Sketch, alat desain populer untuk desainer UX/UI, menyediakan platform untuk pengeditan vektor, pembuatan prototipe, dan kolaborasi, serta memiliki perpustakaan ratusan plugin yang memperluas fungsinya.

Wireframing di Sketch sangat mirip dengan Adobe XD dengan penggunaan kit/templat dan alat menggambarnya. Sketch menggunakan Simbol secara ekstensif yang merupakan komponen yang dapat digunakan kembali yang dapat didefinisikan sekali dan digunakan beberapa kali (tombol, dll.). Simbol Instansiasi juga mengambil setiap perubahan yang dibuat pada Simbol "master". Ini menguntungkan bagi desainer karena sering kali ada banyak perubahan yang perlu dilakukan selama proses wireframing.

Sketch memungkinkan desainer untuk membuat gambar rangka, prototipe, dan maket dengan ketelitian tinggi. Ini bukan aplikasi berbasis cloud, dan salah satu potensi kerugiannya adalah aplikasi ini hanya berfungsi dengan macOS.

UXPin

UXPin adalah alat gambar rangka teratas yang mendukung status interaktif, logika, dan komponen terprogram yang memberi desainer kemampuan untuk mengkodekan interaksi, variabel, dan ekspresi bersyarat.

UXPin jauh melampaui wireframing, dengan fokus utama pada pembuatan prototipe dengan pustaka komponen UI, simbol, alat menggambar vektor, dan pengeditan bersama.

Ada versi Windows, macOS, dan cloud/browser. Untuk wireframing fidelitas tinggi, UXPin bekerja seperti Sketch dan Adobe XD. Ini bukan drag-and-drop seperti Balsamiq, tetapi membutuhkan prototyping dan mockup ke tingkat berikutnya untuk desainer yang ingin tetap berada dalam satu ekosistem.

Keajaiban

Marvel, alat desain populer lainnya yang memfasilitasi wireframing dan prototyping, memberi desainer antarmuka drag-and-drop yang familier untuk membuat wireframes dengan fidelitas rendah hingga tinggi.

Marvel tidak memerlukan add-on atau ekstensi apa pun karena semua aset disertakan. Platform ini sepenuhnya berbasis cloud yang membuat berbagi gambar rangka dengan anggota tim desain atau klien lain menjadi cepat dan mudah.

Salah satu alasan desainer memilih Marvel untuk wireframing adalah integrasinya dengan platform lain seperti Jira, Sketch, Confluence, Dropbox, Slack, dan banyak lainnya. Untuk kolaborasi dengan pengembang, tim desain jarak jauh, dan klien, fitur ini menghemat banyak waktu desainer.

Marvel juga memiliki produk bernama Pop yang membantu mengubah sketsa wireframing pena dan kertas menjadi prototipe iPhone dan Android yang interaktif. Pop memungkinkan desainer untuk mengambil foto sketsa mereka dan mengubahnya menjadi gambar rangka interaktif.

Axure RP

Axure RP telah ada sejak lama dan merupakan alat yang hebat untuk membuat gambar rangka statis (serta prototipe yang sangat interaktif). Ini bukan berbasis cloud meskipun berfungsi di Windows dan macOS.

Wireframing dapat dilakukan menggunakan perpustakaan besar komponen drag and drop, namun, Axure RP adalah alat kompleks yang jauh melampaui wireframing. Menggunakan fitur terprogram Axure RP, desainer dapat membuat prototipe canggih dengan fungsionalitas yang mencerminkan aplikasi yang berfungsi penuh.

Mengingat kurva belajar Axure yang tinggi, tidak masuk akal untuk menggunakannya hanya untuk gambar rangka statis. Namun, jika tujuannya adalah untuk menghasilkan prototipe yang sangat halus dan fungsional, maka itu akan menjadi alat yang sempurna untuk desainer produk.

Alat Wireframe Favorit Toptal Designer

Kami menghubungi beberapa Desainer Toptal untuk mencari tahu alat wireframing apa yang digunakan desainer profesional dan mengapa. Inilah yang mereka katakan.

“Favorit saya adalah Adobe XD dan UXPin. Saya mulai memilih XD sebagai favorit karena mudah untuk membuat wireframe cepat dan menguji ide, dan dari sana saya benar-benar dapat memulai desain dan bahkan prototipe pada platform yang sama.” -Michael Craig

“Favorit saya adalah Pop karena sangat cepat. Saya selalu menggambar gambar rangka saya di atas kertas, jadi ini berfungsi dengan baik dan saya tidak perlu menangani apa pun. Saya juga menemukan itu baik untuk keseluruhan hal 'jangan jatuh cinta dengan solusi' karena itu sangat jelas lo-fi. - Nicola Rushton

“Saya menggunakan Axure hampir sepanjang waktu untuk pekerjaan desain saya. Ini adalah alat yang sangat diremehkan untuk pekerjaan desain yang komprehensif, dengan kompleksitas yang sangat tinggi” - Andi Omtvedt

“Saya sebenarnya bukan lagi wireframe itu sendiri - karena menurut saya alatnya cukup kuat untuk menghasilkan prototipe fidelitas rendah, jadi hampir menggabungkan wireframe awal dengan visual yang lebih baik. Saya telah mengadopsi Framer X sejak Januari tahun ini, dan saya menyukainya.” -Charlie Williams

Ringkasan

Mengingat kemampuan untuk menghasilkan prototipe yang canggih, apakah wireframing masih relevan? Beberapa desainer profesional akan berpendapat bahwa gambar rangka adalah peninggalan masa lalu, sementara yang lain dengan kukuh mempertahankan pentingnya mereka untuk proses desain.

Saat ini ada banyak sekali alat wireframe yang memfasilitasi proses desain. Beberapa terus fokus murni pada wireframing, bahkan ketika tren bergerak menuju produk hybrid yang dimulai dengan wireframing tetapi juga mencakup kemampuan untuk membuat prototipe, dan dalam banyak kasus menghasilkan mockup yang berfungsi penuh.

Meskipun telah berevolusi dari pengiriman kesetiaan rendah menjadi kesetiaan menengah atau tinggi, Wireframing pasti tidak akan hilang.

Bacaan lebih lanjut di Blog Desain Toptal:

• Pemetaan Wireframe: Cara Menghindari Scope Creep
• Kematian pada Wireframe. Langsung ke High-Fidelity!
• Pertarungan Alat Desain – Adobe XD vs. Sketch (2019)
• Kuasai Kerajinan Anda dengan Alat UX Teratas Ini
• 10 Hasil Kerja UX yang Digunakan Desainer Teratas