Belajar Mendesain UI UX Menggunakan Figma untuk Desainer Software

Tentang Kelas

Durasi : 383 menit

Deskripsi

Mengapa program ini penting untuk diikuti?

Perkembangan zaman membuat transformasi teknologi semakin pesat. Sebagian besar kegiatan manusia tentunya tidak luput dari kegiatan berselancar baik di internet, marketplace, maupun memesan makanan secara online. Keindahan dan kerapian dari susunan antarmuka suatu aplikasi ataupun website tentunya menjadi pemandangan sehari-hari. Namun, antarmuka yang indah dengan akses yang rumit, akan membuat pengguna kecewa. Disinilah peran seorang UI/UX Designer untuk menyeimbangkan antara desain antarmuka yang indah dengan fungsionalitas penggunaan dengan mempertimbangkan pengalaman pelanggan. Maka dari itu penting bagi seorang UI/UX Designer untuk menguasai kompetensi tersebut.

Apa tujuan dari program ini?

Program ini bertujuan untuk mempelajari langkah-langkah dalam mendesain user interface dan user experience menggunakan figma. Pengetahuan serta keterampilan yang didapatkan dari program ini dapat bermanfaat untuk memberikan kompetensi bagi peserta yang ingin memulai karier sebagai UI/UX Designer atau meningkatkan kinerja bagi yang sudah berkarier di bidang tersebut.

Apa saja yang akan diajarkan melalui program ini?

Dalam program pelatihan ini peserta akan fokus untuk mempelajari tentang pengenalan dasar okupasi UI/UX Designer, dasar-dasar user flow dan wireframe, merancang user flow dan wireframe, mengimplementasikan user interface, mendesain user interface menggunakan figma, membuat desain prototype dan mock up, merancang user experience, melakukan evaluasi terhadap antarmuka software.

Apa jenis pekerjaan yang relevan dengan program ini?

Peserta yang mengikuti program ini diharapkan mampu mengaplikasikan teori aplikatif dalam pekerjaan yang berhubungan dengan mendesain user interface dan user experience seperti UI Designer, UX Designer, dan UI/UX Designer, dan Desainer Software.

Metode Pembelajaran

Self-paced Learning : Metode ajar yang digunakan adalah ceramah interaktif, studi kasus pembelajaran, demonstrasi dan penugasan

Kuota: Tidak Terbatas

Metode Evaluasi

Pre-test dan/atau Post-test, kuis

Tujuan Pembelajaran

Tujuan Umum

Peserta mampu mengaplikasikan prinsip, prosedur, dan sikap profesional dalam mendesain UI/UX untuk desainer software dengan standar nasional (SKKNI Software Requirement Analysis and Design) dan prosedur yang berlaku.

Tujuan Khusus

1. Peserta mampu mendefinisikan pengertian, karakteristik, perbedaan UI dengan UX, serta peran UI/UX Designer

2. Peserta mampu mengidentifikasi definisi, tujuan, jenis-jenis, dan karakteristik user flow, wireframe, dan kaidah user experience dengan menunjukkan sikap teliti dan berorientasi pada detail

3. Peserta mampu menjelaskan alat dan/atau software/website/aplikasi yang digunakan untuk merancang user flow dan wireframe serta gambaran user flow dan wireframe dengan menunjukkan sikap cermat

4. Peserta mampu menguraikan tahapan dalam merancang user flow dan wireframe dengan menunjukkan sikap kreatif dan inovatif

5. Peserta mampu menguraikan definisi, fungsi, ciri-ciri, dan elemen user interface sesuai dengan kaidah yang berlaku

6. Peserta mampu menguraikan fungsi, tujuan, manfaat, dan fitur yang terdapat pada figma dengan menunjukkan sikap teliti

7. Peserta mampu mendemonstrasikan tahapan dan langkah-langkah dalam mendesain user interface secara keseluruhan dengan memerhatikan kaidah dan prinsip desain serta menunjukkan sikap kreatif dan inovatif

8. Peserta mampu mengimplementasikan poin penting dalam mendesain user interface dengan menunjukkan sikap teliti, solutif, dan analitis

9 .Peserta mampu mengimplementasikan dan mengidentifikasi definisi, manfaat, jenis-jenis, dan karakteristik prototype dan mock up sesuai dengan kaidah yang berlaku dengan menunjukkan sikap cermat

10. Peserta mampu mendemonstrasikan langkah-langkah dan tahapan dalam mendesain prototype dan menambahkan animasi menggunakan figma dengan menunjukkan sikap kreatif, bertanggungjawab, dan teliti

