UI/UX Design adalah proses mendesain antarmuka dan pengalaman pengguna pada produk digital, seperti website atau aplikasi.

• UI (User Interface): Fokus pada tampilan visual, termasuk warna, tipografi, dan elemen interaktif.
• UX (User Experience): Berfokus pada pengalaman pengguna, memastikan produk mudah digunakan, logis, dan menyenangkan.
  Peserta akan mempelajari perbedaan antara UI dan UX serta bagaimana keduanya saling melengkapi dalam proses desain.

Figma adalah perangkat lunak berbasis cloud untuk desain UI/UX yang mendukung kolaborasi real-time.

• Peserta akan mengenal fitur dasar seperti artboard, layer, shape tools, dan pen tools.
• Latihan dasar meliputi membuat desain sederhana seperti tombol atau header.
  Figma dipilih karena kemudahan akses dan kemampuannya untuk mendukung kerja tim.

• Sitemap: Struktur hierarki halaman pada website atau aplikasi untuk memastikan navigasi yang jelas.
• User Flow: Diagram yang menggambarkan langkah-langkah pengguna saat berinteraksi dengan produk.
  Peserta akan belajar cara menyusun sitemap dan user flow untuk meningkatkan kemudahan penggunaan produk.

• Wireframe (Lo-Fi): Kerangka kasar desain untuk fokus pada struktur dan fungsi.
• Visual Design (Hi-Fi): Versi final dengan elemen visual lengkap seperti warna, ikon, dan gambar.
  Peserta akan mempraktikkan proses transformasi dari wireframe sederhana menjadi desain berkualitas tinggi.

• Color: Memahami teori warna, kontras, dan penggunaannya untuk menciptakan hierarki visual.
• Typography: Memilih font yang sesuai, ukuran huruf, dan pengaturan jarak antar teks.
• Layouts & Spacing: Menata elemen desain dengan teknik grid dan ruang kosong untuk hasil yang rapi.
  Peserta akan mempelajari elemen-elemen ini secara teori dan mempraktikkannya langsung dalam proyek desain.

Auto Layout di Figma membantu mengatur elemen secara otomatis berdasarkan ukuran dan posisi.

• Peserta akan mempraktikkan penggunaan Auto Layout untuk membuat desain yang responsif dan mudah diubah.
• Contohnya, membuat tombol atau kartu yang bisa berubah ukuran sesuai teks.

• Style Guide: Panduan visual untuk menjaga konsistensi desain (warna, font, ikon).
• Component: Elemen desain reusable seperti tombol, header, atau form.
  Peserta akan belajar membuat komponen yang dapat digunakan kembali dan membangun library desain.

CRAP adalah prinsip desain untuk menciptakan visual yang efektif:

• Contrast: Membuat elemen berbeda terlihat jelas.
• Repetition: Menggunakan pola berulang untuk konsistensi.
• Alignment: Menjaga elemen selaras untuk kesan rapi.
• Proximity: Mengelompokkan elemen terkait.
  Peserta akan memahami teori ini dan mempraktikkannya dalam mendesain.

Peserta akan memulai dari ide hingga menghasilkan desain website lengkap, meliputi:

1. Membuat sitemap dan user flow.
2. Membuat wireframe.
3. Melakukan implementasi Hi-Fi design.
4. Menyusun style guide dan komponen untuk menjaga konsistensi desain.
   Hasil akhirnya adalah prototipe website yang siap diuji atau dikembangkan.