Eksplorers, WireFraming adalah sekadar ide tentang bagaimana kamu ingin menampilkan data kamu di halaman-halaman. Ini sebenarnya merupakan cetak biru atau kerangka dasar dari halaman web yang mewakili tampilan produk kamu.

Sebuah wireframe yang baik mewakili struktur keseluruhan dari halaman-halaman web dan alur navigasi di halaman-halaman tersebut. Bayangkan kamu sedang mendesain sebuah aplikasi seluler. Kamu perlu membuat wireframe untuk setiap layar yang pengguna jelajahi saat menggunakan wireframe.

Wireframe digunakan untuk mendefinisikan dan merencanakan hierarki informasi di sebuah halaman atau layar. Bagaimana item di halaman diatur, konten apa yang ditempatkan di mana seperti navigasi bar, gambar, video, dll. Bagaimana ruang dialokasikan? Fungsionalitas apa yang tersedia? Pada dasarnya, dalam Wireframing, kamu mewakili posisi elemen-elemen yang berbeda seperti tombol, menu, gambar, video, dan judul.

Wireframing berkaitan dengan jenis data apa yang ingin kita tunjukkan kepada pengguna pada akhirnya, yang dikenal sebagai data utama, dan data apa yang dapat dipindahkan ke halaman kedua sehingga pengguna mengkliknya dan melihat data tersebut.

Jika kamu melihat gambaran dua dimensi antarmuka halaman berwarna hitam dan putih, kemungkinan besar itu adalah wireframe.

Dalam wireframing, ingatlah bahwa tujuan utamamu bukanlah untuk menggambarkan seperti apa tombol seharusnya terlihat atau warna apa yang harus digunakan, gambar, video, paragraf, atau slogan.

Berikut adalah salah satu contoh wireframe

Why do UI/UX designers use Wireframes?

Sebagai bagian dari proses Desain Berbasis Pengguna, wireframe digunakan pada awal fase desain. Sama seperti seorang arsitek yang pertama kali memikirkan denah bangunan dan menentukan posisi relatif dari ruangan-ruangan yang berbeda sebelum memikirkan desain interior, dalam merancang aplikasi mobile dan web, wireframe membantu desainer memvisualisasikan kerangka keseluruhan untuk aplikasi digital.

Berikut beberapa alasan mengapa wireframe penting:

a. Menghemat Waktu

Hal ini terutama karena wireframe dapat dengan cepat dibuat melalui sketsa kasar. Oleh karena itu, menjadi lebih mudah untuk menghilangkan kesalahan utama dan membuat perubahan dengan cepat.

b. Membantu Mengumpulkan Umpan Balik

Bagi seorang Desainer Antarmuka Pengguna dan Pengalaman Pengguna, mengumpulkan umpan balik dari pengguna akhir sangat penting. Wireframe membantu dalam mencapai hal ini. Karena wireframe tidak memiliki warna, hal ini memudahkan pengguna akhir untuk menghargai fungsi desain UX.

c. Membuat Desain yang Akurat

Jenis-jenis wireframe yang berbeda membantu desainer Antarmuka Pengguna dan Pengalaman Pengguna membuat denah yang akurat dari desainnya. Sebagai desainer, mereka dapat meninjau di mana setiap konten akan ditempatkan.

Keuntungan dari Wireframing

Dalam perspektif praktis, wireframe memastikan bahwa konten halaman dan fungsionalitas ditempatkan dengan benar berdasarkan kebutuhan pengguna dan bisnis.

- Wireframing memberikan visualisasi awal yang dapat digunakan untuk direview bersama klien. Pengguna juga dapat mengulasnya sebagai mekanisme umpan balik awal untuk pengujian kegunaan.

- Wireframe memperjelas fitur-fitur produk. Sebuah wireframe memberikan komunikasi yang jelas kepada klien mengenai bagaimana fitur-fitur ini akan berfungsi, di mana mereka akan muncul pada halaman tertentu, dan seberapa berguna mereka sebenarnya.

Kekurangan Wireframing

Karena wireframe tidak mencakup detail visual atau mempertimbangkan implikasi teknis, tidak selalu mudah bagi klien untuk memahami konsep tersebut pada awalnya.

- Desainer juga harus berkomunikasi secara langsung dan menjelaskan untuk mendukung wireframe tersebut. Namun, keuntungan wireframing tetap lebih besar daripada kekurangannya, dan umumnya digunakan oleh Desainer UX/UI di industri sebagai bagian dari Proses Desain mereka.

Menganalisis Wireframe:

Pemahaman Tujuan:

- Mengidentifikasi tujuan dan konteks desain.

- Menganalisis kebutuhan pengguna dan pemangku kepentingan (stakeholders).

- Memahami fitur dan fungsi yang diharapkan.

Identifikasi Elemen Penting:

- Mengenali elemen-elemen utama yang perlu ditampilkan.

- Mengelompokkan dan mengorganisir elemen berdasarkan fungsinya.

Tata Letak (Layout):

- Menentukan struktur tata letak secara umum.

- Memikirkan hierarki informasi dan pengaturan elemen.

Navigasi:

- Menentukan pola dan aliran navigasi antara halaman atau bagian dalam desain.

- Memperhatikan kemudahan penggunaan dan konsistensi.

Penyederhanaan:

- Menghilangkan elemen yang tidak penting atau membingungkan.

- Mengurangi kompleksitas untuk meningkatkan pemahaman dan usability.

Membuat Wireframe:

Alat dan Teknik:

- Menggunakan perangkat lunak atau aplikasi desain wireframe seperti Adobe XD, Sketch, atau Figma.

- Menerapkan teknik manual menggunakan kertas dan pensil.

Struktur Wireframe:

- Menentukan ukuran dan proporsi wireframe sesuai dengan kebutuhan proyek.

- Menggunakan grid atau sistem tata letak untuk mengatur elemen dengan konsistensi.

Elemen Wireframe:

- Menambahkan konten teks sederhana untuk menggambarkan informasi yang akan ditampilkan.

- Menggunakan placeholder untuk gambar atau media yang akan digunakan.

Navigasi dan Interaksi:

- Membuat tombol atau link untuk menggambarkan aliran navigasi antara halaman atau bagian dalam desain.

- Menggambarkan interaksi dasar seperti klik atau swipe.

Prinsip Usability:

- Memastikan keterbacaan dan kontras yang memadai antara teks dan latar belakang.

- Memperhatikan konsistensi dan pemahaman umum pengguna terhadap elemen antarmuka.

Iterasi dan Umpan Balik:

- Menerima umpan balik dari pengguna atau tim desain untuk meningkatkan wireframe.

- Melakukan iterasi dan penyesuaian berdasarkan kebutuhan dan perbaikan yang ditemukan

Referensi :

https://nulab.com/learn/design-and-ux/step-step-guide-creating-first-user-flow-diagram

How to Create UX Flowcharts with Examples and Symbols Explained (casestudy.club)

Last modified: Wednesday, 9 August 2023, 3:44 PM

UI/UX Specialist in Industry 4.0 for Manufacturing Industry

3. Wireframe

What is WireFraming?