11. Peserta mampu memecahkan masalah dalam perancangan prototype dan mock up dengan menunjukkan sikap analitis, solutif, dan berorientasi pada detail

12. Peserta mampu memilih alat, perlengkapan, dan dokumen penunjang dalam melakukan presentasi prototype kepada pemangku kepentingan dengan menunjukkan sikap teliti dan cermat

13. Peserta mampu melakukan presentasi hasil desain kepada pemangku kepentingan dengan menunjukkan sikap komunikatif, analitis, dan bertanggungjawab

14. Peserta mampu menyatakan pengertian, manfaat, dan fungsi usability testing serta karakteristik usability testing dengan user testing

15. Peserta mampu melakukan tahapan usability testing dengan menunjukkan sikap obyektif

16. Peserta mampu menelaah fungsi dan komponen penting dalam melakukan evaluasi sesuai dengan kaidah yang berlaku dengan menunjukkan sikap teliti

17.Peserta mampu mengevaluasi desain antarmuka dengan staf teknik dengan menunjukkan sikap komunikatif, obyektif, dan detail

18. Peserta mampu mengevaluasi desain antarmuka bersama staf teknik dengan menunjukkan sikap solutif dan analitis

Kurikulum dan Kompetensi

1.TOPIK 1 Pengenalan Dasar Okupasi UI/UX Designer 13 Minutes 18 Seconds

1.1.Urgensi UI/UX Designer di Masa Kini (Video) 3:24

1.2.Tugas dan Tanggung Jawab UI/UX Designer (Video) 4:22

1.3.Prospek Karier UI/UX Designer (Video) 5:32

2.TOPIK 2 Dasar-Dasar User Flow dan Wireframe 39 Minutes 14 Seconds

2.1.Dasar-Dasar Desain Bagian 1 (Video) 7:27

2.2.Dasar-Dasar Desain Bagian 2 (Video) 8:16

2.3.Konsep Dasar User Experience (Video) 4:01

2.4.Konsep Dasar User Flow (Video) 5:39

2.5.Konsep Dasar Wireframe (Video) 3:26

2.6.Contoh User Flow dan Wireframe Bagian 1 (Video) 4:54

2.7.Contoh User Flow dan Wireframe Bagian 2 (Video) 5:31

3.TOPIK 3 Merancang User Flow dan Wireframe 23 Minutes 12 Seconds

3.1.Demonstrasi: Langkah-Langkah Merancang User Flow (Video) 9:50

3.2.Demonstrasi: Tahapan dalam Membuat Wireframe Low-Fidelity Bagian 1 (Video) 5:20

3.3.Demonstrasi: Tahapan dalam Membuat Wireframe Low-Fidelity Bagian 2 (Video) 8:02

4.TOPIK 4 Mengimplementasikan User Interface 39 Minutes 26 Seconds

4.1.Konsep Dasar User Interface (Video) 4:35

4.2.Komponen dalam Merancang User Interface (Video) 6:42

4.3.Studi Kasus: Karakteristik User Interface yang Baik Bagian 1 (Video) 8:32

4.4.Studi Kasus: Karakteristik User Interface yang Baik Bagian 2 (Video) 9:46

4.5.Studi Kasus: Karakteristik User Interface yang Baik Bagian 3 (Video) 9:51

5.TOPIK 5 Mendesain User Interface Menggunakan Figma 163 Minutes 24 Seconds

5.1.Pengenalan Figma (Video) 4:23

5.2.Demonstrasi: Tools pada Figma Bagian 1 (Video) 5:23

5.3.Demonstrasi: Tools pada Figma Bagian 2 (Video) 6:18

5.4.Demonstrasi: Langkah-Langkah Menyusun Layout (Tata Letak) User Interface Bagian 1 (Video) 8:06

5.5.Demonstrasi: Langkah-Langkah Menyusun Layout (Tata Letak) User Interface Bagian 2 (Video) 9:48

5.6.Demonstrasi: Menentukan Warna dan Tipografi yang Sesuai Bagian 1 (Video) 5:38

5.7.Demonstrasi: Menentukan Warna dan Tipografi yang Sesuai Bagian 2 (Video) 9:22

5.8.Demonstrasi: Langkah-Langkah Mendesain UI Kit (Text, Icon, Button, dan Widget) Bagian 1 (Video) 9:22

5.9.Demonstrasi: Langkah-Langkah Mendesain UI Kit (Text, Icon, Button, dan Widget) Bagian 2 (Video) 6:17

5.1.Demonstrasi: Langkah-Langkah Mendesain UI Kit (Text, Icon, Button, dan Widget) Bagian 3 (Video) 8:35

