Desain Antarmuka (UI/UX)

---

🎯 1. Pengantar UI/UX dalam Aplikasi Desktop

7

📖 Deskripsi

• UI (User Interface) → tampilan visual aplikasi (layout, warna, tombol)
• UX (User Experience) → pengalaman pengguna saat menggunakan aplikasi

🧠 Narasi

Aplikasi yang “bagus” bukan hanya yang berjalan, tetapi yang mudah dipahami, nyaman digunakan, dan tidak membingungkan. UI adalah “wajah”, UX adalah “rasa”.

---

🧩 2. Perbedaan UI dan UX

📊 Tabel Perbandingan

Aspek	UI	UX
Fokus	Tampilan	Pengalaman
Contoh	Warna, font	Kemudahan penggunaan
Tujuan	Menarik	Nyaman & efisien
Output	Desain visual	Alur interaksi

---

🧠 Narasi

• UI buruk → aplikasi jelek dilihat
• UX buruk → aplikasi sulit digunakan
  👉 Keduanya harus seimbang

---

🧱 3. Prinsip Dasar UI/UX

7

📌 Prinsip Utama

1. Consistency (Konsistensi)
2. Alignment (Perataan)
3. Contrast (Kontras)
4. Proximity (Kedekatan)
5. Simplicity (Kesederhanaan)

---

🧠 Narasi

UI yang baik:

• Tidak membuat user berpikir terlalu keras
• Konsisten antar halaman
• Mudah dipahami tanpa penjelasan panjang

---

🎨 4. Elemen Visual UI

8

📊 Elemen Utama

Elemen	Fungsi
Warna	Memberi identitas & emosi
Typography	Keterbacaan
Icon	Mempercepat pemahaman
Button	Aksi utama
Spacing	Kerapihan

---

🧠 Narasi

• Warna merah → error
• Warna hijau → sukses
• Font kecil → sulit dibaca

---

🖥️ 5. Layout dan Struktur Tampilan

8

📌 Jenis Layout

• Single Window → aplikasi sederhana
• Multi Window → aplikasi kompleks
• Dashboard Layout → aplikasi data

---

🧠 Narasi

Layout yang baik membantu user:

• Menemukan fitur dengan cepat
• Tidak tersesat dalam aplikasi

---

🧭 6. Navigasi dan Alur Pengguna (User Flow)

7

📖 Deskripsi

User Flow adalah alur perjalanan user saat menggunakan aplikasi.

---

📌 Contoh Alur

Login → Dashboard → Input Data → Simpan → Output

---

🧠 Narasi

UX yang baik memastikan:

• Tidak ada langkah yang membingungkan
• User tahu harus klik apa selanjutnya

---

🧪 7. Wireframe & Mockup

7

📖 Deskripsi

• Wireframe → sketsa kasar layout
• Mockup → desain detail visual

---

🧠 Narasi

Sebelum coding, desain dulu:

• Menghemat waktu
• Menghindari revisi besar

---

💻 8. Tutorial Praktikum: Desain Form UI yang Baik

🎯 Studi Kasus

Form input data mahasiswa

---

❌ Desain Buruk

• Label tidak sejajar
• Tombol tidak jelas
• Terlalu banyak warna

---

✅ Desain Baik

• Alignment rapi
• Warna konsisten
• Tombol utama jelas

---

💡 Contoh Implementasi (Tkinter)

import tkinter as tk

app = tk.Tk()
app.title("Form Mahasiswa")

tk.Label(app, text="Nama").grid(row=0, column=0)
tk.Entry(app).grid(row=0, column=1)

tk.Label(app, text="NIM").grid(row=1, column=0)
tk.Entry(app).grid(row=1, column=1)

tk.Button(app, text="Simpan").grid(row=2, column=1)

app.mainloop()

---

🧠 Penjelasan

• Menggunakan grid layout → lebih rapi
• Label sejajar → mudah dibaca
• Struktur sederhana → UX baik

---

⚠️ 9. Kesalahan Umum UI/UX

❌ Tabel Kesalahan

Kesalahan	Dampak
Terlalu banyak warna	Membingungkan
Font kecil	Sulit dibaca
Layout tidak rapi	Tidak profesional
Navigasi rumit	User frustrasi

---

🧠 Narasi

UI/UX buruk bisa membuat user meninggalkan aplikasi meskipun fiturnya bagus.

---

🎯 10. Best Practice UI/UX

✅ Tips

• Gunakan desain minimalis
• Konsisten di seluruh aplikasi
• Gunakan warna secukupnya
• Fokus pada kebutuhan user
• Uji coba dengan user nyata

---

🏗️ 11. Studi Kasus Nyata

7

📌 Contoh

• Aplikasi Kasir
• Sistem Akademik
• Aplikasi Inventaris

---

🧠 Narasi

Aplikasi profesional selalu mengutamakan UI/UX karena langsung berdampak pada produktivitas pengguna.

---

🎓 12. Rangkuman

📌 Inti Materi

• UI = tampilan, UX = pengalaman
• Desain harus konsisten dan sederhana
• Layout & navigasi sangat penting
• Wireframe sebelum coding
• UI/UX menentukan keberhasilan aplikasi

---

📝 13. Latihan & Tugas

✏️ Latihan

1. Apa perbedaan UI dan UX?
2. Sebutkan 3 prinsip UI!
3. Apa itu user flow?

---

💻 Tugas Praktikum

• Desain form:
  • Input Nama, Email, Password
• Gunakan:
  • Layout rapi
  • Warna konsisten
• Buat:
  • Wireframe + implementasi GUI

---

🚀 Penutup

UI/UX adalah kunci:

• Aplikasi mudah digunakan
• User puas
• Produk sukses