Pengenalan UI/UX dan Figma

🎯 Tujuan Pembelajaran :
Memahami konsep dasar UI/UX
Mengenal interface Figma
Mampu membuat elemen dasar di Figma

📘 Materi Teori
1. Apa itu UI (User Interface)?
Tampilan visual dari aplikasi atau website
Contoh: tombol, form, menu, ikon

2. Apa itu UX (User Experience)?
Pengalaman pengguna saat menggunakan aplikasi/website
Fokus pada kemudahan, efisiensi, dan kepuasan pengguna

3. Peran Figma dalam UI/UX
Aplikasi berbasis web untuk desain antarmuka
Bisa kolaborasi langsung secara online
Tools lengkap untuk wireframe, prototipe, dan desain final

4. Tampilan Antarmuka Figma
Sidebar kiri: Layers dan Assets
Canvas: Area desain
Toolbar atas: Tools seperti Frame, Text, Shape
Inspector kanan: Properti objek (warna, ukuran, font, dll.)

🖼️ Contoh Desain Sederhana
Berikut contoh sederhana:

Desain: Halaman Login
Elemen:

Judul "Welcome Back!"

Input Email & Password

Tombol Login

Tampilan:

Sederhana, bersih, dan terpusat

--------------------------------------------------------------------------

🛠️ PRAKTIK
✅ Langkah Praktik: Membuat Halaman Login Sederhana
Buka https://figma.com dan login

Klik "New Design File"

Buat Frame (Artboard) ukuran iPhone 13 (390x844)

Tambahkan:

Text: "Welcome Back!"

Font: Inter, Size: 24, Weight: Bold

Rectangle + Text untuk input Email & Password

Rectangle + Text untuk tombol “Login”

Gunakan tool Align & Distribute agar rapi

Simpan dan beri nama file: Login UI - Pertemuan 1

💡 Tips:
Gunakan warna yang kontras (contoh: putih di atas biru)

Atur spacing antar elemen (margin/padding)

--------------------------------------------------------------------------

🎓 Tugas Mandiri:
Buat desain halaman Sign Up dengan elemen:

Nama, Email, Password

Tombol “Daftar”

Link kecil "Sudah punya akun?"