Merancang Tampilan Visual Website (UI Design) dengan Figma bagi Desainer Website

Tentang Kelas

Durasi: 427 menit

Deskripsi

Desainer website adalah orang yang diharapkan mampu membuat desain website yang menarik dan juga bisa menghasilkan pengalaman positif dari konsumen, sehingga bisa berlanjut pada pertumbuhan revenue dan kesuksesan bisnis. Untuk kamu yang ingin berkarir sebagai UI designer, kamu bisa mendalami tentang UI design di kelas ini. Karena di kelas ini, kamu akan belajar dari dasar, mulai dari mengenal apa UI dan peran UI designer dalam pengembangan website sampai membuat suatu high fidelity prototype.

Metode Pembelajaran

Self Paced Learning

Metode ajar yang digunakan adalah ceramah interaktif, roleplay, dan bahan bacaan dengan penugasan praktek

Kuota Kelas: Tidak Terbatas

Metode Evaluasi

• Kuis
• Post Test
• Tugas Praktek

Tujuan Pembelajaran

Tujuan Umum

Peserta mampu menampilkan penguasaan minimal 75% dalam perancangan desain website menggunakan Figma sesuai standar kompetensi nasional saat mengerjakan tugas praktik mandiri

Tujuan Khusus

1. Peserta mampu menjelaskan konsep user interface (tampilan visual) dalam sebuah website

2. Peserta mampu menjabarkan komponen visual dalam sebuah desain

3. Peserta mampu membedakan teknik prototyping seperti paper prototype, low fidelity prototype, dan high fidelity prototype

4. Peserta mampu menerapkan prinsip Gestalt dalam desain website

5. Peserta mampu menggunakan Figma untuk membuat desain website toko online

6. Peserta mampu menambahkan interaksi dalam prototipe desain website toko online

7. Peserta mampu melakukan export prototipe desain website menggunakan mockup

8. Peserta mampu melakukan evaluasi desain website

9. Peserta mampu bersikap cermat dalam menambahkan interaksi antar halaman prototipe

10. Peserta mampu bersikap kreatif dalam mendesain website toko online

Kurikulum dan Kompetensi

1. Pengenalan User Interface dalam Sebuah Website 0:30:17

1.1. Gambaran Isi Kelas (video) 0:04:36

1.2. Pengenalan Macam-Macam UI (video) 0:05:27

1.3. Beda UI Mobile dengan Website dan Tools Membuat UI (video) 0:06:35

1.4. UI vs UX: Apa Perbedaannya? (video) 0:05:47

1.5. Peran UI Designer dalam Siklus Pengembangan Produk (video) 0:07:52

2. Komponen Visual Desain 1:02:37

2.1. Elemen Dasar UI: Screen dan Grid (video) 0:08:46

2.2. Elemen Dasar UI: Spacing Methods dan Shadow (video) 0:05:41

2.3. Typeface pada UI Design (video) 0:04:00

2.4. Font Size dan Space (video) 0:06:35

2.5. Tipografi: Font Pairing sampai Font Colors (video) 0:06:08

2.6. Pengenalan Ikon (video) 0:03:44

2.7. Prinsip Penggunaan Ikon (video) 0:07:16

2.8. Ilustrasi dan Foto (video) 0:09:49

2.9. Teori Warna: Hue, Saturation, dan Value (video) 0:04:06

2.10. Warna: Pertimbangan dalam Menentukannya (video) 0:06:32

3. Prinsip dalam Penerapan Komponen Visual Desain 0:45:42

3.1. Prinsip Gestalt: Proximity (video) 0:05:32

3.2. Prinsip Gestalt: Similarity sampai Closure (video) 0:06:27

3.3. Prinsip Gestalt: Symmetry sampai Common Fate (video) 0:06:33

3.4. Bedah UI Website 1&2 (video) 0:08:55

3.5. Bedah UI Website 3&4 (video) 0:08:41

3.6. Bedah UI Website 5 (video) 0:05:04

3.7. Interaction Design dalam UI dan Komponennya (file bacaan) 0:04:30

4. Teknik Prototyping 0:16:41

4.1. Paper Prototype (video) 0:06:19

4.2. Low Fidelity Prototype (video) 0:04:35

