Monthly Subscription Starting at AED 99 + VAT

Mendesain Web yang Responsif di Adobe XD

عن

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.

الوحدات

Pengantar Materi 6

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

2 Videos

  • Pengantar Materi 6: Responsive Web Design in Adobe XD (Mendesain Web Responsif di Adobe XD)
  • Dave - Perjalanan saya menuju UX

3 Readings

  • Selamat datang di Materi 6
  • Pengantar proyek portofolio kedua
  • Pilih petunjuk (prompt) proyek portofolio Anda yang kedua

1 Quiz

  • Aktivitas: Kirimkan petunjuk proyek portofolio pilihan Anda

Pengantar Adobe XD

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

2 Discussions

  • Bagikan kegembiraan Anda tentang mempelajari Adobe XD
  • Membandingkan dan membedakan Adobe XD dan Figma

5 Videos

  • Selamat datang di minggu 1
  • Memahami website responsif
  • Pengantar Adobe XD
  • Memulai proyek di Adobe XD
  • Jennifer - Menggunakan tool untuk desain digital

2 Readings

  • Mulai menggunakan Adobe XD
  • Opsional - Mulai menggunakan Figma

2 Quiz

  • Uji pengetahuan Anda tentang desain website responsif
  • Uji pengetahuan Anda tentang dasar-dasar Adobe XD

Rasa empati terhadap pengguna

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

2 Discussions

  • Berdiskusi tentang pentingnya mempertimbangkan kebutuhan pengguna
  • Berbagi pertanyaan wawancara

2 Videos

  • Berempati dengan pengguna untuk memahami kebutuhan dan titik permasalahan mereka
  • Membuat persona

6 Readings

  • Mempelajari lebih lanjut tentang berempati dengan pengguna
  • Lakukan wawancara untuk peta empati
  • Membuat peta empati
  • Contoh Aktivitas: Membuat sebuah peta empati
  • Mempelajari lebih lanjut tentang persona
  • Contoh Aktivitas: Membuat persona

3 Quiz

  • Uji pengetahuan Anda tentang berempati dengan pengguna
  • Aktivitas: Membuat sebuah peta empati
  • Aktivitas: Membuat persona

Mendefinisikan kebutuhan pengguna

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

1 Discussions

  • Buat dan bagikan cerita pengguna tentang diri Anda

2 Videos

  • Membuat cerita pengguna
  • Membuat peta perjalanan pengguna

3 Readings

  • Pelajari lebih lanjut tentang cerita pengguna
  • Pelajari lebih lanjut tentang peta perjalanan pengguna
  • Contoh Aktivitas: Membuat cerita pengguna dan peta perjalanan pengguna

1 Quiz

  • Aktivitas: Membuat cerita pengguna dan peta perjalanan pengguna

Mendefinisikan masalah

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

1 Videos

  • Mengembangkan pernyataan masalah

1 Readings

  • Mempelajari lebih lanjut tentang pernyataan masalah

1 Quiz

  • Uji pengetahuan Anda tentang pernyataan masalah

Ulasan minggu 1

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

1 Peer Review

  • Tantangan mingguan 1: Menyusun pernyataan masalah.

1 Videos

  • Akhir kata: Memulai proses desain UX: Berempati dan mendefinisikan

1 Readings

  • Daftar istilah

Melakukan audit kompetitif

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

2 Videos

  • Selamat datang di Minggu ke-2
  • Melakukan audit kompetitif

3 Readings

  • Mempelajari lebih lanjut tentang audit kompetitif
  • Contoh Aktivitas: Melakukan audit kompetitif untuk website Anda
  • Pelajari selengkapnya tentang menggunakan audit kompetitif untuk ideasi

2 Quiz

  • Aktivitas: Melakukan audit kompetitif untuk website Anda
  • Refleksi Diri: Menggunakan penelitian kompetitif untuk menginformasikan desain

Menghasilkan ide untuk desain

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

1 Discussions

  • Diskusikan teknik ideasi pilihan Anda

2 Videos

  • Memunculkan ide menggunakan “How Might We”
  • Memunculkan ide menggunakan “Crazy Eights”

2 Readings

  • Pelajari lebih lanjut tentang “How Might We” dan “Crazy Eights”
  • Contoh Aktivitas: Memunculkan ide untuk website Anda