5.11.Demonstrasi: Langkah-Langkah dalam Membuat Wireframe High-Fidelity Bagian 1 (Video) 5:13

5.12.Demonstrasi: Langkah-Langkah dalam Membuat Wireframe High-Fidelity Bagian 2 (Video) 8:26

5.13.Demonstrasi: Cara Mendesain Halaman Register dan Login Menggunakan Figma Bagian 1 (Video) 6:28

5.14.Demonstrasi: Cara Mendesain Halaman Register dan Login Menggunakan Figma Bagian 2 (Video) 9:30

5.15.Demonstrasi: Cara Mendesain Halaman Home Menggunakan Figma (Video) 8:36

5.16.Demonstrasi: Cara Mendesain User Interface Menggunakan Figma (Tahap Finishing) Bagian 1 (Video) 8:35

5.17.Demonstrasi: Cara Mendesain User Interface Menggunakan Figma (Tahap Finishing) Bagian 2 (Video) 9:13

5.18.Demonstrasi: Menambahkan Plugins dan Template Bagian 1 (Video) 8:23

5.19.Demonstrasi: Menambahkan Plugins dan Template Bagian 2 (Video) 9:54

5.2.Demonstrasi: Menambahkan Plugins dan Template Bagian 3 (Video) 8:37

5.21.Studi Kasus: Aspek yang Perlu Diperhatikan dalam Mendesain User Interface (Video) 7:17

6.TOPIK 6 Membuat Desain Prototype dan Mock Up 47 Minutes 2 Seconds

6.1.Konsep Dasar Prototype dan Mock Up (Video) 4:52

6.2.Tools untuk Merancang Prototype dan Mock Up (Video) 3:57

6.3.Demonstrasi: Langkah-Langkah dalam Mendesain Prototype & Menambahkan Animasi Menggunakan Figma Bagian 1 (Video) 5:28

6.4.Demonstrasi: Langkah-Langkah dalam Mendesain Prototype & Menambahkan Animasi Menggunakan Figma Bagian 2 (Video) 6:03

6.5.Studi Kasus: Menganalisis Masalah Desain Prototype Bagian 1 (Video) 5:24

6.6.Studi Kasus: Menganalisis Masalah Desain Prototype Bagian 2 (Video) 5:24

6.7.Demonstrasi: Hal yang Harus Disiapkan Sebelum Presentasi kepada Pemangku Kepentingan (Video) 7:22

6.8.Demonstrasi: Melakukan Presentasi Hasil Desain kepada Pemangku Kepentingan (Video) 8:32

7.TOPIK 7 Merancang User Experience 26 Minutes 31 Seconds

7.1.Usability Testing (Video) 6:46

7.2.Perbedaan Usability Testing dengan User Testing (Video) 4:48

7.3.Demonstrasi: Langkah-Langkah Melakukan Usability Testing Bagian 1 (Video) 7:05

7.4.Demonstrasi: Langkah-Langkah Melakukan Usability Testing Bagian 2 (Video) 7:52

8.TOPIK 8 Melakukan Evaluasi terhadap Antarmuka Software 31 Minutes 18 Seconds

8.1.Tujuan Evaluasi Desain User Interface (Video) 3:59

8.2.Aspek yang Perlu Diperhatikan dalam Melakukan Evaluasi User Interface (Video) 9:04

8.3.Studi Kasus: Kendala dalam Evaluasi Desain User Interface (Video) 7:04

8.4.Demonstrasi: Tahapan dalam Melakukan Evaluasi dengan Staf Teknik Terkait Antarmuka Software (Video) 9:30

Penjelasan Tugas Praktik (Video) 1:41

Aspek Kompetensi

Aspek Pengetahuan

1. Definisi, karakteristik, dan perbedaan UI dengan UX Designer

2. Peran UI/UX Designer

Ada pada materi: Pengenalan Dasar Okupasi UI/UX Designer

3. Kaidah desain

4. Tujuan, fungsi, dan kaidah user experience

5. Definisi, tujuan dan fungsi user flow

6. Jenis-jenis dan karakteristik user flow

7. Definisi, tujuan dan fungsi wireframe

8. Perbedaan low-fidelity dan high fidelity

9. Komponen wireframe

10. Gambaran user flow dan wireframe

Ada pada materi: Dasar-Dasar User Flow dan Wireframe

11. Tahapan dalam merancang user flow

12. Prosedur dalam membuat wireframe low fidelity dan high-fidelity

Ada pada materi: Merancang User Flow dan Wireframe

13. Definisi dan fungsi user interface

14. Elemen yang terdapat pada user interface

15. Ciri-ciri user interface yang baik

