Merancang Tampilan Visual Produk bagi Desainer Website (UI Designer)

Tentang Kursus

PERHATIAN!

  1. Kursus yang dibeli dengan menggunakan Kartu Prakerja tidak dapat dipindahtangankan dan hanya bisa diambil oleh pemegang Kartu Prakerja yang bersangkutan. Kursus yang dipindahtangankan dapat berakibat tidak dikeluarkannya sertifikat penyelesaian dan/atau tidak dibayarkannya insentif oleh Pemerintah.
  2. Jika kamu pengguna Kartu Prakerja, harap gunakan nama, alamat email, dan nomor HP yang sama dengan yang kamu gunakan ketika mendaftar Kartu Prakerja.
  3. Syarat Kelulusan: Mengakses semua materi belajar, menyelesaikan kuis di setiap perpindahan dari satu sesi/modul ke sesi/modul lainnya (minimum passing grade 80%) dan menyelesaikan tes akhir (minimum passing grade 60%).
  4. Kursus yang sudah dibeli/sudah melakukan pembayaran melalui Prakerja atau pembayaran lainnya tidak dapat dibatalkan dan/atau direfund.

 

Deskripsi:

Mengapa program ini penting untuk diambil?

Program ini mengajarkan kepada peserta mengenai teknik aplikatif yang dapat dilakukan untuk menjadi seorang UI designer/desainer tampilan antarmuka pengguna. Manfaat yang diberikan adalah peserta dapat menguasai konsep dasar pada desain UI, dimulai dari pengetahuan dasar desain visual, pengertian desain UI, fungsi dan pentingnya desain UI, komponen pembentuk user interface, karakteristik desain UI yang baik, perbedaan UI dan UX Designer, prinsip dasar desain UI, teknik tipografi, teknik prototipe, dan penggunaan alat untuk membuat sebuah desain UI. Program ini memberikan pengalaman belajar yang sesuai konteks kehidupan peserta. Di dalam program ini penjelasan yang diberikan akan disertai dengan contoh-contoh nyata berdasarkan pengalaman fasilitator selama menjadi seorang UI designer. Program ini menyediakan berbagai aktivitas belajar yakni menonton video, membaca infografis, serta terdapat kuis antartopik yang dapat mengukur tingkat pemahaman peserta.

 

Apa saja yang akan diajarkan melalui program ini?

Pada program ini, peserta akan mendapatkan pemaparan mengenai konsep dasar desain UI, prinsip dasar desain UI, tipografi, penggunaan alat desain UI pada figma, prototipe, dan pembahasan mengenai berkarir sebagai UI designer.

 

Apa kompetensi yang disasar pada program ini dan urgensi kompetensi tersebut?

Kompetensi yang disasar adalah membuat tampilan visual antarmuka pengguna pada sebuah website. Seiring dengan meningkatnya industri kreatif di pasar global saat ini, peluang untuk berkarir sebagai UI designer pun semakin tinggi. Salah satu peran dan tanggung jawab dari seorang UI designer adalah mengimplementasikan desain untuk aplikasi atau perangkat lunak sesuai dengan prinsip desain UI. Oleh karena itu, seorang UI designer perlu memiliki pemahaman yang cukup mengenai dasar-dasar desain UI, prinsip desain UI, serta beberapa teknik dalam membuat sebuah desain UI.

 

Apa peluang okupasi yang akan diajar?

Berdasarkan KBJI 2166.10, okupasi yang akan diajar adalah Desainer Website. Desainer website adalah seorang yang bekerja sebagai pembuat rancangan website. Desainer website bekerja dengan membuat rancangan layout website, membuat bentuk visualnya, mengkonversi agar bisa dijalankan dengan baik di web browser, mengatur tata letak elemen-elemen yang ada di sebuah website sesuai dengan bentuk visual yang sudah dibuat sebelumnya, dan memberi efek tambahan yang diperlukan untuk menunjang tampilan website.

 

Tujuan Umum:

