MATA PELAJARAN UI/UX

MULOK

Ganjil

#1

2025

Profile

EGI SAMSUL MU’ARIF, S.Pd.

Guru UI/UX, PEMROGRAMAN WEB & PERANGKAT BERGERAK (PWPB)

UI/UX

PENGALAMAN KERJA

​

2019 - 2021 (FLEAVA - FRONTEND + DEVOPS)

2021 - SEKARANG (GURU PPLG SMKN 4 KUNINGAN)

PENDIDIKAN TERAKHIR

​

S1 PENDIDIKAN TEKNIK INFORMATIKA (UNDIKSHA)

PENGALAMAN PROJECT

​

ARC

JANNATA

LHM

NATYA

LKH

ALL FLEAVA SERVER

TITIPKU BLOG

DAN LAINNYA….

2

Agenda

01

02

03

04

05

06

Pengantar UI dan UX

Apa itu UI (User Interface)

Apa itu UX (User Experience)

Perbedaan UI/UX

Contoh Aplikasi

Project

UI/UX

3

Tujuan Pembelajaran Pengantar UI dan UX

UI/UX

​

• Menjelaskan pengertian UI dan UX.
• Membedakan UI dan UX melalui contoh nyata.
• Menunjukkan aplikasi dengan desain UI/UX yang baik.

​

​

4

Apa itu UI

(User Interface)?

UI/UX

​

• Tampilan visual dari aplikasi atau website.
• Meliputi tombol, warna, ikon, dan layout.
• UI adalah apa yang dilihat dan disentuh pengguna.

Month 🞹 Year 🞹 5

5

Apa itu UX

(User Experience)?

Confidential

• Pengalaman dan kenyamanan saat menggunakan aplikasi.
• UX mencakup alur, kemudahan, dan kepuasan pengguna.
• UX adalah apa yang dirasakan pengguna.

6

Perbedaan UI dan UX

UI

Confidential

UX

• UI fokus pada tampilan
• UI = elemen visual
• UI tanpa UX bisa indah tapi bisa membingungkan.

• UX fokus pada pengalaman
• UX = alur dan kenyamanan
• UX membuat website atau App mudah dipahami.

7

Analogi Sederhana

Confidential

• UI = Dashboard dan warna mobil.
• UX = Kenyamanan dan kemudahan saat mengemudi.
• Keduanya penting agar mobil nyaman dan menarik.

8

Contoh Aplikasi Populer

Confidential

9

Aktivitas Siswa

Confidential

Diskusi kelompok kecil:

- Aplikasi dengan UI bagus.

- Aplikasi yang UX-nya membingungkan.

Presentasikan hasil diskusimu di kelas.

​

10

Refleksi

Confidential

Apakah UI dan UX harus selalu ada?

Apa perbedaan utama UI dan UX?

#1

#2

11

Kesimpulan

Confidential

UI = yang dilihat, UX = yang dirasakan.

UI dan UX harus bekerja sama.

Desain yang baik = menarik + nyaman digunakan.

12

TERIMAKASIH

MULOK

Ganjil

#1

2025