Mengapa Wireframe Penting Dalam Proses Desain
Diterbitkan: 2017-01-29Wireframing adalah cara cepat dan efektif untuk mengidentifikasi masalah kegunaan sejak awal dalam proses desain Anda.
Jika Anda seorang desainer web, saya yakin Anda sudah familiar dengan wireframing dan jika Anda adalah seorang desainer pengalaman pengguna (UX), seperti saya, Anda mungkin menghabiskan sebagian besar waktu Anda membuat wireframes baik dengan tangan dengan kertas dan pensil atau menggunakan alat digital seperti Proto.io .
Artikel ini ditujukan bagi Anda yang pernah mendengar istilah tersebut dan ingin mempelajari lebih lanjut mengapa wireframes harus memainkan peran penting dalam proses desain Anda. Kami juga akan membahas cara terbaik untuk memanfaatkannya dalam percakapan dengan pemangku kepentingan dan klien yang relevan.
Mari Mulai Dengan Menjawab Pertanyaan “Apa itu Wireframe?”
Saya suka berpikir tentang gambar rangka seperti kerangka halaman. Kerangka ini adalah penggambaran dua dimensi dari antarmuka halaman yang menunjukkan jarak elemen pada halaman, bagaimana konten diprioritaskan, fungsi apa yang tersedia, dan bagaimana pengguna akan berinteraksi dengan situs. Mereka juga memainkan peran penting dalam menghubungkan arsitektur informasi dengan aspek visual desain dengan menunjukkan jalur antara berbagai halaman. Wireframes sengaja tidak memiliki warna, grafik, dan font bergaya.
Jika kita tidak memiliki kerangka yang kuat untuk memulai, maka semua hal yang kita letakkan di atasnya, seperti fungsi atau gaya, benar-benar tidak akan memiliki peluang.
Pikirkan tentang proses membangun rumah baru. Jika Anda memfokuskan seluruh energi Anda pada desain interior, seperti warna dinding dan kain untuk sofa, daripada cetak biru struktur rumah, apakah menurut Anda itu akan memenuhi tujuannya? Mungkin tidak. Dimulai dengan desain interior, bukan struktur dasar rumah, berlawanan dengan intuisi.
Apa yang Seharusnya Tidak Termasuk Dalam Wireframe?
Sangat penting untuk menjaga gambar rangka Anda tetap sederhana. Ini karena inti dari wireframing, seperti yang dinyatakan di atas, adalah untuk menunjukkan bagaimana elemen diletakkan pada halaman dan bagaimana navigasi situs seharusnya bekerja. Terlalu banyak warna atau gambar dapat mengalihkan perhatian pembaca dari fokus pada tata letak dan elemen navigasi. Pastikan untuk menghilangkan atau mengurangi penggunaan warna, gambar, grafik, dan font bergaya untuk mencapai tujuan Anda dalam menggambarkan representasi visual kerangka yang sederhana.
Ingatlah hal ini:
Direkomendasikan untukmu:
Bagaimana Metaverse Akan Mengubah Industri Otomotif India
Apa Arti Ketentuan Anti-Profiteering Bagi Startup India?
Bagaimana Startup Edtech Membantu Tenaga Kerja India Meningkatkan Keterampilan & Menjadi Siap Masa Depan...
Saham Teknologi Zaman Baru Minggu Ini: Masalah Zomato Berlanjut, EaseMyTrip Posting Stro...
Startup India Mengambil Jalan Pintas Dalam Mengejar Pendanaan
Platform Pemasaran Digital Logicserve Bags Pendanaan INR 80 Cr, Berganti Nama Sebagai LS Dig...
- Pertahankan warna Anda menjadi abu-abu, putih, dan hitam.
- Gunakan font umum. Ini membantu mencegah pengguna terganggu oleh gaya tipografi. Menampilkan hierarki informasi melalui font masih penting, dan dapat ditunjukkan hanya dengan mengubah ukuran font dan apakah itu "biasa", " miring", atau "tebal".
- Hindari grafik dan gambar yang sangat bergaya. Sebagai gantinya, saya sarankan menggunakan persegi panjang dan bujur sangkar sebagai placeholder, menambahkan "x" di tengah kotak untuk menunjukkan di mana gambar akan ditempatkan. Anda juga dapat melakukan hal yang sama untuk menunjukkan di mana video akan diposisikan dengan segitiga sebagai tombol putar di tengah kotak.
5 Alasan Utama Menggunakan Wireframe
Wireframes adalah alat yang hebat untuk membuat klien Anda fokus pada apa yang Anda ingin mereka pikirkan di awal proses desain.
Wireframes adalah cara yang bagus untuk memandu klien dan pemangku kepentingan melalui struktur desain Anda tanpa memberi mereka kesempatan untuk terganggu oleh warna dan gambar. Jika tujuan pertemuan Anda adalah untuk membuat klien Anda memikirkan tentang elemen apa yang harus ada di halaman dan bagaimana elemen tersebut akan berfungsi di situs, hanya dengan menghilangkan warna, gambar, dan halaman bergaya membuatnya jauh lebih mudah. Anda kemudian dapat dengan mudah mengumpulkan umpan balik dari klien dan pemangku kepentingan Anda tentang navigasi situs dan alokasi elemen di halaman. Alih-alih mereka berfokus pada bagaimana warna merah "tidak berfungsi untuk mereka" sebagai tombol ajakan bertindak. Kedengarannya lucu, tapi itu sering terjadi!
Wireframes memungkinkan Anda untuk memetakan fungsionalitas halaman, menangkap masalah lebih awal, dan menghemat waktu untuk revisi nanti.
Jauh lebih tidak menyakitkan untuk membuat perubahan pada gambar rangka daripada membuat mockup fidelitas tinggi dengan banyak elemen desain. Harus mengerjakan ulang mockup kesetiaan tinggi membutuhkan lebih banyak waktu untuk membuat perubahan. Jika Anda menginvestasikan waktu untuk memikirkan fungsionalitas halaman melalui wireframing sejak awal dalam proses desain Anda, Anda akan sangat senang melakukannya. Ini pasti menghabiskan waktu dengan baik dan sangat efisien.
Dengan kata lain, memetakan fungsionalitas lebih awal akan mengurangi jumlah bolak-balik yang sering terjadi pada fase pengembangan. Jelas lebih mudah untuk menulis ulang fungsi dalam gambar rangka, dibandingkan dengan aplikasi web.
Wireframing memberi Anda kesempatan untuk mengenal klien Anda lebih baik.
Anda akan mulai melihat pola dalam perilaku dan motivasi semakin banyak waktu yang Anda habiskan dengan klien Anda. Seiring waktu, pengetahuan yang Anda peroleh dari umpan balik mereka hanya akan memengaruhi cara terbaik untuk bekerja dengan mereka di masa depan dan bagaimana membuat waktu Anda bersama mereka menjadi paling produktif. Wireframing juga merupakan cara yang bagus untuk membuat klien Anda fokus. Klien suka melompat lima langkah ke depan karena menarik untuk mulai memikirkan produk akhir. Tetapi menghilangkan peluang bagi klien untuk mengalihkan perhatiannya dari memikirkan fungsionalitas dan struktur desain akan menjadi sesuatu yang menurut Anda sangat bermanfaat.
Wireframing adalah alat yang hebat untuk mengumpulkan umpan balik dan mencari tahu kekurangan lebih awal.
Jika efisiensi adalah tujuan Anda, yang kemungkinan besar memang demikian, maka wireframing adalah tempat Anda harus memulai. Mungkin ada saat-saat di mana Anda merasa tertekan untuk mulai merancang mockup kesetiaan tinggi langsung dari kelelawar karena kendala waktu atau uang. Cobalah untuk mengingat bahwa tanpa mengumpulkan umpan balik yang berkualitas lebih awal, Anda mungkin membuat proses revisi yang lebih melelahkan dan memakan waktu di kemudian hari, membuat semuanya menjadi kurang efisien.
Wireframe adalah cara yang bagus untuk memprioritaskan konten dengan membantu mengungkapkan batasan ruang dan mendesain hierarki elemen pada halaman.
Memiliki kesempatan sejak dini untuk memvisualisasikan hierarki halaman Anda dan mulai menampilkan batasan ruang secara visual akan menghemat banyak waktu nanti saat Anda mulai menyesuaikan gaya halaman dan mengisinya dengan konten. Anda harus mengumpulkan umpan balik tentang gambar rangka Anda dari pemangku kepentingan, dengan cepat memindahkan berbagai hal di gambar rangka Anda berdasarkan umpan balik yang Anda terima, mengumpulkan umpan balik lagi, dan mengulanginya sampai Anda mencapai tujuan yang diinginkan.
Kesimpulan
Wireframes mendorong kegunaan ke garis depan dan menggunakannya adalah cara yang kuat untuk menggambarkan tata letak halaman dan fungsionalitas elemen pada halaman.
Menggunakan gambar rangka sejak awal dalam proses desain memaksa Anda dan klien Anda untuk melihat secara objektif kemudahan penggunaan, jalur konversi, penempatan elemen, dan membantu menunjukkan kelemahan lebih awal. Ini semua adalah hal yang mengarah pada produk yang intuitif, fungsional, dan menyenangkan.
[Posting ini pertama kali muncul di blog Proto.io dan telah direproduksi dengan izin.]