К содержимому
learnspaceYOUR NEXT CHAPTER
ПРОСТРАНСТВО ОБУЧЕНИЯ
ГлавнаяКаталог курсовМоё обучениеCoursera

Знания без границ

Учитесь у лучших университетов и компаний мира.

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Membuat Desain dan Purwarupa High-Fidelity di Figma · LearnSpace
Назад в каталог
courseraПрограммирование

Membuat Desain dan Purwarupa High-Fidelity di Figma

Курс от Google
Начальный≈ 33.3 чИндонезийский
О курсеНавыкиПрограммаПреподаватели

О курсе

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.

Навыки, которые вы освоите

Design ReviewsFigma (Design Software)User Interface (UI) DesignMockupsUser Experience DesignUser ResearchUser ExperienceInteraction DesignTypographyDesign Elements And PrinciplesPrototypingDesign ResearchUI ComponentsUsability TestingAnimationsUsabilityGraphic and Visual DesignSystems Design

Программа курса

6 модулей · 179 учебных материалов

01Mulai membuat mockup (maket) 57 материалов

Pengantar Materi 5

Pengantar Materi 5: Membuat Desain dan Purwarupa High-Fidelity di FigmaВидеоSelamat datang di Materi 5ЧтениеOpsional - Baca jika ini adalah materi pertama Anda dalam program sertifikat iniЧтениеOpsional - Uji pengetahuan Anda tentang konsep sebelumnya

Учитесь у экспертов

Google Career Certificates

Преподаватель курса

Membuat Desain dan Purwarupa High-Fidelity di Figma
В каталоге вашей программы

Инвестируйте в себя

Новые знания — в удобное для вас время.

Начать на Coursera

Обучение откроется на Coursera
в новой вкладке

Обучение на Coursera

≈ 33.3 ч

6 модулей

Язык: Индонезийский

Субтитры: Английский

Часть программы вашего университета
Задание
Opsional - Menafsirkan hasil kuis AndaЧтение
Opsional - Kirim pilihan Anda untuk petunjuk proyek portofolioЗадание
Kunal - Perjalanan saya menuju UXВидео

Mulai membuat mockup (maket)

Selamat datang di minggu 1ВидеоPengenalan mockup (maket) ВидеоChikezie - Transisi dari desain low-fidelity ke high-fidelityВидеоKeterampilan dasar untuk membuat mockup di FigmaЧтениеAktivitas: Menggunakan desain low-fidelity untuk memulai mockup proyek portofolio AndaЗаданиеContoh Aktivitas: Menggunakan desain low-fidelity untuk memulai mockup proyek portofolio AndaЧтение

Menggunakan tipografi dalam mockup

Pengantar elemen-elemen dasar desain visual ВидеоTipografi dalam desain UXВидеоPentingnya tipografi ВидеоUji pengetahuan Anda tentang tipografiЗаданиеBekerja dengan berbagai jenis huruf di mockupЧтениеMenambahkan copy (teks/tulisan) tentang produk ke mockupЧтениеAktivitas: Menambahkan tipografi ke mockup proyek portofolio AndaЗаданиеContoh Aktivitas: Menambahkan tipografi ke mockup proyek portofolio AndaЧтениеMembagikan contoh tipografi yang menarik dalam sebuah aplikasi Обсуждение

Menggunakan warna dalam mockup

Warna dalam desain UXВидеоUji pengetahuan Anda tentang warnaЗаданиеBekerja dengan warna dalam mockupЧтениеPertimbangan aksesibilitas untuk warnaЧтениеAktivitas: Menambahkan warna pada mockup proyek portofolio Anda ЗаданиеContoh Aktivitas: Menambahkan warna pada mockup proyek portofolio Anda Чтение

Menggunakan ikonografi dalam mockup