Peserta mampu menerapkan prinsip desain User Interface (UI) dalam membuat tampilan visual antarmuka pengguna sebuah produk dengan baik.

 

Tujuan Khusus: 

  • Memahami konsep dasar desain antarmuka pengguna
  • Memahami prinsip dasar desain antarmuka pengguna 
  • Memahami teknik tipografi untuk mendesain
  • Mampu menggunakan figma sebagai alat desain antarmuka pengguna
  • Mampu membuat prototipe menggunakan aplikasi figma 
  • Memahami persiapan yang diperlukan untuk menjadi desainer tampilan antarmuka pengguna
  • Mampu menunjukkan sikap profesional dalam berkarir sebagai desainer tampilan antarmuka pengguna.

 

Aspek Kompetensi: 

Pengetahuan (Knowledge):

  1. Memahami Konsep Dasar Desain UI (Topik Mengenal Desain UI)
    •  Video: Berkenalan dengan Desain Visual (00:00-06:07)
    •  Video: Apa itu Desain UI? (00:00-05:34)
    •  Video: Fungsi & Mengapa Desain UI Penting (00:00-05:02)
    •  Video: Komponen Pembentuk User Interface (00:00-07:53)
    •  Video: Karakteristik Desain UI yang Baik (00:00-08:39)
    •  Video: Perbedaan UI dengan UX (00:00-05:35)
    •  Infografis: Kamus Kosa Kata Desain UI
  2. Memahami Prinsip Dasar Desain UI (Topik Dasar-dasar Desain UI)
    •  Video: Prinsip Dasar Desain UI (00:00-04:26)
    •  Video: Konsistensi dalam Desain UI (00:00-05:33)
    •  Video: Desain yang Jelas dan Informatif (00:00-05:11)
    •  Video: Kontrol yang Mudah untuk Pengguna (00:00-05:42)
    •  Video: Tata Letak yang Efisien (00:00-05:14)
    •  Video: Hierarki Visual yang Kuat (00:00-05:10)
    •  Video: Kenyamanan Berinteraksi (00:00-04:10)
  3. Memahami Teknik Pewarnaan pada Desain UI (Topik Dasar-dasar Desain UI)
    •  Video: Coloring: Menentukan Warna (00:00-09:25)
    •  Video: Coloring: Memvariasikan Warna (00:00-08:09)
    •  Video: Coloring: Background Cerah atau Gelap? (00:00-08:18)
  4.  Memahami Teknik Tipografi untuk Mendesain (Topik Tipografi)
    •  Video: Tentang Tipografi (00:00-08:40)
    •  Video: Memilih Font untuk Desainmu (00:00-05:39)
    •  Video: Menata Teks dalam Desainmu (00:00-06:13)
    •  Talk Show: Tipografi pada Desain UI Bagian 1 (00:00-9:23)
    •  Talk Show: Tipografi pada Desain UI Bagian 2 (00:00-08:39)
  5.  Memahami Pengertian, Kelebihan, Kekurangan, dan Cara Penggunaan Aplikasi Figma (Topik Figma)
    •  Video: Pengenalan Figma (00:00-10:13)
    •  Talk Show: Figma (00:00-09:14)
  6.  Memahami Pengertian, Fungsi, Keuntungan, dan Jenis-jenis Prototipe (Topik Prototipe)
    •  Video: Berkenalan dengan Prototipe (00:00-09:44)
    •  Video: High Fidelity Prototype (00:00-09:52)
    •  Video: Interactive Prototype (00:00-08:29)
    •  Talk Show: Membuat Prototipe Produk (00:00-09:43)
    •  Infografis: Prototipe
  7.  Memahami Persiapan yang Diperlukan untuk Menjadi Desainer Tampilan Antarmuka (Topik Menjadi UI Designer/Desainer Tampilan Antarmuka Pengguna)
    •  Video: Membuat Desain Portofolio mu! (00:00-10:25)
    •  Video: Presentasikan Desainmu (00:00-09:09)
    •  Video: Developer Handoff (00:00-10:38)
    •  Talkshow: Berkarier sebagai UI Designer Bagian 1 (00:00-10:59)
    •  Talkshow: Berkarier sebagai UI Designer Bagian 2 (00:00-10:59).

