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

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

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

Открыть Coursera
Интеграция
Пространство университета
Моё пространствоСтраница курса
↵
ЯЛичный кабинетСтудент
© 2026 LearnSpaceКаждый день — возможность узнать больше.Помощь
Membuat Antarmuka Pengguna (UI) Dinamis untuk Situs · LearnSpace
Назад в каталог
courseraПрограммирование

Membuat Antarmuka Pengguna (UI) Dinamis untuk Situs

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

О курсе

Mendesain Web yang Responsif di Adobe XD adalah materi keenam dalam program yang akan membekali Anda dengan keterampilan yang dibutuhkan untuk melamar pekerjaan tingkat pemula dalam desain pengalaman pengguna (UX). Dalam materi ini, Anda akan merancang situs web responsif menggunakan Adobe XD, sebuah alat desain yang populer. Anda akan menyelesaikan proses desain dari awal hingga akhir: berempati kepada pengguna, menentukan titik kesulitan/masalah pengguna, menghasilkan ide untuk solusi desain, membuat wireframe dan purwarupa, serta menguji desain untuk mendapatkan masukan. Pada akhir materi ini, Anda akan memiliki sebuah proyek desain baru untuk dimasukkan ke dalam portofolio UX profesional Anda. Selain itu, Anda akan belajar cara mencari pekerjaan desain UX tingkat pemula, membuat resume yang menonjolkan keterampilan dan pencapaian Anda, serta membangun situs web portofolio 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. Pembelajar yang berhasil menyelesaikan ketujuh materi program sertifikat ini akan memiliki keterampilan untuk melamar pekerjaan sebagai desainer UX pemula. Pada akhir materi ini, Anda akan mampu: - Menerapkan setiap langkah proses desain UX (berempati, mendefinisikan, memunculkan ide, membuat purwarupa, menguji) untuk membuat situs web yang responsif. - Mengembangkan desain dengan alat desain yang populer, Adobe XD. - Merencanakan arsitektur informasi dan membuat peta situs untuk desain situs web. - Menerapkan tata letak umum untuk laman web. - Merencanakan dan melakukan studi kegunaan untuk mengumpulkan masukan tentang desain. - Mengubah desain berdasarkan wawasan penelitian - Bekerja dengan sistem desain di Adobe XD. - Menambahkan proyek desain baru ke portofolio UX profesional Anda. - [Opsional] Membuat atau memperbarui resume yang berfokus pada UX. - [Opsional] Mempelajari cara mencari dan melamar pekerjaan tingkat pemula di bidang UX. Materi ini sesuai untuk desainer UX tingkat pemula yang telah menyelesaikan kelima materi Sertifikat Desain UX Google sebelumnya. Atau, pembelajar yang memerlukan pemahaman dasar yang kuat tentang proses desain; pengalaman membuat wireframe, maket, dan purwarupa; serta kemampuan untuk melakukan studi kegunaan. Tidak diperlukan pengalaman dengan Adobe XD sebelumnya.

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

Responsive Web DesignAdobe XDPrototypingUser Centered DesignWireframingUsability TestingUser Interface (UI) DesignMockupsUser ExperienceUser Interface and User Experience (UI/UX) DesignIdeationUsabilityInformation ArchitectureWeb DesignUser ResearchUI ComponentsDesign ResearchUser Experience DesignUser Interface (UI)

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

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

01Memulai proses desain UX: Berempati dan mendefinisikan43 материалов

Pengantar Materi 6

Pengantar Materi 6: Responsive Web Design in Adobe XD (Mendesain Web Responsif di Adobe XD)ВидеоSelamat datang di Materi 6ЧтениеPengantar proyek portofolio keduaЧтениеPilih petunjuk (prompt) proyek portofolio Anda yang kedua Чтение

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

Google Career Certificates

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

Membuat Antarmuka Pengguna (UI) Dinamis untuk Situs
В каталоге вашей программы

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

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

Начать на Coursera

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

Обучение на Coursera

≈ 39.6 ч

6 модулей

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

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

