Pertemuan 1
1. Memahami apa itu UI dan UX.
2. Menyadari pentingnya desain antarmuka dan pengalaman pengguna.
3. Mengenali peran desainer UI/UX di dunia kerja.
1. Definisi UI dan UX
UI (User Interface): tampilan visual dan elemen interaktif dari sebuah produk.
UX (User Experience): pengalaman keseluruhan pengguna saat menggunakan produk.
Analogi: UX adalah pengalaman kemudahan order ojek online melalui aplikasi. Sedangkan UI adalah tampilan aplikasinya.
2. Contoh Aplikasi Nyata
Tampilkan contoh: Gojek, Tokopedia, Instagram, Traveloka.
#Apa yang membuat aplikasinya enak digunakan?
#Apa kekurangan UI/UX-nya?
3. Perbedaan UI vs UX
UI (User Interface) ¦¦ UX (User Experience)
============
Fokus visual ¦¦ Fokus keseluruhan pengalaman
Desain tombol, warna ¦¦ Navigasi, alur, emosi
Estetika ¦¦ Fungsi dan kenyamanan
4. Peran Profesi UI/UX Designer
Menemukan masalah pengguna
Membuat solusi desain
Bekerja sama dengan tim developer dan produk
🎥 Referensi Video YouTube
🔹 Video Penjelasan (Bahasa Indonesia):
1. Apa itu UI/UX Design? (By Kelas Dewa)
Cocok untuk pemula, penjelasan simpel
📺 https://youtu.be/MGVStih0p6Y
2. UI/UX Designer Ngapain Aja? (By Sekolah UX)
Membahas tugas & workflow UI/UX Designer
📺 https://youtu.be/0RLzZxkAqvA
3. Bedanya UI dan UX (By BuildWith Angga)
Penjelasan cepat dan menarik
📺 https://youtu.be/HG6S2IjqOUY
Pertemuan ke 2.
Alur Mendesain aplikasi menggunakan UI/UX
Kalau kita bicara alur mendesain sebuah aplikasi dengan pendekatan UI/UX, prosesnya biasanya tidak langsung “bikin tampilan” dari awal, tapi melalui tahapan yang sistematis supaya aplikasi nyaman digunakan dan tampak profesional.
Berikut alur umumnya:
1. Riset & Pemahaman Kebutuhan
Tujuan: Memahami masalah, target pengguna, dan tujuan aplikasi.
Langkah:
Wawancara pengguna potensial atau pemilik produk.
Analisis kompetitor (lihat aplikasi serupa, apa yang berhasil dan tidak).
Buat user persona — profil fiktif yang mewakili tipe pengguna.
Hasil: Dokumen kebutuhan (requirement) dan pemahaman siapa pengguna utama.
2. Membuat User Flow
Tujuan: Menentukan alur interaksi pengguna di aplikasi.
Langkah:
Petakan perjalanan pengguna (user journey).
Buat diagram sederhana (misal: dari halaman login → dashboard → detail produk → checkout).
Hasil: Skema alur yang jelas sebelum mulai desain.
3. Wireframing
Tujuan: Membuat kerangka tampilan tanpa fokus pada warna atau dekorasi.
Langkah:
Gunakan kertas atau tools seperti Figma, Balsamiq, atau Whimsical.
Fokus pada penempatan elemen: menu, tombol, form, gambar.
Hasil: Low-fidelity wireframe sebagai peta dasar antarmuka.
4. Prototyping
Tujuan: Membuat versi simulasi aplikasi yang bisa diuji alurnya.
Langkah:
Kembangkan dari wireframe menjadi high-fidelity prototype (dengan warna, tipografi, ikon, dll.).
Hubungkan antarhalaman agar bisa diklik seperti aplikasi asli.
Hasil: Prototipe interaktif.
5. Pengujian (Usability Testing)
Tujuan: Menilai apakah desain mudah digunakan.
Langkah:
Uji coba pada target pengguna.
Catat kesulitan atau kebingungan mereka.
Perbaiki alur atau elemen yang tidak intuitif.
Hasil: Daftar revisi berdasarkan masukan pengguna.
6. Finalisasi Desain
Tujuan: Menghasilkan design handoff untuk developer.
Langkah:
Pastikan konsistensi (warna, font, ikon).
Buat panduan gaya (style guide atau design system).
Kirim file ke tim developer dengan dokumentasi lengkap.
Hasil: Desain siap diimplementasikan
7. Iterasi
Tujuan: Menyempurnakan desain setelah rilis.
Langkah:
Pantau perilaku pengguna lewat analitik.
Lakukan perbaikan atau penyesuaian.
Hasil: Aplikasi yang terus membaik sesuai kebutuhan pengguna.
