Prototyping

UI/UX Design for Beginner

Outline materi

1 Tentang Prototype

2 Tipe Prototype

3 Tools yang Digunakan

Credit to Pablo Stanley

Tentang Prototyping
Prototype
Adalah bentuk 1:1 dari tampilan produk yang akan
di-develop namun belum nyata. Prototype
digunakan untuk mencoba & mensimulasikan
solusi desain yang telah dibuat.
Brainstorming

User Flow

Development Release

Wireframe

UI Design

Product Iteration
Brainstorming

User Flow

Prototyping Development Release

Wireframe

UI Design

Product Iteration
Keuntungan dari Prototype

1 Dapat mencoba produk dengan

mudah & murah

2 Dapat mempelajari &

mengevaluasi solusi desain yang
telah dibuat

3 Dapat mencegah perubahan yang besar

Tipe Prototype
📄 📱 👩💻

Paper Digital Native

Paper Prototyping

Prototype dalam gambar tangan

Dibuat dengan kertas yang disusun

sesuai dengan skenario

Berfungsi untuk mendapatkan

feedback user secara cepat
Digital Prototyping

Prototype yang dibuat dari mockup

UI

Aspek visual sudah

merepresentasikan produk asli

Berfungsi untuk mendapatkan

feedback user pada aspek usability
Native Prototyping

Prototype yang dibuat dengan front-

end code

Bentuk prototype sudah seperti

produk asli

Menciptakan real-experience ketika

digunakan
 Paper Digital Native
Prototyping Prototyping Prototyping

Durasi Cepat Cukup Lama Sangat Lama

Effort Ringan Cukup Berat Sangat Berat

Interaksi Terbatas Cukup Interaktif Sangat Interaktif

Fidelity Rendah Tinggi Sangat Tinggi

Biaya Murah Cukup Mahal Mahal

Tools yang Digunakan
Prototyping dengan Figma

👥 💻 🧠

Collaboration In-App Smart Animate

Pro-Tips membuat Prototype

1 Hindari penggunaan text Lorem

Ipsum

2 Libatkan seluruh anggota tim

3 Testing prototype kepada real user