Ada pada materi: Mengimplementasikan User Interface

16. Fungsi, tujuan, dan manfaat figma sebagai tools untuk mendesain user interface

17. Fitur-fitur yang terdapat pada figma dan fungsinya

18. Prinsip tata letak

19. Tahapan dalam menyusun layout user interface

20. Prinsip desain

21. Prinsip tipografi

22. Langka-langkah dalam menentukan warna dan tipografi yang sesuai untuk desain user interface

23. Tahapan dalam membuat UI Kit (text, icon, button, dan widget)

24. Tahapan dalam membuat wireframe high-fidelity

25. Tahapan dalam mendesain halaman register, login, dan home

26. Langkah-langkah dalam mendesain user interface secara keseluruhan (fitur yang terdapat pada software)

27. Tahapan dalam menambahkan plugins dan template menggunakan figma

28. Poin penting dalam mendesain user interface

Ada pada materi: Mendesain User Interface Menggunakan Figma

29. Definisi dan manfaat prototype dan mockup

30. Perbedaan prototype dengan mockup

31. Jenis-jenis prototype

32. Karakteristik mockup

33. Alat/software/website/aplikasi yang digunakan untuk membuat prototype dan mockup

34. Tahapan dalam mendesain prototype dengan mempertimbangkan user persona, user journeys, atau aspek lainnya berdasarkan pengalaman pengguna serta menambahkan animasi menggunakan figma

35. Kendala dalam perancangan prototype dan mockup

36. Alat, perlengkapan, dan dokumen penunjang dalam melakukan presentasi prototype kepada pemangku kepentingan

37. Tahapan dalam melakukan presentasi hasil desain kepada pemangku kepentingan

Ada pada materi: Membuat Desain Prototype dan Mock Up

38. Pengertian,manfaat, dan fungsi usability testing

39. Karakteristik dan ciri khas usability testing dengan user testing

40. Prosedur dalam melakukan usability testing

Ada pada materi: Merancang User Experience

41. Fungsi evaluasi desain user interface

42. Komponen penting dalam melakukan evaluasi bersama staf teknik

43. Prosedur dalam melakukan evaluasi desain antarmuka dengan staf teknik

44. Tantangan/contoh masalah dalam melakukan evaluasi desain antarmuka bersama dengan staf teknik

Ada pada materi: Melakukan Evaluasi terhadap Antarmuka Software

Aspek Keterampilan

1. Membedakan user interface dengan user experience

2. Menunjukkan pentingnya okupasi UI/UX Designer

3. Mendeskripsi tanggung jawab dan tugas seorang UI/UX Designer

Ada pada materi: Pengenalan Dasar Okupasi UI/UX Designer

4. Menerapkan kaidah desain

5. Menerapkan kaidah user experience

6. Menerapkan dan mengidentifikasi definisi, tujuan, komponen, dan fungsi user flow dengan wireframe

7. Membedakan low-fidelity dengan high-fidelity

8. Mempertunjukkan gambaran user flow dan wireframe

Ada pada materi: Dasar-Dasar User Flow dan Wireframe

9. Mendesain prototype dan wireframe

Ada pada materi: Merancang User Flow dan Wireframe

10. Menerapkan definisi, fungsi, ciri-ciri dan elemen yang terdapat pada user interface

Ada pada materi: Mengimplementasikan User Interface

11. Mengoperasikan figma

12. Mematuhi kaidah dan prinsip dasar desain

13. Mendesain user interface meliputi UI Kit, halaman register, login, home, sampai tahap finishing

14. Mempraktikkan cara menambahkan plugins dan template menggunakan figma

15. Menyelesaikan masalah dalam mendesain user interface

Ada pada materi: Mendesain User Interface Menggunakan Figma

16. Menerapkan definisi, karakteristik dan jenis-jenis prototype dan mock up

17. Mempersiapkan alat/software/website/aplikasi yang digunakan untuk membuat prototype dan menambahkan animasi menggunakan figma

18. Mengatasi masalah yang berkaitan dengan kendala perancangan prototype dan mock up

19. Mempersiapkan alat, perlengkapan, dokumen penunjang, serta tahapan dalam melakukan presentasi hasil desain kepada pemangku kepentingan

Ada pada materi: Membuat Desain Prototype dan Mock Up

20. Menerapkan konsep dasar usability testing

21. Membedakan usability testing dengan user testing

22. Melakukan tahapan usability testing

Ada pada materi: Merancang User Experience

23. Menerapkan fungsi dan komponen penting dalam evaluasi desain interface

24. Melakukan evaluasi desain antarmuka dengan staf teknik