Часть программы вашего университета
Aktivitas: Kirimkan petunjuk proyek portofolio pilihan Anda Задание
Dave - Perjalanan saya menuju UXВидео

Pengantar Adobe XD

Selamat datang di minggu 1ВидеоMemahami website responsifВидеоUji pengetahuan Anda tentang desain website responsif ЗаданиеPengantar Adobe XDВидеоBagikan kegembiraan Anda tentang mempelajari Adobe XDОбсуждениеMulai menggunakan Adobe XDЧтениеOpsional - Mulai menggunakan FigmaЧтениеMemulai proyek di Adobe XDВидеоUji pengetahuan Anda tentang dasar-dasar Adobe XDЗаданиеMembandingkan dan membedakan Adobe XD dan FigmaОбсуждениеJennifer - Menggunakan tool untuk desain digitalВидео

Rasa empati terhadap pengguna

Berempati dengan pengguna untuk memahami kebutuhan dan titik permasalahan merekaВидеоMempelajari lebih lanjut tentang berempati dengan penggunaЧтениеBerdiskusi tentang pentingnya mempertimbangkan kebutuhan penggunaОбсуждениеUji pengetahuan Anda tentang berempati dengan penggunaЗаданиеLakukan wawancara untuk peta empati ЧтениеBerbagi pertanyaan wawancaraОбсуждениеMembuat peta empatiЧтениеAktivitas: Membuat sebuah peta empatiЗаданиеContoh Aktivitas: Membuat sebuah peta empatiЧтениеMembuat personaВидеоMempelajari lebih lanjut tentang persona ЧтениеAktivitas: Membuat personaЗаданиеContoh Aktivitas: Membuat personaЧтение

Mendefinisikan kebutuhan pengguna

Membuat cerita penggunaВидеоPelajari lebih lanjut tentang cerita penggunaЧтениеBuat dan bagikan cerita pengguna tentang diri AndaОбсуждениеMembuat peta perjalanan penggunaВидеоPelajari lebih lanjut tentang peta perjalanan penggunaЧтениеAktivitas: Membuat cerita pengguna dan peta perjalanan penggunaЗаданиеContoh Aktivitas: Membuat cerita pengguna dan peta perjalanan penggunaЧтение

Mendefinisikan masalah

Mengembangkan pernyataan masalahВидеоMempelajari lebih lanjut tentang pernyataan masalahЧтениеUji pengetahuan Anda tentang pernyataan masalahЗадание

Ulasan minggu 1

Akhir kata: Memulai proses desain UX: Berempati dan mendefinisikanВидеоDaftar istilahЧтениеTantangan mingguan 1: Menyusun pernyataan masalah.Взаимная проверка
02Melanjutkan proses desain UX: Ideate (Ideasi)26 материалов

Melakukan audit kompetitif

Selamat datang di Minggu ke-2ВидеоMelakukan audit kompetitif ВидеоMempelajari lebih lanjut tentang audit kompetitif ЧтениеAktivitas: Melakukan audit kompetitif untuk website AndaЗаданиеContoh Aktivitas: Melakukan audit kompetitif untuk website AndaЧтениеPelajari selengkapnya tentang menggunakan audit kompetitif untuk ideasi ЧтениеRefleksi Diri: Menggunakan penelitian kompetitif untuk menginformasikan desainЗадание

Menghasilkan ide untuk desain

Memunculkan ide menggunakan “How Might We”ВидеоMemunculkan ide menggunakan “Crazy Eights” ВидеоPelajari lebih lanjut tentang “How Might We” dan “Crazy Eights”ЧтениеUji pengetahuan Anda tentang teknik ideasiЗаданиеAktivitas: Memunculkan ide untuk website AndaЗаданиеContoh Aktivitas: Memunculkan ide untuk website AndaЧтение

Merencanakan information architecture (arsitektur informasi)

Merencanakan information architecture (arsitektur informasi)ВидеоPelajari selengkapnya tentang arsitektur informasiЧтениеMengeksplorasi struktur website yang umum ВидеоMengeksplorasi struktur situs webPLUGINUji pengetahuan Anda tentang struktur website ЗаданиеDiskusikan struktur website yang pernah Anda gunakanОбсуждение

