Dasar UI UX Design

MATERI PEMBELAJARAN UI/UX DESIGN

Pertemuan 1: Pengenalan UI/UX Design & Elemen UI

Kelas: XII SMK

Alokasi Waktu: 2 JP (± 80 menit)

---

A. Tujuan Pembelajaran

Setelah mengikuti pembelajaran ini, peserta didik diharapkan mampu:

1. Memahami pengertian UI (User Interface) dan UX (User Experience).
2. Menjelaskan perbedaan UI dan UX secara jelas dan sistematis.
3. Mengenali elemen-elemen UI pada website atau aplikasi.
4. Mengamati dan menganalisis tampilan website/aplikasi populer.
5. Memahami peran UI/UX dalam dunia kerja dan industri digital.
6. Melatih cara berpikir kritis, analitis, dan komunikatif sebagai soft skill kerja.

B. Pengantar Materi (Apersepsi Dunia Kerja)

Di era digital saat ini:

• Hampir semua perusahaan membutuhkan website atau aplikasi.
• Tampilan dan kenyamanan penggunaan menjadi penentu kesuksesan produk digital.
• UI/UX Designer menjadi salah satu profesi yang paling dibutuhkan di industri.

Contoh nyata di dunia kerja:

• Aplikasi belanja: Shopee, Tokopedia
• Aplikasi keuangan: Dana, OVO
• Website sekolah dan perusahaan
• Aplikasi absensi, kasir, e-learning

Tanpa UI/UX yang baik, aplikasi bisa ditinggalkan pengguna meskipun fiturnya lengkap.

C. Pengertian UI (User Interface)

User Interface (UI) adalah tampilan visual yang dilihat dan digunakan oleh pengguna saat berinteraksi dengan aplikasi atau website.

UI mencakup:

• Tampilan visual
• Warna
• Ikon
• Tombol
• Tata letak (layout)
• Tipografi (jenis huruf)

UI fokus pada: “Bagaimana tampilan aplikasi terlihat?”

Contoh UI:

• Tombol Login
• Menu navigasi
• Warna latar website
• Ikon keranjang belanja
• Form input (username, password)

D. Pengertian UX (User Experience)

User Experience (UX) adalah pengalaman dan kenyamanan pengguna saat menggunakan aplikasi atau website.

UX fokus pada: “Apakah aplikasi ini mudah digunakan dan nyaman?”

UX mencakup:

• Alur penggunaan (user flow)
• Kemudahan memahami fitur
• Kecepatan menemukan informasi
• Kepuasan pengguna

Contoh UX:

• Mudah mencari menu
• Proses checkout cepat
• Tidak membingungkan
• Navigasi jelas

E. Perbedaan UI dan UX

UI	UX
Fokus visual	Fokus pengalaman
Tampilan	Alur dan kenyamanan
Warna, ikon, layout	Logika, struktur, kemudahan
"Cantik"	"Nyaman"

Analogi sederhana:

• UI = Bentuk dan warna motor
• UX = Nyaman atau tidak saat dikendarai

F. Elemen-Elemen UI (Wajib Dikenal Siswa)

1. Layout

Susunan elemen pada halaman seperti header, sidebar, konten, dan footer.

2. Typography (Tipografi)

Jenis dan ukuran huruf yang mempengaruhi kenyamanan membaca.

3. Color (Warna)

Digunakan untuk menarik perhatian, memberi makna, dan membangun identitas.

4. Button

Elemen interaksi utama seperti Login, Submit, dan Bayar.

5. Icon

Simbol visual yang membantu pengguna memahami fungsi dengan cepat.

6. Form & Input

Tempat pengguna memasukkan data dengan jelas dan efisien.

7. Navigation

Menu utama yang membantu pengguna berpindah halaman.

G. Contoh Penerapan UI/UX di Dunia Kerja

Profesi terkait:

• UI Designer
• UX Designer
• Web Designer
• Frontend Developer
• Product Designer

Skill yang dicari industri:

• Logika berpikir
• Kreativitas
• Analisis pengguna
• Komunikasi
• Kerja tim

H. Aktivitas Praktik

1. Buka website Google, Shopee, Tokopedia, atau website sekolah.
2. Amati warna dominan, menu navigasi, tombol utama, dan ikon.
3. Catat elemen UI yang ditemukan serta hal yang membingungkan.

I. Diskusi & Presentasi

Siswa mempresentasikan hasil pengamatan untuk melatih public speaking dan berpikir kritis.

J. Penutup & Refleksi

• UI = tampilan
• UX = pengalaman
• UI/UX penting untuk dunia kerja
• Aplikasi bagus = tampilan + kenyamanan

Skill UI/UX bisa menjadi modal kerja, freelance, bahkan bisnis sendiri.

K. Output Dunia Kerja

Setelah mempelajari materi ini, siswa tidak hanya bisa coding, tetapi juga memahami pengguna dan siap masuk dunia industri.