UI/UX merupakan istilah yang muncul pada tahun 1993 oleh Donald Norman yang bekerja di Apple Computers. UI/UX membahas tentang antarmuka pengguna (UI) dan pengalaman pengguna (UX) dalam berinteraksi dengan suatu produk digital. UI/UX memainkan peran penting dalam proses pembuatan produk digital dengan mengikuti proses design thinking untuk memahami kebutuhan pengguna. Figma merupakan salah satu alat desain yang sering digunakan untuk memulai

1. Fundamental of UI/UX
Mochamad Mufid Abiyyu
UI/UX Class #1
@mochamadmufidd
linkedin.com/in/mochamad-mufid-abiyyu/

2. What will we learn
today…
● Latar Belakang UI/UX
● Definisi dari UI/UX
● Peran UI/UX di dunia digital
● Pengenalan Design Thinking
● Pengenalan Design Tools

3. Kapan sih istilah UI/UX itu muncul?
Pertama, Kita mulai dulu nih dari latar belakang UI/UX

4. Latar Belakang UI dan UX
Istilah UX diciptakan pada tahun 1993 oleh seorang
psikolog dan ilmuwan kognitif yaitu, Donald Norman
yang pada saat itu bekerja di Apple Computers.
UI/UX bukan singkatan dari
universitas tertentu ygy…

5. Terus, UI/UX itu apa dong?
Lesgo kita bahas!
Nah kita udah bahas latar belakang dari UI/UX

6. Definisi UI dan UX
Secara istilah, UX berarti pengalaman pengguna.
Yaitu bagaimana pengguna dari suatu produk
berinteraksi dengan produk tersebut.
Misal, Bambang lebih nyaman menggunakan produk A
karena simple, mudah digunakan, dan dapat sesuai
dengan kebutuhannya.
UX (User Experience)

7. Definisi UI dan UX
Secara istilah, UI berarti antarmuka pengguna . Yaitu
bentuk tampilan grafis yang ada pada perangkat atau
produk yang dilihat dan berhubungan dengan
pengguna.
Misal, tampilan beranda aplikasi B sangat simple dan
enak dipandang.
UI (User Interface)

8. Nah ternyata UI/UX ini punya peran penting loh di dunia
digital
Tapi sebelum itu, kita bahas dulu nih
dunia digital itu apa

9. Sebagian dari kita pasti kebayang
soal HP, Laptop, atau aplikasi online!
Peran UI/UX di dunia digital
Yap~ Nggak salah kok! Ungkapan kata digital memang merujuk pada
penggunaan teknologi semacam itu.
Dunia digital itu sendiri berarti, penggambaran tentang aktivitas
manusia modern yang melakukan kegiatan sehari-hari melalui
pemanfaatan teknologi.

10. Terus, hubungannya sama UI/UX apa?

11. Sebelum itu, ada tiga aspek nih dari
dunia digital
Peran UI/UX di dunia digital
1.Goods (Barang)
2.Service (Layanan)
3.Human (Manusia)

12. Sebuah produk tentu melalui proses
pembuatan. Nah, UI/UX berperan dalam
proses pembuatan tersebut.
Peran UI/UX di dunia digital

13. That’s why UX itu penting untuk sebuah
produk. Becoz…
Peran UI/UX di dunia digital
Design yang baik pastinya akan menghasilkan produk yang baik.
Sebaliknya, design yang buruk akan menghasilkan produk yang buruk

14. Role UI/UX
Peran UI/UX di dunia digital
● UI/UX Designer
● UX Designer
● UI Designer
● Visual Designer
● UX Researcher
● UX Writer
● UX Engineer
● UX Strategist

15. Kita lanjut bahas gimana sih proses
UX itu…
Nah setelah kita tau apa dan mengapa UX itu penting

16. Kuncinya adalah…
Design Thinking sebagai Mindset
Pengenalan Design Thinking
Design Thinking adalah serangkaian proses kognitif, strategis, dan praktis
dalam desain suatu produk. Digunakan untuk memecahkan masalah dan
menciptakan solusi inovatif dengan memahami pengguna dan
kebutuhannya.

17. Design Thinking memiliki 5 fase…
Pengenalan Design Thinking

18. Penerapan Design Thinking memiliki
beberapa kegunaan, yaitu:
Pengenalan Design Thinking
1.Memahami kebutuhan pengguna.
2.Menghasilkan produk yang indah dipandang dan mudah digunakan.
3.Menghasilkan produk yang dapat menjadi solusi permasalahan manusia.
4.Mengurangi resiko penolakan produk oleh pengguna.

19. Terus, biasanya pake aplikasi apa
untuk memulai proses UX?

20. Pengenalan Figma
Ini dia…

21. Pengenalan Figma
Kenapa Figma?
1.Fiturnya udah cukup lengkap untuk kebutuhan UI/UX
Designer
2.Komunitasnya aktif
3.Gak harus di download dan install

22. Pengenalan Figma
Oke pengenalannya
udah, yuk kita langsung
praktek ae…
Klik disini untuk menuju ke figma

23. Design is not just what it looks
like and feels like. Design is
how it works.
- Steve Jobs

24. Pengenalan Figma
Lanjut …
Main Games :D
Link games

25. Pengenalan Figma
Post-Test
Link Post-Test

26. Thank You!!!