Tinjauan Minggu ke-2

Kesimpulan: Melanjutkan proses desain UX: Ideate (Ideasi)ВидеоDaftar istilahЧтениеTantangan Mingguan 2: Membuat sitemap untuk website Взаимная проверка
03Membuat wireframe untuk situs web responsif33 материалов

Membuat wireframe kertas

Selamat datang di minggu ke-3ВидеоMenjelajahi tata letak umum untuk laman beranda situs webВидеоPelajari lebih lanjut tentang tata letak situs web umumЧтениеMengidentifikasi tata letak situs webPLUGINDasar-dasar wireframe ВидеоMempelajari lebih lanjut tentang wireframeЧтениеKegiatan: Mulai membuat wireframe kertas untuk situs web AndaЗаданиеContoh Kegiatan: Mulai membuat wireframe kertas untuk situs web AndaЧтение

Merencanakan laman web yang responsif

Merencanakan tata letak responsifВидеоPelajari lebih lanjut tentang menyusun tata letak responsifЧтениеMenyesuaikan tata letak halaman berdasarkan ukuran layarВидеоElemen umum yang digunakan dalam desain responsifЧтениеMengeksplorasi desain situs web yang responsifPLUGINKegiatan: Membuat variasi wireframe kertasЗадание

Membuat wireframe digital di Adobe XD

Melakukan transisi dari wireframe kertas ke digitalВидеоMembuat wireframe digital di Adobe XDВидеоPelajari lebih lanjut tentang membuat wireframe digital di Adobe XDЧтениеOpsional - Membuat wireframe digital di FigmaЧтениеKegiatan: Membuat wireframe digital untuk ukuran layar desktopЗаданиеContoh Kegiatan: Membuat wireframe digital untuk ukuran layar desktopЧтение

Menyempurnakan wireframe

Memperbaiki wireframe untuk meningkatkan aksesibilitasВидеоMempertimbangkan heading, landmark, dan titik fokus dalam wireframe AndaОбсуждениеMengevaluasi wireframe menggunakan Prinsip GestaltВидеоPelajari lebih lanjut tentang penerapan Prinsip Gestalt dalam wireframeЧтение

Ulasan minggu ke-3

Penutup: Membuat wireframe untuk situs web responsif ВидеоGlosariumЧтениеTantangan Mingguan 3: Menyempurnakan wireframe untuk memenuhi standarВзаимная проверка
04Membuat dan menguji purwarupa low-fidelity31 материалов

Membuat purwarupa low-fidelity di Adobe XD

Selamat datang di minggu ke-4ВидеоMemahami purwarupa low-fidelityВидеоUji pengetahuan Anda tentang wireframe vs purwarupaЗаданиеMembuat purwarupa low-fidelity di Adobe XDВидеоPelajari lebih lanjut tentang pembuatan purwarupa low-fidelity di Adobe XDЧтениеOpsional - Membuat purwarupa low-fidelity di FigmaЧтениеKegiatan: Membuat purwarupa low-fidelity untuk situs web responsifЗаданиеContoh Kegiatan: Membuat purwarupa low-fidelity untuk situs web responsifЧтениеMemeriksa purwarupa low-fidelityЧтение

Merencanakan dan melakukan studi kegunaan untuk purwarupa low-fidelity

Merencanakan studi penelitian UX ВидеоPelajari lebih lanjut tentang cara merencanakan studi penelitian UX ЧтениеKegiatan: Merencanakan studi penelitian UXЗаданиеContoh Kegiatan: Merencanakan studi penelitian UXЧтениеMelakukan studi kegunaanВидеоPelajari lebih lanjut tentang cara melakukan studi kegunaanЧтение

Melakukan iterasi pada desain berdasarkan temuan penelitian

