Monthly Subscription Starting at AED 99 + VAT

Membuat Desain dan Purwarupa High-Fidelity di Figma
  • Level Foundation
  • المدة 33 ساعات hours
  • الطبع بواسطة Google
  • Offered by

عن

Membuat Wireframe dan Purwarupa High-Fidelity adalah materi kelima dalam program sertifikat ini yang akan membekali Anda dengan keterampilan yang perlu Anda terapkan pada pekerjaan desain pengalaman pengguna (UX) tingkat pemula. Dalam materi ini, Anda akan mengikuti tutorial langkah demi langkah untuk mempelajari cara membuat desain high-fidelity, yang disebut maket atau mockup, di Figma, sebuah alat desain yang populer. Kemudian, Anda akan mengubah desain tersebut menjadi purwarupa interaktif yang berfungsi seperti layaknya sebuah produk jadi. Anda akan melakukan penelitian untuk mengumpulkan masukan tentang desain Anda dan melakukan perbaikan. Terakhir, Anda akan belajar cara membagikan desain Anda kepada tim pengembangan dan menampilkan pekerjaan Anda dalam portofolio UX profesional Anda. Desainer dan peneliti UX dari Google akan menjadi instruktur Anda, dan Anda akan terlibat langsung dalam menyelesaikan berbagai aktivitas yang mengambil skenario desain UX dari dunia nyata. Peserta didik yang berhasil menyelesaikan ketujuh materi program sertifikasi ini telah memiliki keterampilan untuk melamar pekerjaan sebagai desainer UX pemula. Pada akhir materi ini, Anda akan mampu: - Membuat mockup (maket) dan purwarupa high-fidelity di Figma. - Mendefinisikan dan menerapkan elemen dan prinsip desain visual yang umum. - Mendemonstrasikan bagaimana sistem desain dapat digunakan untuk mengorganisir, standarisasi, dan memperbaiki desain. - Memahami peran sesi kritik desain dan masukan saat iterasi/mengulangi desain. - Menyerahkan proyek desain yang sudah jadi kepada tim teknik. - Menyelesaikan desain aplikasi seluler untuk disertakan dalam portofolio UX profesional. Materi ini sesuai untuk desainer UX tingkat pemula yang telah menyelesaikan empat materi sebelumnya dari Google UX Design Certificate (Sertifikat Desain UX Google). Sebagai alternatif, pembelajar yang belum menyelesaikan materi sebelumnya harus memiliki pemahaman yang kuat tentang proses desain, cara membuat desain low-fidelity di atas kertas dan di Figma, dan bagaimana melakukan studi kegunaan.

الوحدات

Pengantar Materi 5

    • 2 Videos
    • 3 Readings
    • 2 Quiz
Show info about module content

2 Videos

  • Pengantar Materi 5: Membuat Desain dan Purwarupa High-Fidelity di Figma
  • Kunal - Perjalanan saya menuju UX

3 Readings

  • Selamat datang di Materi 5
  • Opsional - Baca jika ini adalah materi pertama Anda dalam program sertifikat ini
  • Opsional - Menafsirkan hasil kuis Anda

2 Quiz

  • Opsional - Uji pengetahuan Anda tentang konsep sebelumnya
  • Opsional - Kirim pilihan Anda untuk petunjuk proyek portofolio

Mulai membuat mockup (maket)

    • 3 Videos
    • 2 Readings
    • 1 Quiz
Show info about module content

3 Videos

  • Selamat datang di minggu 1
  • Pengenalan mockup (maket)
  • Chikezie - Transisi dari desain low-fidelity ke high-fidelity

2 Readings

  • Keterampilan dasar untuk membuat mockup di Figma
  • Contoh Aktivitas: Menggunakan desain low-fidelity untuk memulai mockup proyek portofolio Anda

1 Quiz

  • Aktivitas: Menggunakan desain low-fidelity untuk memulai mockup proyek portofolio Anda

Menggunakan tipografi dalam mockup

    • 3 Videos
    • 3 Readings
    • 1 Discussion
    • 2 Quiz
Show info about module content