Ikonografi dalam desain UXВидеоBekerja dengan ikon di mockup ЧтениеAktivitas: Menyempurnakan mockup proyek portofolio AndaЗаданиеContoh Aktivitas: Menyempurnakan mockup proyek portofolio AndaЧтениеMembagikan contoh ikon dari aplikasi favorit AndaОбсуждениеMempelajari elemen desain visual lainnya PLUGINMempelajari elemen desain visual lainnya ЧтениеMenambahkan gambar ke mockup AndaВидеоMenemukan gambar stok untuk mockupЧтениеPertimbangan desain lainnyaЧтение

Memahami tata letak laman - grid dan containment

Pengenalan tata letakВидеоMenggunakan grid sebagai pemandu tata letakВидеоMembuat grid di mockupЧтениеAktivitas: Membuat grid di mockup proyek portofolio AndaЗаданиеContoh Aktivitas: Membuat grid di mockup proyek portofolio AndaЧтениеMenggunakan containment dalam layoutВидеоMembuat containment di mockupЧтениеAktivitas: Membuat containment di mockup proyek portofolio AndaЗаданиеContoh Aktivitas: Membuat containment di mockup proyek portofolio AndaЧтение

Pahami tata letak laman - negative space (ruang negatif)

Gunakan ruang negatif (putih) dalam tata letakВидеоGunakan ruang negatif di mockupЧтениеUji pengetahuan Anda tentang containment dan ruang negatif dalam desainPLUGINAktivitas: Revisi mockup proyek portofolio Anda dengan menambahkan ruang negatifЗаданиеContoh Aktivitas: Revisi mockup proyek portofolio Anda dengan menambahkan ruang negatifЧтениеPola desain yang umum di aplikasiЧтениеRefleksi Diri: Membagikan apa yang telah Anda pelajari tentang tata letak lamanЗадание

Ulasan minggu 1

Akhir kata: Mulai membuat mockup ВидеоDaftar istilah ЧтениеTantangan mingguan 1: Menerapkan elemen dasar desain visual ke mockup proyek portofolio AndaВзаимная проверка
02Menerapkan prinsip-prinsip desain visual pada maket (mockup) 30 материалов

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

Selamat datang di Minggu ke-2ВидеоPenekanan dalam desain UXВидеоMenggunakan penekanan dalam maketЧтениеHierarki dalam desain UXВидеоMenggunakan hierarki dalam maketЧтениеUji pengetahuan Anda mengenai penekanan dan hierarkiЗадание

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

Skala dan proporsi dalam desain UXВидеоMenggunakan skala dan proporsi dalam maketЧтениеMenguji pengetahuan Anda mengenai skala dan proporsiЗаданиеKesatuan dan keragaman dalam desain UXВидеоMenggunakan kesatuan dan keragaman dalam maketЧтениеUji pengetahuan Anda mengenai kesatuan dan keragaman Задание

Menyempurnakan desain maket

Menerapkan Prinsip Gestalt pada maketВидеоMempelajari Prinsip Gestalt tambahan ЧтениеUji pengetahuan Anda tentang Prinsip GestaltЗаданиеAktivitas: Menerapkan Prinsip Gestalt pada maket proyek portofolio AndaЗаданиеContoh Aktivitas: Menerapkan Prinsip Gestalt pada maket proyek portofolio AndaЧтениеMenjelaskan alasan di balik penerapan prinsip-prinsip desain visual AndaОбсуждение

Tinjauan Minggu ke-2

Kesimpulan: Menerapkan prinsip-prinsip desain visual pada maket ВидеоDaftar istilahЧтениеTantangan Mingguan 2: Menyempurnakan maket proyek portofolio AndaВзаимная проверка
03Menjelajahi sistem desain 20 материалов

Memahami sistem desain

Selamat datang di minggu ke-3ВидеоPengantar sistem desainВидеоManfaat sistem desainВидеоUji pengetahuan Anda tentang sistem desainЗаданиеSistem desain Google: Material Design ВидеоSistem desain Shopify: Polaris ВидеоJelajahi sistem-sistem desain populer ЧтениеUji pengetahuan Anda tentang fitur sistem desain open-sourceЗадание