2 Quiz

  • Uji pengetahuan Anda tentang teknik ideasi
  • Aktivitas: Memunculkan ide untuk website Anda

Merencanakan information architecture (arsitektur informasi)

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

1 Discussions

  • Diskusikan struktur website yang pernah Anda gunakan

4 Videos

  • Merencanakan information architecture (arsitektur informasi)
  • Mengeksplorasi struktur website yang umum
  • Mengeksplorasi sitemap
  • Membuat sitemap untuk website Anda

2 Readings

  • Pelajari selengkapnya tentang arsitektur informasi
  • Pelajari selengkapnya tentang membuat sitemap

1 Quiz

  • Uji pengetahuan Anda tentang struktur website

Tinjauan Minggu ke-2

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

1 Peer Review

  • Tantangan Mingguan 2: Membuat sitemap untuk website

1 Videos

  • Kesimpulan: Melanjutkan proses desain UX: Ideate (Ideasi)

1 Readings

  • Daftar istilah

Membuat wireframe kertas

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

3 Videos

  • Selamat datang di minggu ke-3
  • Menjelajahi tata letak umum untuk laman beranda situs web
  • Dasar-dasar wireframe

3 Readings

  • Pelajari lebih lanjut tentang tata letak situs web umum
  • Mempelajari lebih lanjut tentang wireframe
  • Contoh Kegiatan: Mulai membuat wireframe kertas untuk situs web Anda

1 Quiz

  • Kegiatan: Mulai membuat wireframe kertas untuk situs web Anda

Merencanakan laman web yang responsif

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

2 Videos

  • Merencanakan tata letak responsif
  • Menyesuaikan tata letak halaman berdasarkan ukuran layar

3 Readings

  • Pelajari lebih lanjut tentang menyusun tata letak responsif
  • Elemen umum yang digunakan dalam desain responsif
  • Contoh Kegiatan: Membuat variasi wireframe kertas

1 Quiz

  • Kegiatan: Membuat variasi wireframe kertas

Membuat wireframe digital di Adobe XD

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

4 Videos

  • Melakukan transisi dari wireframe kertas ke digital
  • Membuat wireframe digital di Adobe XD
  • Membuat wireframe untuk ukuran layar tambahan di Adobe XD
  • Jay - Mendesain dengan Adobe XD

5 Readings

  • Pelajari lebih lanjut tentang membuat wireframe digital di Adobe XD
  • Opsional - Membuat wireframe digital di Figma
  • Contoh Kegiatan: Membuat wireframe digital untuk ukuran layar desktop
  • Opsional - Membuat wireframe untuk ukuran layar tambahan di Figma
  • Contoh Kegiatan: Membuat wireframe digital untuk ukuran layar tambahan

2 Quiz

  • Kegiatan: Membuat wireframe digital untuk ukuran layar desktop
  • Kegiatan: Membuat wireframe digital untuk ukuran layar tambahan

Menyempurnakan wireframe

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

1 Discussions

  • Mempertimbangkan heading, landmark, dan titik fokus dalam wireframe Anda

2 Videos

  • Memperbaiki wireframe untuk meningkatkan aksesibilitas
  • Mengevaluasi wireframe menggunakan Prinsip Gestalt

1 Readings

  • Pelajari lebih lanjut tentang penerapan Prinsip Gestalt dalam wireframe

Ulasan minggu ke-3

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

1 Peer Review

  • Tantangan Mingguan 3: Menyempurnakan wireframe untuk memenuhi standar

1 Videos

  • Penutup: Membuat wireframe untuk situs web responsif

1 Readings

  • Glosarium

Membuat purwarupa low-fidelity di Adobe XD

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

3 Videos

  • Selamat datang di minggu ke-4
  • Memahami purwarupa low-fidelity
  • Membuat purwarupa low-fidelity di Adobe XD

4 Readings

  • Pelajari lebih lanjut tentang pembuatan purwarupa low-fidelity di Adobe XD
  • Opsional - Membuat purwarupa low-fidelity di Figma
  • Contoh Kegiatan: Membuat purwarupa low-fidelity untuk situs web responsif
  • Memeriksa purwarupa low-fidelity

2 Quiz

  • Uji pengetahuan Anda tentang wireframe vs purwarupa
  • Kegiatan: Membuat purwarupa low-fidelity untuk situs web responsif

Merencanakan dan melakukan studi kegunaan untuk purwarupa low-fidelity

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