Keterampilan (Skill):

  1.  Mampu Menggunakan Figma sebagai Alat Desain UI (Topik Figma)
    •  Video: Figma Tutorial: Pengenalan Bagian 1 (00:00-07:44)
    •  Video: Figma Tutorial: Pengenalan Bagian 2 (00:00-03:36)
    •  Video: Figma Tutorial: Mendesain Komponen Bagian 1 (00:00-06:24)
    •  Video: Figma Tutorial: Mendesain Komponen Bagian 2 (00:00-05:04)
    •  Video: Figma Tutorial: Mendesain Set Layar Aplikasi Bagian 1 (00:00-04:48)
    •  Video: Figma Tutorial: Mendesain Set Layar Aplikasi Bagian 2 (00:00-05:50)
  2.  Mampu Membuat Prototipe Menggunakan Aplikasi Figma (Topik Prototipe)
    •  Video: Membuat High Fidelity Prototype dengan Figma Bagian 1 (00:00-04:49)
    •  Video: Membuat High Fidelity Prototype dengan Figma Bagian 2 (00:00-05:36)
    •  Video: Membuat Interactive Prototype dengan Figma (00:00-05:02).

Sikap (Attitude): 

  1.  Mampu menunjukkan sikap profesional dalam berkarir sebagai Desainer Tampilan Antarmuka Pengguna
    •  Video: Tugas dan Tanggung Jawab Seorang UI Designer (00:00-04:51)
    •  Video: Kemampuan yang Harus dimiliki Seorang UI Designer (00:00-04:32)
    •  Talkshow: Berkarir sebagai UI Designer Bagian 1 (00:00-10:59)
    •  Talkshow: Berkarir sebagai UI Designer Bagian 2 (00:00-10:59)
  2.  Mampu menunjukkan sikap empati dalam berkarir sebagai UI Designer/Desainer Tampilan Antarmuka Pengguna
    •  Video: Kemampuan yang Harus dimiliki Seorang UI Designer (00:00-04:32).

 