Membuat lembar stiker

Membuat lembar stiker di FigmaВидеоKegiatan: Membuat lembar stiker untuk desain proyek portofolio AndaЗаданиеContoh Kegiatan: Membuat lembar stiker untuk desain proyek portofolio AndaЧтение

Menggunakan sistem desain

Menggunakan perpustakaan sistem desain di FigmaВидеоMendapatkan inspirasi dari sistem desainЧтениеOpsional - Belajar dari Figma - Menggunakan perpustakaan sistem desainЧтениеUji pengetahuan Anda tentang bekerja dengan sistem desain di FigmaЗаданиеBagikan sistem desain open-source yang ingin Anda gunakan dalam desain Anda sendiriОбсуждениеShabi - Pertimbangkan teknologi bantu saat bekerja di sistem desainВидео

Ulasan minggu ke-3

Akhir kata: Menjelajahi sistem desainВидеоGlosariumЧтениеTantangan Mingguan 3: Menjelajahi sistem desainЗадание
04Berpartisipasi dalam sesi kritik desain19 материалов

Memberi dan menerima masukan desain

Selamat datang di minggu ke-4ВидеоMemberi dan menerima masukan sebagai desainer UXВидеоMemberi dan menerima masukan sebagai desainer UXPLUGINMembagikan masukan yang Anda terimaОбсуждение

Menjelajahi sesi kritik desain

Dasar-dasar sesi kritik desainВидеоPraktik terbaik untuk sesi kritik desainВидеоPelajari lebih lanjut tentang sesi kritik desainЧтениеUji pengetahuan Anda tentang sesi kritik desainЗаданиеKunal - Pengalaman saya tentang sesi kritik desainВидеоRefleksi Mandiri: Meminta masukan terkait hasil kerja AndaЗадание

Mengamati sesi kritik mockup

Pengantar sesi kritik mockupВидеоMengamati sesi kritik mockupВидеоMembagikan pembelajaran sesi kritik mockupОбсуждение

Menerapkan masukan dari sesi kritik

Mengubah masukan dari sesi kritik menjadi tindakanВидеоMelakukan iterasi pada mockup berdasarkan masukan dari sesi kritikВидеоUji pengetahuan Anda tentang menerapkan masukan dari sesi kritikЗадание

Ulasan minggu ke-4

Akhir kata: Berpartisipasi dalam sesi kritik desainВидеоGlosariumЧтениеTantangan Mingguan 4: Berpartisipasi dalam sesi kritik desainЗадание
05Membuat purwarupa high-fidelity17 материалов

Memahami purwarupa high-fidelity

Selamat datang di minggu ke-5ВидеоPengantar purwarupa high-fidelityВидеоMembuat sebuah purwarupa high-fidelity di FigmaВидеоUji pengetahuan Anda tentang pembuatan purwarupa high-fidelity di FigmaЗадание

Mempelajari gesture dan motion

Gesture dan motion dalam desain UX ВидеоMempelajari jenis-jenis gesture dan motion ЧтениеMenambahkan gestures dan motion di Figma ВидеоUji pengetahuan Anda tentang gestures dan motionЗаданиеMempelajari lebih lanjut tentang pembuatan purwarupa di Figma ЧтениеPertimbangan aksesibilitas untuk gesture dan motion ВидеоRefleksi Diri: Membahas pertimbangan aksesibilitas saat mendesain menggunakan motion ЗаданиеJen - Desain dengan mempertimbangkan faktor aksesibilitasВидеоBelajar dari Figma - Interaksi purwarupa dan feedback ВидеоLangkah tambahan untuk menyempurnakan purwarupa hi-fidelityЧтение

Ulasan minggu ke-5

Penutup: Membuat purwarupa high-fidelityВидеоDaftar istilahЧтениеTantangan Mingguan 5: Membuat purwarupa high-fidelity untuk proyek portofolio AndaВзаимная проверка
06Pengujian dan iterasi desain36 материалов