1 Discussions

  • Bagikan wawasan dari studi kegunaan Anda

4 Videos

  • Merencanakan studi penelitian UX
  • Melakukan studi kegunaan
  • Mengurangi bias dalam studi kegunaan
  • Melakukan analisis dan sintesis pada hasil penelitian

6 Readings

  • Pelajari lebih lanjut tentang cara merencanakan studi penelitian UX
  • Contoh Kegiatan: Merencanakan studi penelitian UX
  • Pelajari lebih lanjut tentang cara melakukan studi kegunaan
  • Contoh Kegiatan: Melakukan studi kegunaan untuk purwarupa low-fidelity
  • Pelajari lebih lanjut tentang cara menganalisis dan menyintesis hasil penelitian
  • Contoh Kegiatan: Menganalisis dan menyintesis hasil studi kegunaan

4 Quiz

  • Kegiatan: Merencanakan studi penelitian UX
  • Refleksi Mandiri: Tentukan cara untuk mengurangi bias dalam studi Anda
  • Kegiatan: Melakukan studi kegunaan untuk purwarupa low-fidelity
  • Kegiatan: Menganalisis dan menyintesis hasil studi kegunaan

Melakukan iterasi pada desain berdasarkan temuan penelitian

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

1 Discussions

  • Ceritakan bagaimana Anda melakukan iterasi pada desain berdasarkan wawasan penelitian

1 Videos

  • Melakukan iterasi pada desain low-fidelity berdasarkan temuan penelitian

1 Readings

  • Mempelajari lebih lanjut tentang cara iterasi pada desain low-fidelity

1 Quiz

  • Uji pengetahuan Anda tentang memodifikasi desain berdasarkan temuan penelitian

Ulasan minggu ke-4

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

1 Peer Review

  • Tantangan Mingguan 4: Memperbarui purwarupa low-fidelity berdasarkan wawasan studi kegunaan

1 Videos

  • Akhir kata: Membuat dan menguji purwarupa low-fidelity

1 Readings

  • Glosarium

Mulai mendesain mockup

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

2 Videos

  • Selamat datang di minggu ke-5
  • Mulai mendesain mockup

3 Readings

  • Pengantar elemen-elemen dasar desain visual
  • Meninjau cara mengatur elemen dalam mockup
  • Meninjau prinsip-prinsip desain visual

1 Quiz

  • Uji pengetahuan Anda tentang dasar-dasar mockup

Buat mockup untuk website desktop

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

2 Videos

  • Mulai membuat mockup untuk beranda website di Adobe XD
  • Melanjutkan membuat mockup untuk beranda website di Adobe XD

4 Readings

  • ​​Opsional - Mulai membuat mockup website di Figma
  • Menambahkan gambar dan logo ke mockup di Adobe XD
  • Menggunakan repeat grid untuk mendesain di Adobe XD
  • Contoh Kegiatan: Membuat mockup untuk website

2 Quiz

  • Uji pengetahuan Anda tentang membuat beranda di Adobe XD
  • Aktivitas: Membuat mockup untuk website

Membuat mockup untuk website seluler

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

1 Videos

  • Membuat mockup untuk website seluler di Adobe XD

3 Readings

  • Pelajari lebih lanjut tentang menu navigasi yang tersembunyi
  • Opsional - Buat mockup untuk website seluler di Figma
  • Contoh Kegiatan: Membuat mockup untuk beranda website seluler

1 Quiz

  • Aktivitas: Membuat mockup untuk beranda website seluler

Bekerja dengan sistem desain

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

1 Discussions

  • Bagikan sistem desain favorit Anda

2 Videos

  • Bekerja dengan sistem desain
  • Menggunakan sistem desain eksternal di Adobe XD

2 Readings

  • Pelajari lebih lanjut tentang sistem desain
  • Opsional - Contoh Aktivitas: Membuat lembar stiker di Figma

3 Quiz

  • Uji pengetahuan Anda tentang bekerja dengan sistem desain
  • Aktivitas: Mendokumentasikan keputusan desain Anda
  • Opsional - Aktivitas: Membuat lembar stiker di Figma

Membuat purwarupa high-fidelity

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

1 Discussions

  • Bagikan referensi tentang desain yang inklusif dan aksesibel

2 Videos

  • Membuat purwarupa high-fidelity di Adobe XD
  • Anotasi purwarupa untuk aksesibilitas web