4.3. High Fidelity Prototype (video) 0:05:47

5. Pengenalan Figma 0:32:44

5.1. Tools Membuat Prototipe: Sketchapp dan Adobe XD (video) 0:06:44

5.2. Tools untuk Membuat Prototipe: Figma (video) 0:04:19

5.3. Fitur, Tools Dasar, dan Vektor Network (video) 0:08:46

5.4. Figma: Tools Desain yang Unggul (video) 0:09:25

5.5. Plugin Figma terbaik untuk UI Designer (file bacaan) 0:03:30

6. High-Fidelity Prototype Website: Persiapan Header 0:37:45

6.1. Membuat UI Bagian Home: Persiapan (video) 0:04:45

6.2. Membuat UI Bagian Home: Asset (video) 0:05:59

6.3. Membuat UI Bagian Home: Frame & Grid (video) 0:08:18

6.4. Membuat UI Bagian Home: Color & Font Style (video) 0:08:27

6.5. Membuat UI Bagian Home: Wireframe (video) 0:05:57

6.6. Membuat UI Bagian Home: Logo pada Wireframe (video) 0:04:19

7. High-Fidelity Prototype Website: Membuat Header 0:43:22

7.1. Membuat UI Bagian Home: Header (video) 0:06:55

7.2. Membuat UI Bagian Home: Head Banner (video) 0:07:52

7.3. Membuat UI Bagian Home: Teks pada Head Banner (video) 0:02:33

7.5. Membuat UI Bagian Home: Button pada Head Banner (video) 0:07:43

7.6. Membuat UI Bagian Home: Carousel (video) 0:08:01

7.7. Membuat UI Bagian Home: End Year Sale (video) 0:03:28

7.8. Membuat UI Bagian Home: Teks pada Card Box (video) 0:06:50

8. High-Fidelity Prototype Website: Body pada Home 0:47:18

8.1. Membuat UI Bagian Home: Card Product (video) 0:08:27

8.2. Membuat UI Bagian Home: Key Features (video) 0:07:37

8.3. Membuat UI Bagian Home: Categories (video) 0:09:31

8.4. Membuat UI Bagian Home: Best Seller Product (video) 0:06:45

8.5. Membuat UI Bagian Home: Footer (video) 0:08:18

8.6. Membuat UI Bagian Home: Subscribe (video) 0:06:40

9. High-Fidelity Prototype Website: Product Page 0:28:21

9.1. Membuat UI Bagian Product Page: Layout Produk (video) 0:04:18

9.2. Membuat UI Bagian Product Page: Grid (video) 0:06:04

9.3. Membuat UI Bagian Product Page: Thumbnail Produk (video) 0:09:04

9.4. Membuat UI Bagian Product Page: Detail Produk (video) 0:08:55

10. High-Fidelity Prototype Website: Checkout Page 0:37:21

10.1. Membuat UI Bagian Checkout Page: Header (video) 0:03:30

10.2. Membuat UI Bagian Checkout Page: Detail Header (video) 0:06:49

10.3. Membuat UI Bagian Checkout Page: Detail produk (video) 0:08:02

10.4. Membuat UI Bagian Checkout Page: Detail Pembayaran (video) 0:02:42

10.5. Membuat UI Bagian Checkout Page: Ringkasan Belanja (video) 0:07:27

10.6. Membuat UI Bagian Checkout Page: Metode Pembayaran (video) 0:08:51

11. Menambahkan Interaksi dalam Prototipe 0:15:23

11.1. Menambahkan Interaksi dalam Prototipe: Bagian Home (video) 0:09:05

11.2. Menambah Interaksi dalam Prototipe: Product Page (video) 0:06:18

12. Export dan Evaluasi Desain UI 0:20:55

12.1. Export Desain Menggunakan Mockup (video) 0:06:37

12.2. Aplikasi untuk Evaluasi Prototipe (video) 0:07:23

12.3. Mengevaluasi Desain Prototipe (video) 0:06:55

13. Rangkuman 0:09:30

13.1. Ringkasan Merancang Prototipe Website dengan Figma (file bacaan) 0:09:30

Aspek Kompetensi

Aspek Pengetahuan