Merencanakan studi kegunaan

Selamat datang di Minggu ke-6ВидеоSelamat datang di Minggu ke-6ВидеоPelajari lebih lanjut tentang merencanakan studi penelitian UXЧтениеAktivitas: Merencanakan studi penelitian UX untuk proyek portofolio AndaЗаданиеContoh Aktivitas: Merencanakan studi penelitian UX untuk proyek portofolio AndaЧтение

Melakukan studi kegunaan

Melakukan studi kegunaanВидеоPelajari lebih lanjut tentang cara melakukan studi kegunaanЧтениеRefleksi Diri: Memperhitungkan bias dalam studi kegunaan AndaЗаданиеAktivitas: Melakukan studi kegunaan untuk proyek portofolio AndaЗаданиеContoh Aktivitas: Melakukan studi kegunaan untuk proyek portofolio AndaЧтение

Menganalisis dan menyintesis hasil studi kegunaan

Menganalisis dan menyintesis hasil studi kegunaanВидеоPelajari lebih lanjut cara menganalisis dan menyintesis hasil studi kegunaanЧтениеUji pengetahuan Anda tentang menghasilkan wawasan penelitianЗаданиеAktivitas: Menganalisis dan menyintesis hasil studi kegunaan untuk proyek portofolio AndaЗаданиеContoh Aktivitas: Menganalisis dan menyintesis hasil studi kegunaan untuk proyek portofolio AndaЧтениеBagikan hasil pembelajaran dari studi kegunaan Anda Обсуждение

Iterasi pada desain high-fidelity

Iterasi pada desain high-fidelityВидеоAktivitas: Menyempurnakan desain proyek portofolio high-fidelityЗаданиеContoh Aktivitas: Menyempurnakan desain proyek portofolio high-fidelityЧтениеMengidentifikasi kapan desain dapat dikatakan selesaiВидеоPelajari lebih lanjut tentang mengidentifikasi kapan desain dapat dikatakan selesaiЧтениеDesain akhir dari aplikasi dog walker di FigmaЧтение

Mendokumentasikan dan berbagi desain

Mendokumentasikan dan berbagi desainВидеоMenyerahkan desain untuk diproduksiВидеоBelajar dari Figma - Bersiaplah untuk serah terimaВидеоUji pengetahuan Anda tentang menyerahkan desainЗаданиеMembuat studi kasus untuk portofolio AndaВидеоPelajari selengkapnya tentang membuat studi kasus untuk proyek portofolio AndaЧтение

Kesimpulan: Pengujian dan iterasi desain

Kesimpulan: Pengujian dan iterasi desainВидеоDaftar istilah ЧтениеTantangan Mingguan 6: Membuat studi kasus untuk portofolio AndaВзаимная проверка

Tinjauan materi

Selamat, Anda telah menyelesaikan Materi 5: Membuat Desain dan Purwarupa High-Fidelity di FigmaВидеоBagikan pengalaman Anda selama mengikuti materiОбсуждениеMemulai materi berikutnyaЧтение
Aktivitas: Menerapkan prinsip-prinsip desain visual pada maket proyek portofolio Anda Задание
Contoh Aktivitas: Menerapkan prinsip-prinsip desain visual pada maket proyek portofolio Anda Чтение
Menjelaskan alasan di balik penerapan prinsip-prinsip desain visual AndaОбсуждение
Menerapkan prinsip desain visualPLUGIN
Meninjau kemajuan Anda Видео
Mempertimbangkan elemen dan prinsip desain visual tambahanЧтение
Belajar tentang prinsip-prinsip desain antarmukaЧтение
Menyertakan navigasi dalam maketЧтение
Refleksi Diri: Menyertakan navigasi dalam maket AndaЗадание
Uji pengetahuan Anda tentang studi kasus dalam portofolio UXЗадание
Bagikan contoh studi kasus dalam portofolio desain UXОбсуждение