---

1. Pengertian Desain Antarmuka (UI Design)

7

📖 Deskripsi

UI Design (User Interface Design) adalah proses merancang tampilan visual dan elemen interaksi pada sistem agar mudah digunakan dan menarik.

🧠 Narasi Penjelasan

UI merupakan “wajah” dari sistem yang langsung dilihat pengguna.
UI yang baik:

• Mudah dipahami
• Menarik secara visual
• Konsisten

👉 UI berperan besar dalam membentuk User Experience (UX).

---

2. Tujuan UI Design

7

📖 Deskripsi

UI bertujuan mempermudah interaksi antara manusia dan komputer.

🧠 Narasi Penjelasan

Tujuan utama:

• Memudahkan navigasi
• Menyampaikan informasi dengan jelas
• Meningkatkan kenyamanan pengguna

👉 UI harus mengutamakan fungsi, bukan hanya estetika.

---

3. Prinsip Dasar UI Design

6

📖 Deskripsi

Prinsip yang digunakan untuk merancang UI yang baik.

🧠 Narasi Penjelasan

Prinsip utama:

• Consistency → konsisten
• Hierarchy → urutan visual
• Alignment → kerapihan
• Contrast → perbedaan jelas
• Proximity → pengelompokan

👉 Prinsip ini membantu pengguna memahami tampilan dengan cepat.

---

4. Elemen UI (UI Elements)

7

📖 Deskripsi

Komponen yang digunakan dalam antarmuka.

📊 Tabel:

Elemen	Fungsi
Button	Aksi
Form	Input data
Menu	Navigasi
Icon	Simbol

🧠 Narasi Penjelasan

👉 Elemen harus jelas fungsi dan mudah dikenali.

---

5. Layout dan Struktur

7

📖 Deskripsi

Pengaturan posisi elemen dalam UI.

🧠 Narasi Penjelasan

• Gunakan grid system
• Atur jarak dan posisi
• Hindari tampilan berantakan

👉 Layout menentukan kenyamanan visual.

---

6. Warna dalam UI

6

📖 Deskripsi

Warna mempengaruhi persepsi dan emosi pengguna.

🧠 Narasi Penjelasan

👉 Gunakan:

• Warna kontras untuk penting
• Warna harmonis untuk kenyamanan

---

7. Tipografi

8

📖 Deskripsi

Penggunaan teks dalam UI.

🧠 Narasi Penjelasan

• Gunakan font yang mudah dibaca
• Atur ukuran dan jarak
• Hindari terlalu banyak font

---

8. Ikon dan Visual

7

📖 Deskripsi

Elemen visual untuk membantu komunikasi.

🧠 Narasi Penjelasan

👉 Ikon harus:

• Mudah dipahami
• Konsisten
• Tidak ambigu

---

9. Navigasi

7

📖 Deskripsi

Cara pengguna berpindah dalam sistem.

🧠 Narasi Penjelasan

👉 Navigasi harus:

• Jelas
• Mudah ditemukan
• Konsisten

---

10. Responsiveness (Desain Responsif)

8

📖 Deskripsi

UI harus menyesuaikan berbagai perangkat.

🧠 Narasi Penjelasan

👉 Tampilan harus:

• Fleksibel
• Adaptif

---

11. Feedback dalam UI

7

📖 Deskripsi

Respon sistem terhadap aksi pengguna.

🧠 Narasi Penjelasan

Contoh:

• Loading
• Notifikasi
• Error message

---

12. Konsistensi UI

7

📖 Deskripsi

Keseragaman desain.

🧠 Narasi Penjelasan

👉 Membantu pengguna:

• Belajar lebih cepat
• Tidak bingung

---

13. Aksesibilitas

7

📖 Deskripsi

UI harus dapat digunakan semua orang.

🧠 Narasi Penjelasan

👉 Pertimbangkan:

• Warna untuk buta warna
• Ukuran teks
• Navigasi sederhana

---

14. Contoh UI Baik vs Buruk

9

📊 Tabel:

UI Baik	UI Buruk
Rapi	Berantakan
Jelas	Membingungkan
Konsisten	Tidak konsisten

---

15. Tools UI Design

7

📖 Deskripsi

Software untuk desain UI.

🧠 Narasi Penjelasan

Contoh:

• Figma
• Adobe XD
• Sketch

---

16. Ringkasan Materi

🧠 Narasi Penjelasan

• UI adalah tampilan sistem
• UI harus mudah, jelas, dan menarik
• UI mempengaruhi UX

---

17. Kesimpulan

• UI design sangat penting dalam IMK
• UI yang baik meningkatkan kepuasan pengguna
• Desain harus fokus pada pengguna

---

🎯 LATIHAN / DISKUSI

1. Apa itu UI Design?
2. Sebutkan prinsip UI!
3. Mengapa konsistensi penting?

---

📝 TUGAS

• Buat desain UI sederhana (wireframe):
  • Login
  • Dashboard
• Jelaskan elemen yang digunakan