1 Readings

  • Pelajari lebih lanjut tentang aksesibilitas web

1 Quiz

  • Uji pengetahuan Anda tentang aksesibilitas web

Ulasan minggu ke-5

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

1 Peer Review

  • Ujian Mingguan ke-5: Membuat purwarupa high-fidelity untuk sebuah website

1 Videos

  • Akhir kata: Membuat dan menguji desain high-fidelity

1 Readings

  • Daftar istilah

Opsional - Uji purwarupa high-fidelity yang Anda buat

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

1 Videos

  • Opsional - Uji purwarupa high-fidelity yang Anda buat

1 Readings

  • Opsional - Tinjau cara merencanakan dan melakukan studi kegunaan

1 Quiz

  • Uji pengetahuan Anda tentang studi kegunaan

Menyerahkan desain

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

3 Videos

  • Selamat datang di Minggu ke-6
  • Berkolaborasi dengan tim teknik
  • Menyerahkan spesifikasi desain di Adobe XD

1 Readings

  • Berkolaborasi secara jarak jauh dengan Adobe XD

1 Quiz

  • Uji pengetahuan Anda tentang penyerahan desain

Menambahkan proyek ke portofolio Anda

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

1 Peer Review

  • Menambahkan studi kasus baru ke portofolio Anda

1 Discussions

  • Membagikan studi kasus tentang desain website yang ada di portofolio

1 Videos

  • Menambahkan proyek ke portofolio Anda your portfolio

1 Readings

  • Mempelajari lebih lanjut tentang studi kasus portofolio

1 Quiz

  • Uji pengetahuan Anda tentang studi kasus dalam portofolio

Opsional - Mencari pekerjaan UX

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

5 Videos

  • Memahami pekerjaan yang dilakukan para desainer UX pada umumnya
  • Mengeksplorasi jenis perusahaan tempat desainer UX bekerja
  • Kenny - Ketekunan
  • Mengidentifikasi tempat untuk melamar pekerjaan desain UX
  • Memindai deskripsi pekerjaan untuk mencari kata-kata kunci

4 Readings

  • Mempelajari lebih lanjut tentang pekerjaan di bidang pengalaman pengguna
  • Menemukan peluang kerja di bidang desain UX
  • Contoh Aktivitas: Mulai mencari pekerjaan UX menggunakan pelacak
  • Contoh Aktivitas: Menyoroti kata-kata kunci dan persyaratan yang dibutuhkan dalam deskripsi pekerjaan

3 Quiz

  • Refleksi Diri: Sampaikan tujuan dan minat profesional Anda
  • Aktivitas: Mulai mencari pekerjaan UX menggunakan pelacak
  • Aktivitas: Menyoroti kata-kata kunci dan persyaratan yang dibutuhkan dalam deskripsi pekerjaan

Opsional - Membuat resume desain UX

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

4 Videos

  • Memahami resume desain UX
  • Dane - Nasehat saya untuk resume di bidang desain UX
  • Tim - Nasihat seorang perekrut tentang resume desain UX
  • Memperbarui resume berdasarkan deskripsi pekerjaan

2 Readings

  • Elemen-elemen yang khas dalam resume desain UX
  • Contoh Aktivitas: Membuat draf resume desain UX

2 Quiz

  • Refleksi Diri: Pikirkan tentang informasi yang harus disertakan ke dalam resume Anda
  • Aktivitas: Membuat draf resume desain UX

Ulasan Minggu ke-6

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

1 Videos

  • Kesimpulan: Mendokumentasikan hasil desain dan mencari pekerjaan

1 Readings

  • Daftar istilah

1 Quiz

  • Tantangan Mingguan 6: Mendokumentasikan hasil desain dan mencari pekerjaan

Ulasan 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 6: Mendesain Web responsif di Adobe XD

1 Readings

  • Memulai materi berikutnya

Auto Summary

Unlock your potential in UX design with "Mendesain Web yang Responsif di Adobe XD." This foundational course, led by Google's UX experts, guides you through creating responsive websites using Adobe XD. Ideal for beginners, it covers the entire UX design process, from user empathy to prototyping and testing. Gain practical skills, build a professional portfolio, and learn job-seeking strategies. With a 2400-minute duration, this course is available through Coursera's Starter and Professional subscriptions. Perfect for aspiring UX designers ready to advance their careers.