Oke, mari kita bahas tentang **wireframe** dan **mockup** lebih
lanjut!
**Wireframe**
* **Definisi:** Wireframe adalah kerangka dasar dari sebuah desain
yang menunjukkan tata letak dan struktur konten, tanpa detail
visual seperti warna, tipografi, atau gambar. Bayangkan seperti
denah rumah yang menunjukkan ruangan dan fungsinya, tapi belum
ada dekorasi.
* **Fungsi:**
* **Membangun Struktur:** Menentukan tata letak elemen utama
dan navigasi.
* **Membuat Alur:** Menunjukkan alur pengguna melalui produk.
* **Mengkomunikasikan Ide:** Menjelaskan konsep desain kepada
tim pengembang dan stakeholder.
* **Cara Memakai:**
* Biasanya dibuat dengan alat sederhana seperti pensil dan
kertas, atau dengan software wireframing seperti Balsamiq atau
Figma.
* Fokus pada konten dan fungsi, bukan visual.
* **Kapan Digunakan:**
* Pada tahap awal desain, sebelum mockup dibuat.
* Untuk mengeksplorasi berbagai tata letak dan alur.
* Untuk mendapatkan persetujuan dari stakeholder sebelum
pengembangan dimulai.
**Mockup**
* **Definisi:** Mockup adalah versi visual yang lebih detail dari
desain, yang menyertakan warna, tipografi, gambar, dan interaksi
dasar. Bayangkan seperti model rumah yang menunjukkan ruangan
dan dekorasinya, tapi belum bisa dihuni.
* **Fungsi:**
* **Menunjukkan Visual:** Menampilkan tampilan dan nuansa
produk yang sebenarnya.
* **Menguji Kegunaan:** Memungkinkan pengguna untuk
berinteraksi dengan desain dan memberikan feedback.
* **Membuat Prototipe:** Membangun dasar untuk prototipe
interaktif.
* **Cara Memakai:**
* Biasanya dibuat dengan software desain seperti Photoshop,
Sketch, atau Figma.
* Fokus pada tampilan visual dan interaksi.
* **Kapan Digunakan:**
* Setelah wireframe selesai, untuk mengembangkan desain
visual.
* Untuk mendapatkan persetujuan dari stakeholder sebelum
pengembangan dimulai.
* Untuk melakukan pengujian kegunaan dan mendapatkan
feedback dari pengguna.
**Perbedaan Utama:**
* **Tingkat Detail:** Wireframe lebih sederhana dan fokus pada
struktur, sementara mockup lebih detail dan menyertakan visual.
* **Tujuan:** Wireframe bertujuan untuk mengomunikasikan
struktur dan fungsi, sementara mockup bertujuan untuk
menunjukkan tampilan dan nuansa.
* **Fase Desain:** Wireframe digunakan pada tahap awal desain,
sementara mockup digunakan setelah wireframe selesai.
* **Prototype:**
* **Penjelasan:** Prototipe adalah versi interaktif dari desain yang
memungkinkan pengguna untuk berinteraksi dengan produk, seperti
mengklik tombol, menggulir halaman, atau memasukkan teks.
* **Fungsi:** Memungkinkan untuk menguji kegunaan,
mendapatkan feedback, dan menunjukkan bagaimana produk akan
berfungsi.
* **Cara Memakai:** Biasanya dibuat dengan software
prototyping seperti Figma, InVision, atau Adobe XD.
* **Kapan Digunakan:** Setelah mockup selesai, untuk menguji
dan memvalidasi desain.
* **Style Guide:**
* **Penjelasan:** Style guide adalah dokumen yang berisi
panduan desain untuk elemen visual seperti warna, tipografi, ikon,
jarak, dan tata letak.
* **Fungsi:** Memastikan konsistensi desain di seluruh produk,
memudahkan tim desain untuk bekerja sama, dan membantu
menjaga branding.
* **Cara Memakai:** Biasanya dibuat dengan software desain
atau dengan menggunakan dokumen teks.
* **Kapan Digunakan:** Pada tahap awal desain, untuk
menetapkan pedoman desain yang akan diikuti di seluruh proses.
* **User Flow:**
* **Penjelasan:** User flow adalah diagram yang menunjukkan
langkah-langkah yang diambil pengguna saat berinteraksi dengan
produk.
* **Fungsi:** Membantu memahami alur pengguna,
mengidentifikasi masalah kegunaan, dan memandu proses desain.
* **Cara Memakai:** Biasanya dibuat dengan alat diagramming
seperti Miro, Figma, atau Lucidchart.
* **Kapan Digunakan:** Pada tahap awal desain, untuk
memahami bagaimana pengguna akan berinteraksi dengan produk.
* **Information Architecture:**
* **Penjelasan:** Information architecture adalah struktur dan
organisasi informasi dalam produk untuk memudahkan pengguna
menemukan informasi yang mereka butuhkan.
* **Fungsi:** Memastikan navigasi yang mudah, mengorganisir
konten dengan baik, dan meningkatkan kegunaan produk.
* **Cara Memakai:** Biasanya dilakukan dengan melakukan riset
pengguna, menganalisis konten, dan membuat peta situs.
* **Kapan Digunakan:** Pada tahap awal desain, untuk
menentukan struktur informasi produk.
* **User Persona:**
* **Penjelasan:** User persona adalah representasi semi-fiktif dari
pengguna target, berdasarkan riset pengguna.
* **Fungsi:** Membantu memahami kebutuhan dan perilaku
pengguna, memandu proses desain, dan membuat keputusan
desain yang lebih baik.
* **Cara Memakai:** Biasanya dibuat dengan melakukan riset
pengguna dan menganalisis data.
* **Kapan Digunakan:** Pada tahap awal desain, untuk
memahami pengguna target.
* **Usability Testing:**
* **Penjelasan:** Usability testing adalah proses mengevaluasi
kegunaan produk dengan mengamati pengguna saat mereka
berinteraksi dengannya.
* **Fungsi:** Mengidentifikasi masalah kegunaan, mendapatkan
feedback dari pengguna, dan meningkatkan kegunaan produk.
* **Cara Memakai:** Biasanya dilakukan dengan melibatkan
pengguna nyata dan mengamati perilaku mereka saat
menggunakan produk.
* **Kapan Digunakan:** Pada tahap akhir desain, untuk menguji
kegunaan produk sebelum diluncurkan.
* **A/B Testing:**
* **Penjelasan:** A/B testing adalah teknik untuk
membandingkan dua versi desain untuk melihat mana yang lebih
efektif.
* **Fungsi:** Mengoptimalkan desain produk, meningkatkan
konversi, dan meningkatkan pengalaman pengguna.
* **Cara Memakai:** Biasanya dilakukan dengan menunjukkan
dua versi desain kepada kelompok pengguna yang berbeda dan
membandingkan hasilnya.
* **Kapan Digunakan:** Setelah produk diluncurkan, untuk
menguji dan meningkatkan desain.