1 Discussions

  • Membagikan contoh tipografi yang menarik dalam sebuah aplikasi

3 Videos

  • Pengantar elemen-elemen dasar desain visual
  • Tipografi dalam desain UX
  • Pentingnya tipografi

3 Readings

  • Bekerja dengan berbagai jenis huruf di mockup
  • Menambahkan copy (teks/tulisan) tentang produk ke mockup
  • Contoh Aktivitas: Menambahkan tipografi ke mockup proyek portofolio Anda

2 Quiz

  • Uji pengetahuan Anda tentang tipografi
  • Aktivitas: Menambahkan tipografi ke mockup proyek portofolio Anda

Menggunakan warna dalam mockup

    • 1 Videos
    • 3 Readings
    • 2 Quiz
Show info about module content

1 Videos

  • Warna dalam desain UX

3 Readings

  • Bekerja dengan warna dalam mockup
  • Pertimbangan aksesibilitas untuk warna
  • Contoh Aktivitas: Menambahkan warna pada mockup proyek portofolio Anda

2 Quiz

  • Uji pengetahuan Anda tentang warna
  • Aktivitas: Menambahkan warna pada mockup proyek portofolio Anda

Menggunakan ikonografi dalam mockup

    • 2 Videos
    • 5 Readings
    • 1 Discussion
    • 1 Quiz
    • 1 Plugin
Show info about module content

1 Discussions

  • Membagikan contoh ikon dari aplikasi favorit Anda

2 Videos

  • Ikonografi dalam desain UX
  • Menambahkan gambar ke mockup Anda

5 Readings

  • Bekerja dengan ikon di mockup
  • Contoh Aktivitas: Menyempurnakan mockup proyek portofolio Anda
  • Mempelajari elemen desain visual lainnya
  • Menemukan gambar stok untuk mockup
  • Pertimbangan desain lainnya

1 Quiz

  • Aktivitas: Menyempurnakan mockup proyek portofolio Anda

Memahami tata letak laman - grid dan containment

    • 3 Videos
    • 4 Readings
    • 2 Quiz
Show info about module content

3 Videos

  • Pengenalan tata letak
  • Menggunakan grid sebagai pemandu tata letak
  • Menggunakan containment dalam layout

4 Readings

  • Membuat grid di mockup
  • Contoh Aktivitas: Membuat grid di mockup proyek portofolio Anda
  • Membuat containment di mockup
  • Contoh Aktivitas: Membuat containment di mockup proyek portofolio Anda

2 Quiz

  • Aktivitas: Membuat grid di mockup proyek portofolio Anda
  • Aktivitas: Membuat containment di mockup proyek portofolio Anda

Pahami tata letak laman - negative space (ruang negatif)

    • 1 Videos
    • 3 Readings
    • 2 Quiz
    • 1 Plugin
Show info about module content

1 Videos

  • Gunakan ruang negatif (putih) dalam tata letak

3 Readings

  • Gunakan ruang negatif di mockup
  • Contoh Aktivitas: Revisi mockup proyek portofolio Anda dengan menambahkan ruang negatif
  • Pola desain yang umum di aplikasi

2 Quiz

  • Aktivitas: Revisi mockup proyek portofolio Anda dengan menambahkan ruang negatif
  • Refleksi Diri: Membagikan apa yang telah Anda pelajari tentang tata letak laman

Ulasan minggu 1

    • 1 Videos
    • 1 Readings
    • 1 PeerReview
Show info about module content

1 Peer Review

  • Tantangan mingguan 1: Menerapkan elemen dasar desain visual ke mockup proyek portofolio Anda

1 Videos

  • Akhir kata: Mulai membuat mockup

1 Readings

  • Daftar istilah

Menerapkan prinsip-prinsip desain visual pada maket (bagian 1)

    • 3 Videos
    • 2 Readings
    • 1 Quiz
Show info about module content

3 Videos

  • Selamat datang di Minggu ke-2
  • Penekanan dalam desain UX
  • Hierarki dalam desain UX

2 Readings

  • Menggunakan penekanan dalam maket
  • Menggunakan hierarki dalam maket

1 Quiz

  • Uji pengetahuan Anda mengenai penekanan dan hierarki