Melakukan iterasi pada desain low-fidelity berdasarkan temuan penelitianВидеоMempelajari lebih lanjut tentang cara iterasi pada desain low-fidelityЧтениеUji pengetahuan Anda tentang memodifikasi desain berdasarkan temuan penelitianЗаданиеCeritakan bagaimana Anda melakukan iterasi pada desain berdasarkan wawasan penelitianОбсуждение

Ulasan minggu ke-4

Akhir kata: Membuat dan menguji purwarupa low-fidelity ВидеоGlosariumЧтениеTantangan Mingguan 4: Memperbarui purwarupa low-fidelity berdasarkan wawasan studi kegunaanВзаимная проверка
05Membuat dan menguji desain high-fidelity38 материалов

Mulai mendesain mockup

Selamat datang di minggu ke-5ВидеоMulai mendesain mockupВидеоPengantar elemen-elemen dasar desain visualЧтениеMeninjau cara mengatur elemen dalam mockupЧтениеMeninjau prinsip-prinsip desain visualЧтениеUji pengetahuan Anda tentang dasar-dasar mockupЗадание

Buat mockup untuk website desktop

Mulai membuat mockup untuk beranda website di Adobe XDВидео​​Opsional - Mulai membuat mockup website di Figma ЧтениеMenambahkan gambar dan logo ke mockup di Adobe XDЧтениеUji pengetahuan Anda tentang membuat beranda di Adobe XDЗаданиеMelanjutkan membuat mockup untuk beranda website di Adobe XDВидеоMenggunakan repeat grid untuk mendesain di Adobe XDЧтение

Membuat mockup untuk website seluler

Membuat mockup untuk website seluler di Adobe XDВидеоPelajari lebih lanjut tentang menu navigasi yang tersembunyiЧтениеOpsional - Buat mockup untuk website seluler di FigmaЧтениеAktivitas: Membuat mockup untuk beranda website selulerЗаданиеContoh Kegiatan: Membuat mockup untuk beranda website selulerЧтение

Bekerja dengan sistem desain

Bekerja dengan sistem desainВидеоUji pengetahuan Anda tentang bekerja dengan sistem desainЗаданиеMenggunakan sistem desain eksternal di Adobe XDВидеоPelajari lebih lanjut tentang sistem desainЧтениеBagikan sistem desain favorit AndaОбсуждениеAktivitas: Mendokumentasikan keputusan desain AndaЗадание

Membuat purwarupa high-fidelity

Membuat purwarupa high-fidelity di Adobe XDВидеоAnotasi purwarupa untuk aksesibilitas webВидеоPelajari lebih lanjut tentang aksesibilitas webЧтениеUji pengetahuan Anda tentang aksesibilitas webЗаданиеBagikan referensi tentang desain yang inklusif dan aksesibelОбсуждение

Ulasan minggu ke-5

Akhir kata: Membuat dan menguji desain high-fidelityВидеоDaftar istilahЧтениеUjian Mingguan ke-5: Membuat purwarupa high-fidelity untuk sebuah website Взаимная проверка

Opsional - Uji purwarupa high-fidelity yang Anda buat

Opsional - Uji purwarupa high-fidelity yang Anda buatВидеоOpsional - Tinjau cara merencanakan dan melakukan studi kegunaanЧтениеUji pengetahuan Anda tentang studi kegunaan Задание
06Mendokumentasikan hasil desain dan mencari pekerjaan36 материалов

Menyerahkan desain

Selamat datang di Minggu ke-6ВидеоBerkolaborasi dengan tim teknik ВидеоMenyerahkan spesifikasi desain di Adobe XDВидеоUji pengetahuan Anda tentang penyerahan desainЗаданиеBerkolaborasi secara jarak jauh dengan Adobe XDЧтение

Menambahkan proyek ke portofolio Anda

Menambahkan proyek ke portofolio Anda your portfolio ВидеоMempelajari lebih lanjut tentang studi kasus portofolioЧтениеUji pengetahuan Anda tentang studi kasus dalam portofolioЗаданиеMembagikan studi kasus tentang desain website yang ada di portofolioОбсуждениеMenambahkan studi kasus baru ke portofolio AndaВзаимная проверка

