WIREFRAME

Pengertian Wireframe

Wireframe adalah kerangka dasar visual dari sebuah halaman atau aplikasi yang menggambarkan tata letak (layout), struktur konten, serta fungsi-fungsi utama tanpa berfokus pada desain visual (warna, gambar, tipografi).

Sederhananya, wireframe itu seperti denah rumah: belum dicat, belum ada dekorasi, tapi sudah jelas posisi ruangannya, pintu, jendela, dan alurnya.

Tujuan Wireframe

Membuat gambaran awal sebelum masuk ke tahap desain UI (User Interface).
Membantu komunikasi antara tim desain, developer, dan klien.
Menghemat waktu & biaya dengan menemukan masalah struktur lebih awal.
Menjadi acuan pengembangan untuk desain dan coding.

Unsur-unsur Wireframe

Layout dasar → struktur kolom, grid, header, sidebar, footer.
Navigasi → menu, tombol, link.
Konten utama → teks placeholder (lorem ipsum), gambar dummy (kotak dengan X).
Hierarki informasi → ukuran dan posisi elemen menunjukkan prioritas.
Fungsionalitas dasar → form, search bar, pagination, filter.

Jenis Wireframe

Low-fidelity Wireframe
- Sederhana, biasanya hanya berupa garis, kotak, teks dummy.
- Fokus pada struktur dan alur.
- Bisa dibuat dengan kertas atau tools sederhana.
Mid-fidelity Wireframe
- Sudah lebih detail, mulai memperlihatkan hierarki informasi dan fungsi.
- Ada ikon dasar, placeholder lebih jelas.
High-fidelity Wireframe
- Hampir menyerupai desain akhir, tapi belum fokus ke warna dan style.
- Menunjukkan interaksi lebih kompleks (drop-down, slider, hover).
- Sering dipakai untuk testing user flow sebelum masuk ke prototipe.

🛠️ Tools untuk Wireframe

Manual: kertas, whiteboard, sticky notes.
Digital:
- Figma
- Sketch
- Adobe XD
- Balsamiq
- Miro
- Axur

🔄 Proses Pembuatan Wireframe

Riset kebutuhan → pahami user & tujuan aplikasi/website.
Membuat user flow → alur perjalanan pengguna.
Sketsa awal → tentukan struktur dasar.
Membuat wireframe low/mid/high fidelity sesuai kebutuhan.
Review & revisi bersama tim/klien.
Lanjut ke prototipe & UI design.

Contoh Perbandingan

Wireframe = kerangka rumah → belum ada warna, cat, atau dekorasi.
Mockup = rumah sudah ada cat dan perabot, tapi belum bisa dimasuki.
Prototype = rumah sudah bisa dimasuki, ada pintu yang bisa dibuka, lampu bisa dinyalakan (interaktif).

Tutorial Membuat Header dan navigation
1. Buka Figma
Login ke Figma
Klik tombol + New design file→ untuk membuat file baru.
2. Atur Frame / Canvas
Pilih tool Frame (F) → lalu pilih Desktop (misalnya ukuran 1440px).
Ini akan menjadi kanvas utama tempat kita mendesain.

3. Buat Sidebar (Bagian Ungu di Kiri)
Gunakan tool Rectangle (R).
Tarik kotak panjang menutupi sisi kiri frame.
Atur Fill color → pilih ungu (#A855F7 atau sesuai keinginan).
Ini berfungsi sebagai navigasi samping / sidebar.
4. Tambahkan Judul Aplikasi
- Pilih tool Text (T).
- Tulis: FoodMeal.
- Letakkan di dalam sidebar.
- Atur ukuran font (misal 24px, bold, warna putih).
  
  5. Bagian Header (Atas Layar)
- Pilih Text (T) → tulis: Hey, Zack.
- Letakkan di atas bagian konten (kanan atas).
- Tambahkan search bar lagi (rectangle dengan rounded corner putih).
6. Buat Banner / Carousel
- Gunakan Rectangle (R) besar di bawah header.
- Warnai putih (#FFFFFF).
- Bisa tambahkan placeholder bulatan kecil di bawahnya (pakai Ellipse (O)) → untuk indikator slide.
7. Buat Grid Produk / Konten
- Gunakan Rectangle (R) lagi.
- Buat beberapa kotak besar (misalnya 2 kolom x 3 baris).
- Warnai abu-abu (#E5E5E5) sebagai placeholder gambar produk.
8. Buat Menu Kategori (Kotak Kecil)
- Gunakan Rectangle (R).
- Buat kotak kecil berjejer horizontal (5 kotak).
- Kotak pertama bisa diwarnai ungu (aktif), sisanya putih.
- Atur sudut agak rounded biar lebih soft.
9. Rapikan & Grouping
- Pilih semua elemen di bagian tertentu → klik kanan → Group.
- Atur spacing agar rapi dengan Align tools (di atas Figma).