WireFrame

 

Apa Itu Wireframe?

Kerangka seperti ini dapat dianggap sebagai desain arsitektur awal situs web atau aplikasi. Atau ini juga dapat disebut sebagai blueprint. Merupakan kerangka kerja situs web sketsa dasar 3D. Dengan kata lain, berarti sama saja seperti kerangka untuk menunjukkan fungsionalitas situs web sebelum penerapan desain. Proses blueprint ini berupa lembaran putih sederhana dengan gambar hitam dari blok-blok kerangka situs web dan fungsi yang harus dibuat.Wireframe adalah suatu proses sebagai referensi visual untuk membantu kita sebagai desainer dan klien kita memahami cara kerja setiap halaman. Contoh nya seperti menu, pop-up, footer, tata letak halaman, dan masih banyak lagi dimana semuanya dapat dirancang.Bentuk kerangka tentu sepenuhnya dapat disesuaikan, dan kita dapat membuat perubahan dengan klien kita sampai seluruh individu yang terlibat puas dengan kegunaan setiap kerangka kerja.Sebagai desainer UX, kita dapat menguji artefak menggunakan wireframes untuk mengonfirmasi atau menyangkal keputusan desain tertentu. 

Fungsi Wireframe

1. Mempresentasikan Visual Arsiktektur

2. Mengklasifikasikan Fitur Website

3. Meningkatkan Kegunaan

4. Wireframe Memberikan Kemudahan Dalam Pembaruan

Manfaat Wireframe

1. Memberikan Gambaran Produk

Penerapan kerangaka awal sangat penting karena dalam hal ini dapat memberikan gambaran desain sehingga mengurangi proses desain secara berulang. Proses ini tentu saja memungkinkan perancang mengoptimalkan tata letak. Bahkan komponen fungsional situs web nya akan dapat sesuai dengan berbagai sudut pandang tanpa mengkhawatirkan bagian kreatif situs web.

2. Menghemat Waktu Desain

Meskipun mungkin tampak berlawanan dengan intuisi, membuat wireframe saat mendesain dapat membantu kita sebagai desainer menghemat banyak waktu dalam jangka panjang.Ini dikarenakan desain yang dihasilkan lebih metodis. Sehingga, tim developer akan dapat memahami apa yang sedang dibuat sejak awal berkat ini. Ini sangat hemat waktu dan membantu menghindari masalah selama proses implementasi.

Cara Memaksimalkan Wireframe

1. Membuat Wireframe dengan Cepat dan Terjangkau.

Buatlah kerangka dengan cepat dan terjangkau Terlebih jika kita menggunakan kertas, pulpen, atau software wireframing seperti Balsamiq. Dalam hal ini maka yang disarankan adalah penggunaan wireframe dengan tingkat rendah atau low fidelity. Wireframe low fidelity membuat hasil jauh lebih sederhana dan lebih penting daripada high fidelity yang komprehensif dan terperinci. Mengapa? Karena konsumen memberi bobot lebih besar pada fungsionalitas, arsitektur informasi, pengalaman pengguna, bagan alur interaksi pengguna, dan kegunaan perangkat lunak daripada kualitas estetikanya. Sebaliknya, kita tidak perlu menyesuaikan pengkodean atau pengeditan grafik dalam situasi ini karena kita dapat memodifikasinya dengan mudah untuk memenuhi kebutuhan.

2. Membuat Wireframe yang Interaktif 

Untuk menekankan relevansi antarmuka pengguna di beberapa area dan menunjukkan logika interaksi antara pengujian cepat dan elemen visual, desainer terkadang akan memilih untuk meningkatkan fidelity pada kerangka tersebut.Kerangka awal yang interaktif, juga dikenal sebagai wireframe yang dapat diklik, digunakan dalam program untuk menangani masalah ini secara efektif.Kita memerlukan UXPin, alat untuk wireframing dan desain prototyping, jika kita ingin membuat wireframe yang rumit. Presentasi yang paling efektif untuk tim pengembangan dan klien mungkin berupa prototipe interaktif. Saat kita menghadapi masalah “apa yang akan terjadi saat saya mengklik tombol ini?”, yang harus kita lakukan hanyalah mengklik dan menunjukkan kepada klien Anda bagaimana fungsinya melalui pembuatan prototipe interaktif. Faktanya, ini agak langsung dan menakjubkan.\

Cara Membuat Wireframe

1. Melakukan Riset

2. Memetarkan User Flow Dengan Jelas

3. Membuat Draft & Sketsa

4. Menambahkan Detail & Memulai Testing

5. Membuat Prototype