Opsional - Mencari pekerjaan UX

Memahami pekerjaan yang dilakukan para desainer UX pada umumnyaВидеоMempelajari lebih lanjut tentang pekerjaan di bidang pengalaman penggunaЧтениеMengeksplorasi jenis perusahaan tempat desainer UX bekerjaВидеоRefleksi Diri: Sampaikan tujuan dan minat profesional AndaЗаданиеKenny - KetekunanВидеоMengidentifikasi tempat untuk melamar pekerjaan desain UXВидео

Opsional - Membuat resume desain UX

Memahami resume desain UX ВидеоRefleksi Diri: Pikirkan tentang informasi yang harus disertakan ke dalam resume AndaЗаданиеElemen-elemen yang khas dalam resume desain UXЧтениеDane - Nasehat saya untuk resume di bidang desain UXВидеоTim - Nasihat seorang perekrut tentang resume desain UXВидеоAktivitas: Membuat draf resume desain UX Задание

Ulasan Minggu ke-6

Kesimpulan: Mendokumentasikan hasil desain dan mencari pekerjaanВидеоDaftar istilahЧтениеTantangan Mingguan 6: Mendokumentasikan hasil desain dan mencari pekerjaanЗадание

Ulasan materi

Selamat, Anda telah menyelesaikan Materi 6: Mendesain Web responsif di Adobe XDВидеоBagikan pengalaman Anda selama mengikuti materiОбсуждениеMemulai materi berikutnyaЧтение
Diskusikan teknik ideasi pilihan AndaОбсуждение
Mengeksplorasi sitemapВидео
Membuat sitemap untuk website AndaВидео
Pelajari selengkapnya tentang membuat sitemapЧтение
Contoh Kegiatan: Membuat variasi wireframe kertasЧтение
Membuat wireframe untuk ukuran layar tambahan di Adobe XDВидео
Opsional - Membuat wireframe untuk ukuran layar tambahan di FigmaЧтение
Kegiatan: Membuat wireframe digital untuk ukuran layar tambahanЗадание
Contoh Kegiatan: Membuat wireframe digital untuk ukuran layar tambahanЧтение
Jay - Mendesain dengan Adobe XDВидео
Mengurangi bias dalam studi kegunaanВидео
Refleksi Mandiri: Tentukan cara untuk mengurangi bias dalam studi AndaЗадание
Kegiatan: Melakukan studi kegunaan untuk purwarupa low-fidelityЗадание
Contoh Kegiatan: Melakukan studi kegunaan untuk purwarupa low-fidelityЧтение
Melakukan analisis dan sintesis pada hasil penelitianВидео
Pelajari lebih lanjut tentang cara menganalisis dan menyintesis hasil penelitianЧтение
Kegiatan: Menganalisis dan menyintesis hasil studi kegunaanЗадание
Contoh Kegiatan: Menganalisis dan menyintesis hasil studi kegunaanЧтение
Bagikan wawasan dari studi kegunaan AndaОбсуждение
Aktivitas: Membuat mockup untuk websiteЗадание
Contoh Kegiatan: Membuat mockup untuk websiteЧтение
Opsional - Aktivitas: Membuat lembar stiker di FigmaЗадание
Opsional - Contoh Aktivitas: Membuat lembar stiker di FigmaЧтение
Menemukan peluang kerja di bidang desain UXЧтение
Aktivitas: Mulai mencari pekerjaan UX menggunakan pelacakЗадание
Contoh Aktivitas: Mulai mencari pekerjaan UX menggunakan pelacakЧтение
Memindai deskripsi pekerjaan untuk mencari kata-kata kunciВидео
Aktivitas: Menyoroti kata-kata kunci dan persyaratan yang dibutuhkan dalam deskripsi pekerjaanЗадание
Contoh Aktivitas: Menyoroti kata-kata kunci dan persyaratan yang dibutuhkan dalam deskripsi pekerjaanЧтение
Contoh Aktivitas: Membuat draf resume desain UXЧтение
Memperbarui resume berdasarkan deskripsi pekerjaanВидео