25. Menyelesaikan masalah dalam menghadapi kendala evaluasi desain antarmuka dengan staf teknik

Ada pada materi: Melakukan Evaluasi terhadap Antarmuka Software

Aspek Sikap

1. Memerhatikan dengan detail definisi, karakteristik, perbedaan user interface dengan user experience, dan peran UI/UX Designer di masa kini

Ada pada materi: Pengenalan Dasar Okupasi UI/UX Designer

2. Memerhatikan dengan detail definisi, tujuan, dan fungsi user flow dengan wireframe; jenis-jenis dan karakteristik user flow, perbedaan low fidelity dengan high-fidelity; komponen wireframe; kaidah desain dan user experience

3. Cermat dalam mengimplementasikan gambaran user flow dan wireframe

Ada pada materi: Dasar-Dasar User Flow dan Wireframe

4. Kreatif dan inovatif dalam membuat rancangan user flow dan wireframe

Ada pada materi: Merancang User Flow dan Wireframe

5. Memerhatikan dengan detail fungsi, elemen, dan ciri-ciri user interface yang baik

Ada pada materi: Mengimplementasikan User Interface

6. Memerhatikan dengan detail fungsi, tujuan, dan manfaat figma, serta cermat dalam penggunaan fitur-fitur figma

7. Kreatif dan inovatif dalam mendesain user interface dan elemen-elemennya

8. Teliti, solutif, dan analitis dalam menyelesaikan masalah terkait poin penting dalam mendesain user interface

Ada pada materi: Mendesain User Interface Menggunakan Figma

9. Memerhatikan dengan detail prinsip dasar prototype dan mock up

10. Kreatif, bertanggungjawab, dan teliti dalam mendesain prototype dan menambahkan animasi menggunakan figma

11. Solutif dan analitis dalam menyelesaikan masalah terkait kendala dalam perancangan prototype dan mock up

12. Teliti dan cermat dalam menyiapkan peralatan dan dokumen penunjang dalam melakukan presentasi prototype kepada pemangku kepentingan

13. Komunikatif, analitis, dan bertanggungjawab dalam melaksanakan tahapan presentasi hasil desain kepada pemangku kepentingan

Ada pada materi: Membuat Desain Prototype dan Mock Up

14. Memerhatikan dengan detail konsep usability testing dan karakteristiknya dengan user testing

15. Obyektif dalam melaksanakan tahapan usability testing

Ada pada materi: Merancang User Experience

16. Memerhatikan dengan detail konsep dasar evaluasi dan poin penting dalam melakukan evaluasi dengan staf teknik

17. Komunikatif, obyektif, dan detail dalam melakukan proses evaluasi dengan staf teknik

18. Solutif dan analitis dalam menyelesaikan masalah evaluasi desain antarmuka dengan staf teknik

Ada pada materi: Melakukan Evaluasi terhadap Antarmuka Software

Fasilitas

1. Ujian/Evaluasi

2. Sertifikat Penyelesaian Digital

3. Sertifikat Kompetensi Digital (*persyaratan berlaku)

4. Webinar (1 x / 1 jam per Minggu)

Jenis Sertifikat

Sertifikat Penyelesaian Pelatihan dan Sertifikat Kelulusan

Jadwal Sesi Konsultasi

Ibnu Hajar Asqolani Senin pukul 16.45-17.45

Instruktur

Ibnu Hajar Asqolani

Ibnu Hajar Asqolani adalah seorang UI/UX Designer di sebuah marketplace B2B. Ia sudah berpengalaman dalam mendesain user interface dan user experience selama lebih dari 4 tahun. Ibnu memulai kariernya sebagai seorang web designer di perusahaan yang sama.

Syarat dan Ketentuan

1. Peserta dengan minimal jenjang pendidikan SMA/SMK

2. Peserta yang memiliki ketertarikan di bidang UI/UX

3. Peserta yang memiliki latar belakang pendidikan Desain Komunikasi Visual, Ilmu Komputer

3. Peserta yang bukan dari latar belakang pendidikan Desain Komunikasi Visual, Ilmu Komputer

4. Peserta yang memiliki perangkat dan jaringan internet

Penukaran Kode Voucher

1. Masuk ke link web https://upskill.cakap.com/tukar-kode-belajar
2. Registrasikan dirimu
3. Masukan kode belajar dari pembelian kamu
4. Klik tombol "Tukar Kode"

Atau

1. Download aplikasi pada link https://bit.ly/CakapTokopedia
2. Lakukan registrasi dengan mengisi data kamu
3. Jika sudah masuk ke aplikasi, masukan kode voucher dan klik "redeem"