Menerapkan prinsip-prinsip desain visual pada maket (bagian 2)

    • 2 Videos
    • 3 Readings
    • 1 Discussion
    • 3 Quiz
Show info about module content

1 Discussions

  • Menjelaskan alasan di balik penerapan prinsip-prinsip desain visual Anda

2 Videos

  • Skala dan proporsi dalam desain UX
  • Kesatuan dan keragaman dalam desain UX

3 Readings

  • Menggunakan skala dan proporsi dalam maket
  • Menggunakan kesatuan dan keragaman dalam maket
  • Contoh Aktivitas: Menerapkan prinsip-prinsip desain visual pada maket proyek portofolio Anda

3 Quiz

  • Menguji pengetahuan Anda mengenai skala dan proporsi
  • Uji pengetahuan Anda mengenai kesatuan dan keragaman
  • Aktivitas: Menerapkan prinsip-prinsip desain visual pada maket proyek portofolio Anda

Menyempurnakan desain maket

    • 2 Videos
    • 5 Readings
    • 1 Discussion
    • 3 Quiz
    • 1 Plugin
Show info about module content

1 Discussions

  • Menjelaskan alasan di balik penerapan prinsip-prinsip desain visual Anda

2 Videos

  • Menerapkan Prinsip Gestalt pada maket
  • Meninjau kemajuan Anda

5 Readings

  • Mempelajari Prinsip Gestalt tambahan
  • Contoh Aktivitas: Menerapkan Prinsip Gestalt pada maket proyek portofolio Anda
  • Mempertimbangkan elemen dan prinsip desain visual tambahan
  • Belajar tentang prinsip-prinsip desain antarmuka
  • Menyertakan navigasi dalam maket

3 Quiz

  • Uji pengetahuan Anda tentang Prinsip Gestalt
  • Aktivitas: Menerapkan Prinsip Gestalt pada maket proyek portofolio Anda
  • Refleksi Diri: Menyertakan navigasi dalam maket Anda

Tinjauan Minggu ke-2

    • 1 Videos
    • 1 Readings
    • 1 PeerReview
Show info about module content

1 Peer Review

  • Tantangan Mingguan 2: Menyempurnakan maket proyek portofolio Anda

1 Videos

  • Kesimpulan: Menerapkan prinsip-prinsip desain visual pada maket

1 Readings

  • Daftar istilah

Memahami sistem desain

    • 5 Videos
    • 1 Readings
    • 2 Quiz
Show info about module content

5 Videos

  • Selamat datang di minggu ke-3
  • Pengantar sistem desain
  • Manfaat sistem desain
  • Sistem desain Google: Material Design
  • Sistem desain Shopify: Polaris

1 Readings

  • Jelajahi sistem-sistem desain populer

2 Quiz

  • Uji pengetahuan Anda tentang sistem desain
  • Uji pengetahuan Anda tentang fitur sistem desain open-source

Membuat lembar stiker

    • 1 Videos
    • 1 Readings
    • 1 Quiz
Show info about module content

1 Videos

  • Membuat lembar stiker di Figma

1 Readings

  • Contoh Kegiatan: Membuat lembar stiker untuk desain proyek portofolio Anda

1 Quiz

  • Kegiatan: Membuat lembar stiker untuk desain proyek portofolio Anda

Menggunakan sistem desain

    • 2 Videos
    • 2 Readings
    • 1 Discussion
    • 1 Quiz
Show info about module content

1 Discussions

  • Bagikan sistem desain open-source yang ingin Anda gunakan dalam desain Anda sendiri

2 Videos

  • Menggunakan perpustakaan sistem desain di Figma
  • Shabi - Pertimbangkan teknologi bantu saat bekerja di sistem desain

2 Readings

  • Mendapatkan inspirasi dari sistem desain
  • Opsional - Belajar dari Figma - Menggunakan perpustakaan sistem desain

1 Quiz

  • Uji pengetahuan Anda tentang bekerja dengan sistem desain di Figma

Ulasan minggu ke-3

    • 1 Videos
    • 1 Readings
    • 1 Quiz
