1.

WIREFRAME
• Wireframing merupakan cara desainer UI/UX membuat rancangan website maupun aplikasi pada
level structural atau secara sederhana dapat diartikan sebagai kerangka gambar.
• Merancang sebuah wireframe berarti merencanakan kerangka garis besar sebuah aplikasi
atau website.
• Wireframing dapat dilakukan secara sederhana menggunakan gambar dengan tangan maupun
software khusus.
• Element – element wireframe:
• Desain Informasi
• Navigasi
• Desain Interface
Jenis-jenis WIREFRAME
• Terdapat 3 Jenis wireframe:
• Wireframe low-Fidelity
Wireframe low-fidelity merupakan representasi visual yang paling dasar. Biasanya,
desain wireframe low-fidelity digunakan sebagai titik awal proses desain wireframe.

• Wireframe Mid-fidelity
Wireframe Mid-fidelity merupakan wireframe dengan jenis yang memiliki detail lebih baik dari low-
fidelity dan fitur2 yang ada dapat terdiferensiasi dengan jelas.

• Wireframe High-Fidelity
• wireframe high-fidelity adalah tipe wireframe yang memiliki detail paling baik dibanding dua
lainnya. Tipe wireframe ini didesain dengan layout pixel-specific. Rencana gambar dan konten
sudah ditampilkan jelas dengan tipe wireframe ini beserta detail-detail lainnya.
Wireframe
 Wireframe
Before- after
2. Mockup
• Mockup adalah representasi statis yang lebih rinci dari desain, dengan elemen visual seperti warna,
font, dan gambar. Ini memberikan gambaran lebih jelas tentang tampilan akhir produk atau
halaman.
• Fungsi Mockup:
• Memberikan gambaran nyata produk
• Menghemat Biaya
• Efektiviatas Waktu
• Media untuk presentasi produk
• Memperemudah proses revisi
Contoh Mockup
Contoh
Mockup
3. Prototype
• Prototype adalah model interaktif yang mencoba mensimulasikan pengalaman
pengguna. Ini dapat berupa model klik-tombol atau model lebih maju yang
memberikan gambaran interaksi lebih mendalam.
• Fungsi dan tujuan dari desain prototyping:
• Visualisasi konsep
• Pengujian konse desain
• Interaksi pengguna
• Umpan balik pengguna
• Media komunikasi tim dalam pengembagan produk
• Media presentasi kepada client/user
Jenis-jenis Prototype
Paper Prototype
• Prototype sederhana dengan menggunakan media kertas sebagai bahan untuk menyampaikan rancangan
produk

Low-fidelity Prototype
• Prototype yang biasanya berbentuk sketsa produk yang biasanya menujukan alur atau flow dalam
menggunakan produk tersebut

High-fidelity prototype adalah prototype yang memiliki tampilan mendekati produk asli.
Biasanya prototype ini dapat menjadi bahan simulasi dalam menggunakan produk
tersebut. Biasanya digunakan dalam pengembangan produk berbasis web atau aplikasi.
Contoh Prototype
Contoh Prototype
 P er bedaan Wir eframe, M ockup dan P r ototyping

Kriteria Wireframe Mockup Prototyping

Menciptakan model interaktif yang

Menyajikan rancangan visual dan
Tujuan Utama Menunjukkan struktur dan tata letak. mensimulasikan pengalaman
desain.
pengguna.

Rendah, biasanya hanya sketsa atau garis- Lebih tinggi daripada wireframe, Lebih tinggi dari mockup, mencakup
Level Detail
garis dasar. termasuk warna dan elemen visual. elemen interaktif dan fungsi dasar.

Desain visual, warna, dan elemen

Fokus Desain Struktur dan tata letak elemen. Interaksi pengguna dan fungsi dasar.
grafis.

Memungkinkan pengujian interaksi

Cepat dan mudah digunakan untuk Memberikan gambaran visual yang
Kelebihan pengguna dan umpan balik lebih
perencanaan. lebih akurat.
lanjut.

Saat ingin menguji fungsi interaktif

Tahap awal perencanaan dan Sebelum pengembangan penuh
Kapan Digunakan dan mendapatkan umpan balik
konseptualisasi. untuk mendapatkan persetujuan.
pengguna.

Sedang, membutuhkan Tinggi, melibatkan pembuatan

Tingkat Kesulitan Rendah, fokus pada struktur dasar.
perhatian pada detail visual. model yang lebih kompleks.

Menerima umpan balik terhadap

Lebih berfokus pada struktur dan tata Mengumpulkan umpan balik
Umpan Balik Pengguna interaksi dan pengalaman
letak. visual dan kesan keseluruhan.
pengguna.
 Perbedaan
Wireframe, Mockup
dan Prototyping
 Carilah Pengertian Istilah-istilah di
bawah ini
1. Grid System
2. Iconography
3. UI Kit
4. User Persona
5. User Flow
6. Information Architecture
7. User Journey
8. Usability Testing
9. A/B Testing
10. Design Sprint