1. Menjelaskan konsep user interface (tampilan visual) dalam sebuah website

> UI Design: Merancang Prototipe Website yang Interaktif dengan Figma (0:19 - 0:32)

> Mengenal Macam-Macam UI (0:10 - 1:50)

> UI vs UX (4:23 - 4:3, 4:54 - 4:59)

2. Menjabarkan komponen visual dalam sebuah desain

> Mengenal Macam-Macam UI (1:51 - 6:01)

> Beda UI Mobile dengan Website dan Tools Membuat UI (0:09 - 4:38)

> Elemen Dasar UI I- Screen & Grid (0:33 - 8:04)

> Elemen Dasar UI II- Spacing & Shadows (0:10 - 5:26)

> PDF Interaction Design dalam UI dan Komponennya (hal.2 s.d 4)

3. Menguraikan penerapan prinsip Gestalt dalam sebuah website

> Penjelasan Gestalt dan Menyebutkan Macam-Macam Prinsip Gestalt - (1:16 - 2:38)

> Prinsip Gestalt - Proximity (3:02 - 5:16)

> Prinsip Gestalt - Similarity sampai Closure (0:10 - 5:59)

> Prinsip Gestalt- Symmetry sampai Common Fate (0:45 - 5:35)

4. Menjabarkan teknik prototyping seperti paper prototype, low fidelity prototype, dan high fidelity prototype

> Apa itu Prototype (0:24 - 2:01)

> Paper Prototype (2:40 - 5:40)

> Low Fidelity Prototype (0:46 - 4:01)

> High Fidelity Prototype (0:39 - 4:59)

Aspek Keterampilan

1. Menerapkan prinsip Gestalt dalam desain website

> Prinsip Gestalt- Proximity (1:35 - 5:16)

> Prinsip Gestalt- Similarity sampai Closure ( 0:09 - 6:12)

> Prinsip Gestalt- Symmetry (0:09 - 6:37)

2. Menggunakan tools dan plugin Figma

> Fitur, Tools Dasar, dan Vektor Network (0:28 - 8:29)

> Figma- Tools Desain yang Unggul (0:09 - 9:13)

> 5 Plugins dalam Figma (0:09 - 8:21)

> 7 Plugins Lainnya dalam Figma (0:09 - 8:58)

> PDF Plugin Figma Terbaik untuk UI Designer (Hal 1-6)

3. Menggunakan Figma untuk membuat desain website toko online

> Beda UI Mobile dengan Website dan Tools Membuat UI (4:39 - 5: 46)

> Membuat UI Bagian Home- Persiapan (0:09 - 10:01)

> Membuat UI Bagian Home- Frame & Grid (0:09 - 7:58)

> Membuat UI Bagian Home- Color & Font Style (0:09 - 8:08)

> Membuat UI Bagian Home- Wireframe (0:09 - 9:29)

> Membuat UI Bagian Home- Header (0:09 - 6:36)

> Membuat UI Bagian Home- Head Banner (0:09 - 7:32)

> Membuat UI Bagian Home - Head Banner Lanjutan (0:09 - 9:28)

> Membuat UI Bagian Home - Carousel (0:09 - 7:41)

> Membuat UI Bagian Home - End Year Sale (0:09 - 9:31)

> Membuat UI Bagian Home - Card Product (0:09 - 8:07)

> Membuat UI Bagian Home - Key Features (0:09 - 7:18)

> Membuat UI Bagian Home - Categories (0:09 - 9:22)

> Membuat UI Bagian Home - Best Seller Product. (0:09 - 6:25)

> Membuat UI Bagian Home - Footer (0:09 - 7:59)

> Membuat UI Bagian Home - Subscribe (0:09 - 6:20)

> Membuat UI Bagian Product Page - Layout Produk (0:09 - 9:38)

> Membuat UI Bagian Product Page - Thumbnail Produk (0:09 - 8:44)

> Membuat UI Bagian Product Page - Detail Produk (0:09 - 8:36)

> Membuat UI Bagian Checkout Page - Header (0:09 - 9:36)

> Membuat UI Bagian Checkout Page - Detail produk (0:09 - 7:43)

> Membuat UI Bagian Checkout Page - Detail Pembayaran (0:09 - 9:22)