Show info about module content

1 Videos

  • Akhir kata: Menjelajahi sistem desain

1 Readings

  • Glosarium

1 Quiz

  • Tantangan Mingguan 3: Menjelajahi sistem desain

Memberi dan menerima masukan desain

    • 2 Videos
    • 1 Discussion
    • 1 Plugin
Show info about module content

1 Discussions

  • Membagikan masukan yang Anda terima

2 Videos

  • Selamat datang di minggu ke-4
  • Memberi dan menerima masukan sebagai desainer UX

Menjelajahi sesi kritik desain

    • 3 Videos
    • 1 Readings
    • 2 Quiz
Show info about module content

3 Videos

  • Dasar-dasar sesi kritik desain
  • Praktik terbaik untuk sesi kritik desain
  • Kunal - Pengalaman saya tentang sesi kritik desain

1 Readings

  • Pelajari lebih lanjut tentang sesi kritik desain

2 Quiz

  • Uji pengetahuan Anda tentang sesi kritik desain
  • Refleksi Mandiri: Meminta masukan terkait hasil kerja Anda

Mengamati sesi kritik mockup

    • 2 Videos
    • 1 Discussion
Show info about module content

1 Discussions

  • Membagikan pembelajaran sesi kritik mockup

2 Videos

  • Pengantar sesi kritik mockup
  • Mengamati sesi kritik mockup

Menerapkan masukan dari sesi kritik

    • 2 Videos
    • 1 Quiz
Show info about module content

2 Videos

  • Mengubah masukan dari sesi kritik menjadi tindakan
  • Melakukan iterasi pada mockup berdasarkan masukan dari sesi kritik

1 Quiz

  • Uji pengetahuan Anda tentang menerapkan masukan dari sesi kritik

Ulasan minggu ke-4

    • 1 Videos
    • 1 Readings
    • 1 Quiz
Show info about module content

1 Videos

  • Akhir kata: Berpartisipasi dalam sesi kritik desain

1 Readings

  • Glosarium

1 Quiz

  • Tantangan Mingguan 4: Berpartisipasi dalam sesi kritik desain

Memahami purwarupa high-fidelity

    • 3 Videos
    • 1 Quiz
Show info about module content

3 Videos

  • Selamat datang di minggu ke-5
  • Pengantar purwarupa high-fidelity
  • Membuat sebuah purwarupa high-fidelity di Figma

1 Quiz

  • Uji pengetahuan Anda tentang pembuatan purwarupa high-fidelity di Figma

Mempelajari gesture dan motion

    • 5 Videos
    • 3 Readings
    • 2 Quiz
Show info about module content

5 Videos

  • Gesture dan motion dalam desain UX
  • Menambahkan gestures dan motion di Figma
  • Pertimbangan aksesibilitas untuk gesture dan motion
  • Jen - Desain dengan mempertimbangkan faktor aksesibilitas
  • Belajar dari Figma - Interaksi purwarupa dan feedback

3 Readings

  • Mempelajari jenis-jenis gesture dan motion
  • Mempelajari lebih lanjut tentang pembuatan purwarupa di Figma
  • Langkah tambahan untuk menyempurnakan purwarupa hi-fidelity

2 Quiz

  • Uji pengetahuan Anda tentang gestures dan motion
  • Refleksi Diri: Membahas pertimbangan aksesibilitas saat mendesain menggunakan motion

Ulasan minggu ke-5

    • 1 Videos
    • 1 Readings
    • 1 PeerReview
Show info about module content

1 Peer Review

  • Tantangan Mingguan 5: Membuat purwarupa high-fidelity untuk proyek portofolio Anda

1 Videos

  • Penutup: Membuat purwarupa high-fidelity

1 Readings

  • Daftar istilah

Merencanakan studi kegunaan

    • 2 Videos
    • 2 Readings
    • 1 Quiz
Show info about module content

2 Videos

  • Selamat datang di Minggu ke-6
  • Selamat datang di Minggu ke-6

2 Readings

  • Pelajari lebih lanjut tentang merencanakan studi penelitian UX
  • Contoh Aktivitas: Merencanakan studi penelitian UX untuk proyek portofolio Anda