Materi Pelatihan: 

  1. Mengenal Desain UI (73 menit) 
    • Berkenalan dengan Desain Visual (video pemaparan) 6 menit
    • Apa itu Desain UI (video pemaparan) 5 menit
    • Fungsi dan Mengapa Desain UI Penting (video pemaparan) 5 menit
    • Komponen Pembentuk User Interface (video pemaparan) 7 menit
    • Yuk Identifikasi Komponen Pembentuk User Interface! (praktik mandiri) (5 menit)
    • Karakteristik Desain UI yang Baik (video pemaparan) 8 menit
    • Perbedaan Desain UI dan UX (video pemaparan) 5 menit
    • User Interface vs User Experience (praktik mandiri) (5 menit)
    • Tugas dan Tanggung Jawab Seorang UI Designer (Video pemaparan) 4 menit
    • Keterampilan yang Harus Dimiliki Soerang UI Designer (video pemaparan) 4 menit
    • Fakta atau Opini? (praktik mandiri) (5menit)
    • Kamus Kosa Kata Desain UI (infografis) 3 menit
    • Mengingat Kembali Kosa Kata pada Dunia Desain UI (praktik mandiri) (5 menit)
    • Rangkuman Topik Mengenal Desain UI (ebooklet) 5 menit
  2. Dasar-dasar Desain UI (68 menit)
    • Prinsip Dasar Desain UI (video pemaparan) 4 menit
    • Konsisten dalam Desain UI (Video Pemaparan) 5 menit
    • Desain yang Jelas dan Informatif (Video Pemaparan) 5 menit
    • Kontrol yang Mudah untuk Pengguna (video pemaparan) 5 menit
    • Tata Letak yang Efisien (video pemaparan) 5 menit
    • Hierarki visual yang kuat (video Pemaparan) 5 menit
    • Kenyamanan Berinteraksi (menonton video pemaparan) 4 menit
    • Coloring : Menentukan Warna (video pemaparan) 9 menit
    • Coloring : memvariasikan warna (video pemaparan) 8 menit
    • Mengingat Kembali Warna untuk Divariasikan (aktivitas interaktif) (5 menit)
    • Coloring : background cerah atau gelap (video pemaparan) 8 menit
    • Rangkuman dasar-dasar desain UI (ebooklet) 5 menit
  3. Tipografi (44 menit) 
    • Tentang tipografi (video pemaparan) 8 menit
    • Memilih Font untuk Desainmu (video pemaparan) 5 menit
    • Menata Teks dalam Desainmu (video pemaparan) 6 menit 
    • Talk Show : Tipografi dalam Desain UI Bagian 1 (video pemaparan) 9 menit
    • Talk Show : Tipografi dalam Desain UI Bagian 2 (video pemaparan) 8 menit
    • Typeface vs Font (aktivitas interaktif) (5 menit)
    • Rangkuman Topik Tipografi (ebooklet) 3 menit 
  4. Figma (54 menit) 
    • Pengenalan Figma (video pemaparan) 10 menit
    • FIgma Tutorial : pengenalan Bagian 1 (video pemaparan) 7 menit 
    • FIgma Tutorial : pengenalan Bagian 2 (video pemaparan) 3 menit 
    • Figma Tutorial : Mendesain Komponen bagian 1 (video pemaparan) 6 menit
    • Figma Tutorial : Mendesain Komponen bagian 2 (video pemaparan) 5 menit
    • Urutkan Langkah Set Up Akun Figma (aktivitas interaktif) (5 menit)
    • Figma Tutorial : Mendesain Set Layar Aplikasi bagian 1 (video pemaparan) 4 menit
    • Figma Tutorial : Mendesain Set Layar Aplikasi bagian 2 (video pemaparan) 5 menit
    • Talk show : Figma (video pemaparan) 9 menit
  5. Prototipe (61 menit) 
    • Berkenalan dengan prototipe (video pemaparan) 9 menit 
    • Prototipe (infografis) 2 menit
    • High FIdelity Prototype (video pemaparan) 9 menit 
    • membuat High Fidelity Prototype dengan Figma bagian 1 (video pemaparan) 4 menit
    • Membuat High Fidelity Prototype dengan Figma bagian 2 (video pemaparan) 5 menit
    • Interactive Prototype (video Pemaparan) 8 menit
    • Membuat Interactive Prototype dengan Figma (Video Pemaparan) 5 menit 
    • Talk Show : Membuat Prototipe Produk (video pemaparan) 9 menit 
    • Rangkuman Topik Prototipe (ebooklet) 5 menit 
  6. Menjadi UI Designer/Desainer Tampilan Antarmuka Pengguna (61 menit) 
    • Membuat Desain Portofoliomu (video pemaparan) 10 menit
    • Presentasikan Desainmu (video pemaparan) 9 menit 
    • Developer Handoff (video pemaparan) 10 menit 
    • Teka Teki Silang (TTS) Desain UI (aktivitas interaktif) 5 menit
    • Talk Show Berkarier sebagai UI Designer bagian 1 (video pemaparan) 10 menit 
    • Talk Show Berkarier sebagai UI Designer bagian 2 (video pemaparan) 10 menit 
    • Kembali Mengulas Seputar UI Designer (aktivitas interaktif) (5 menit)
    • Rangkuman Topik menjadi UI Designer/Desainer Tampilan Antarmuka Pengguna (ebooklet) 2 menit.

 

Target Peserta:

  • Pelatihan ini dapat diikuti oleh peserta yang memiliki minat untuk membangun karir sebagai UI Designer/Desainer Tampilan Antarmuka Pengguna. 
  • Tidak ada keahlian awal yang diperlukan. 
  • Pendidikan minimal setara SMA, dan memiliki komputer atau laptop. 
  • Tingkat kesulitan pelatihan ini adalah tingkat pemula/tingkat dasar.

 