> Membuat UI Bagian Checkout Page - Metode Pembayaran (0:09 - 8:31)

4. Menambahkan interaksi dalam prototipe desain website toko online

> Menambahkan Interaksi dalam Prototipe - Bagian Home (0:35 - 8:48)

> Menambah Interaksi dalam Prototipe - Product Page (0:09 - 5:35)

5. Melakukan export prototipe desain website menggunakan mockup

> Export Desain Menggunakan Mockup (0:09 - 4:06)

6. Melakukan evaluasi desain website dengan tepat

> Aplikasi untuk Evaluasi Prototipe (0:09 - 7:08)

> Mengevaluasi Desain Prototipe (0:09 - 6:29)

Aspek Sikap

1. Tepat dalam menggunakan tools Figma

> Tools untuk Membuat Prototipe - Figma (0:09 - 2:45)

2. Kreatif dalam mendesain website toko online

> UI vs UX (3:15 - 4:07)

> Tips dalam Penerapan Komponen (0:43 - 7:02)

> UI Desain- Komunikasi Sistem sampai Layout (1:13 - 3:34)

> Mencari Inspirasi UI-Antarmuka ( 0:09 - 6 :44)

3. Cermat dalam menambahkan interaksi antar halaman prototipe

> Menambahkan Interaksi dalam Prototipe - Bagian Home (0:35 - 8:48)

> Menambah Interaksi dalam Prototipe - Product Page (0:09 - 5:35)

> PDF Interaction Design dalam UI dan Komponennya ( hal.1-2, 5)

4. Mandiri dalam mendesain website toko online

> Export Desain Menggunakan Mockup (4:09 - 5:31)

Fasilitas

1. Video belajar
2. PDF Materi
3. Ujian & Evaluasi
4. Sertifikat Digital

Jenis Sertifikat

Sertifikat Penyelesaian

Sertifikat Kompetensi Lulusan

Jadwal Sesi Konsultasi

Setiap Jumat, jam 16.00-17.00 WIB

Instruktur

Reggy Permadi

Reggy Permadi telah memiliki pengalaman di bidang Product Design selama lebih dari 6 tahun. Ia lulus dari Institut Teknologi Nasional (ITENAS) pada tahun 2016, dan dengan menyelesaikan pendidikan formalnya ia pun mengawali karirnya sebagai Product Designer pada PT Sejahtera Lima Belas, dan beberapa perusahaan lainnya dibidang UI/UX Designer hingga saat ini ia menjadi UI/UX Design Lead at Komunal Indonesia

Syarat dan Ketentuan

1. Pendidikan minimal SMA/sederajat

2. Staf UI/UX desainer, software engineer, business development, dan marketing yang ingin mendalami tentang desain website

3. Product manager perusahaan teknologi yang telah memiliki kemampuan dasar dan ingin meningkatkan kemampuan desain website

4. Masyarakat umum yang ingin mempelajari proses pengembangan produk digital

5. Start-up founder yang ingin mendalami tentang proses desain website

6. Laptop/komputer dengan internet

7. Memiliki laptop dengan spesifikasi:

- Sistem operasi Windows 8 keatas, 64 bit atau MacOS Sierra keatas.

- Browser dengan versi: Chrome 64+, Firefox 78+, Safari 11.1+, Microsoft Edge 79+

- Memiliki akses internet yang stabil untuk mengakses https://www.figma.com/

Penukaran Kode Voucher

1. Kunjungi website www.skillacademy.com atau download Aplikasi Skill Academy di Play Store
2. Pilih “Masuk” apabila sebelumnya sudah mendaftar akun Skill Academy atau pilih “Daftar” jika sebelumnya Anda belum pernah mendaftar akun Skill Academy
3. Klik "Tukarkan" pada bagian penukaran voucher di homepage atau halaman prakerja
4. Masukkan kode voucher yang sudah Anda dapatkan dari Tokopedia lalu klik "Gunakan Voucher"
5. Setelah penukaran berhasil silakan klik ''Lihat Kelas'' atau cek pada bagian “Kelas Saya” untuk mengikuti kelasnya
6. Selamat Anda dapat langsung mulai belajar dan mengikuti pelatihan di Skill Academy