1 Quiz

  • Aktivitas: Merencanakan studi penelitian UX untuk proyek portofolio Anda

Melakukan studi kegunaan

    • 1 Videos
    • 2 Readings
    • 2 Quiz
Show info about module content

1 Videos

  • Melakukan studi kegunaan

2 Readings

  • Pelajari lebih lanjut tentang cara melakukan studi kegunaan
  • Contoh Aktivitas: Melakukan studi kegunaan untuk proyek portofolio Anda

2 Quiz

  • Refleksi Diri: Memperhitungkan bias dalam studi kegunaan Anda
  • Aktivitas: Melakukan studi kegunaan untuk proyek portofolio Anda

Menganalisis dan menyintesis hasil studi kegunaan

    • 1 Videos
    • 2 Readings
    • 1 Discussion
    • 2 Quiz
Show info about module content

1 Discussions

  • Bagikan hasil pembelajaran dari studi kegunaan Anda

1 Videos

  • Menganalisis dan menyintesis hasil studi kegunaan

2 Readings

  • Pelajari lebih lanjut cara menganalisis dan menyintesis hasil studi kegunaan
  • Contoh Aktivitas: Menganalisis dan menyintesis hasil studi kegunaan untuk proyek portofolio Anda

2 Quiz

  • Uji pengetahuan Anda tentang menghasilkan wawasan penelitian
  • Aktivitas: Menganalisis dan menyintesis hasil studi kegunaan untuk proyek portofolio Anda

Iterasi pada desain high-fidelity

    • 2 Videos
    • 3 Readings
    • 1 Quiz
Show info about module content

2 Videos

  • Iterasi pada desain high-fidelity
  • Mengidentifikasi kapan desain dapat dikatakan selesai

3 Readings

  • Contoh Aktivitas: Menyempurnakan desain proyek portofolio high-fidelity
  • Pelajari lebih lanjut tentang mengidentifikasi kapan desain dapat dikatakan selesai
  • Desain akhir dari aplikasi dog walker di Figma

1 Quiz

  • Aktivitas: Menyempurnakan desain proyek portofolio high-fidelity

Mendokumentasikan dan berbagi desain

    • 4 Videos
    • 1 Readings
    • 1 Discussion
    • 2 Quiz
Show info about module content

1 Discussions

  • Bagikan contoh studi kasus dalam portofolio desain UX

4 Videos

  • Mendokumentasikan dan berbagi desain
  • Menyerahkan desain untuk diproduksi
  • Belajar dari Figma - Bersiaplah untuk serah terima
  • Membuat studi kasus untuk portofolio Anda

1 Readings

  • Pelajari selengkapnya tentang membuat studi kasus untuk proyek portofolio Anda

2 Quiz

  • Uji pengetahuan Anda tentang menyerahkan desain
  • Uji pengetahuan Anda tentang studi kasus dalam portofolio UX

Kesimpulan: Pengujian dan iterasi desain

    • 1 Videos
    • 1 Readings
    • 1 PeerReview
Show info about module content

1 Peer Review

  • Tantangan Mingguan 6: Membuat studi kasus untuk portofolio Anda

1 Videos

  • Kesimpulan: Pengujian dan iterasi desain

1 Readings

  • Daftar istilah

Tinjauan materi

    • 1 Videos
    • 1 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • Bagikan pengalaman Anda selama mengikuti materi

1 Videos

  • Selamat, Anda telah menyelesaikan Materi 5: Membuat Desain dan Purwarupa High-Fidelity di Figma

1 Readings

  • Memulai materi berikutnya

Auto Summary

Unlock the skills to create high-fidelity designs and prototypes in Figma with this comprehensive course by Google UX designers. Perfect for beginners in UX design, this course dives into visual design principles, interactive prototypes, and professional portfolio building. With direct involvement in real-world scenarios, you'll learn to gather feedback, improve designs, and collaborate with development teams. Accessible through Coursera with Starter and Professional subscriptions, this 1980-minute course is ideal for those looking to advance their UX design career.

Google Career Certificates
Instructor

Google Career Certificates