Durasi:

Topik Durasi
Mengenal Desain UI 73 menit
Dasar-dasar Desain UI  68 menit
Tipografi  44 menit
Figma 54 menit
Prototipe 61 menit
Menjadi UI Designer/Desainer Tampilan Antarmuka Pengguna 61 menit
Total Durasi 361 menit

 

Level:

Basic 

 

Metode Pembelajaran:

Self Paced Learning: Metode ajar yang digunakan adalah menggunakan kombinasi antara ceramah, studi kasus, dan simulasi.

 

Metode Evaluasi:

  • Pre Test
  • Post Test
  • Formative Test/Kuis
  • Tugas Praktik

 

Jenis/Klasifikasi Sertifikat:

Peserta yang telah menyelesaikan semua kegiatan pembelajaran akan mendapatkan Sertifikat Penyelesaian jika nilai akhir di bawah 60 dan akan mendapatkan Sertifikat Kompetensi Lulus jika nilai akhir di atas 60.

 

Sesi Konsultasi:

Setiap Hari Jumat Pukul 16.00-17.00, Via LMS.

 

Apa Yang Perlu Kamu Persiapkan?

Kamu hanya perlu mempersiapkan laptop/notebooktablet, atau smartphone dengan koneksi Internet.

 

Fitur:

  • Digital content material: Peserta bisa mengakses material belajar digital selama nya
  • Sertifikat penyelesaian: Peserta yang telah menyelesaikan semua kegiatan pembelajaran yang dipersyaratkan dalam kursus online akan menerima Sertifikat Penyelesaian (Certificate of Completion).
  • Test akhir: tersedia
  • Forum diskusi: tidak tersedia
  • Online session: tersedia
  • Offline meet-up: tidak tersedia

 

Cara Reedem Voucher:

  1. Langkah 1 : Log in ke prakerja.karier.mu
  2. Langkah 2 : Klik "tukarkan kode voucher" atau masuk ke https://www.prakerja.karier.mu/tukar-voucher
  3. Langkah 3 : Masukkan kode voucher pada kolom yang tersedia 
  4. Langkah 4 : Klik Tukar Kode Voucher
  5. Langkah 5 : Klik Mulai Belajar dan program yang dibeli dapat dilihat juga pada menu Programmu

Penyelenggara Kursus

Kariermu

Karier.mu adalah platform pengembangan karier, yang menyediakan beragam program untuk mengakselerasi setiap individu mencapai titik terbaik dalam karirnya dengan memberikan akses terhadap industri dan ahli.


Para Instruktur

Merancang Tampilan Visual Produk bagi Desainer Website (UI Designer)

oleh Kariermu
KATEGORI IT, Programming, Terbaru
KLASIFIKASI Pelatihan
METODE Full Online Learning
DURASI 6 hours
KAPASITAS PESERTA 500 Orang

HARGA

Rp500.000

Merancang Tampilan Visual Produk bagi Desainer Website (UI Designer)

Rp500.000
KATEGORI IT, Programming, Terbaru
KLASIFIKASI Pelatihan
METODE Full Online Learning
DURASI 6 hours
KAPASITAS PESERTA 500 Orang

Ulasan

5.0/5

5 Ulasan

  • 5
  • 4
  • 3
  • 2
  • 1

AR

Prakerja

ARIF AULIA RACHMAN

1 year ago

Materi menarik, penyampaian cukup mudah dipahami.

MS

Prakerja

MUHAMMAD SUHAIMI

1 year ago

sangat bermanfaat

EP

Prakerja

ELVITRY RUSPITA PURBA

1 year ago

Materinya mudah dipahami dan dipraktekkan.

AR

Prakerja

AGUNG RIYANTO

1 year ago

Semoga tambah jaya yaaa pintar

MZ

Prakerja

MASTITA BIBSY ZAINNAHAR

1 year ago

Sangat membantu, materi tentang UI Design disampaikan dengan struktur yang baik sehingga sangat mudah dipahami, terima kasih..