Membuat Antarmuka Pengguna (UI) Dinamis untuk Situs from Coursera

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.

What's inside

Syllabus

Memulai proses desain UX: Berempati dan mendefinisikan

Mulailah dengan dasar-dasar desain web responsif. Untuk membuat website yang responsif, Anda akan mengikuti setiap langkah proses desain UX: berempati, mendefinisikan, memunculkan ide, membuat purwarupa, melakukan uji coba. Di bagian materi ini, Anda akan menyelesaikan fase berempati dan mendefinisikan. Selain itu, Anda akan mulai mengeksplorasi Adobe XD, tool desain populer yang akan Anda gunakan di sepanjang materi ini.

Melanjutkan proses desain UX: Ideate (Ideasi)

Proyek desain website responsif Anda sedang berlangsung. Di bagian materi ini, Anda akan memulai fase ideasi sebagai bagian dari proses desain. Untuk memunculkan ide-ide solusi desain, Anda akan melakukan audit kompetitif, menyelesaikan aktivitas “How Might We”, dan membuat sketsa ide menggunakan “Crazy Eights”. Anda juga akan belajar tentang pentingnya arsitektur informasi dan peta situs (sitemap) saat mendesain website.

Membuat wireframe untuk situs web responsif

Setelah Anda berempati dengan pengguna, menetapkan masalah pengguna yang harus dipecahkan, dan mulai mencari solusi yang memungkinkan, sekarang saatnya untuk merealisasikan ide-ide Anda dalam wireframe. Situs web responsif Anda akan memiliki tata letak yang berbeda-beda, tergantung pada perangkat dan ukuran layar yang menjadi target rancangan Anda, jadi Anda akan membuat banyak wireframe yang berbeda. Pertama, Anda akan mengeksplorasi tata letak situs web secara umum, kemudian Anda akan membuat wireframe kertas. Selanjutnya, Anda akan mengenal beberapa elemen dan komponen yang biasa digunakan dalam desain situs web responsif. Kemudian, Anda akan bertransisi untuk membuat wireframe digital di Adobe XD. Terakhir, Anda akan memperbarui dan menyempurnakan wireframe untuk meningkatkan aksesibilitas.

Membuat dan menguji purwarupa low-fidelity

Setelah Anda membuat wireframe digital di Adobe XD, sekarang saatnya untuk membangun, menguji, dan melakukan iterasi pada purwarupa low-fidelity. Pertama, Anda akan belajar cara membuat purwarupa low-fidelity di Adobe XD. Anda akan mendapatkan masukan tentang purwarupa tersebut dengan merencanakan dan melakukan studi usability (kegunaan). Kemudian, Anda akan memodifikasi desain low-fidelity berdasarkan wawasan dari penelitian tersebut.

Membuat dan menguji desain high-fidelity

Di bagian materi ini, Anda akan bersiap untuk membuat mockup website responsif di Adobe XD. Anda juga akan mengembangkan karya Anda dengan sistem desain dan menggunakan komponen dari sistem desain eksternal dalam desain website responsif. Kemudian, Anda akan mengubah mockup Anda menjadi purwarupa high-fidelity dengan membuat koneksi, menambahkan detail interaksi, dan menyesuaikan animasi. Pada langkah terakhir, Anda akan menguji purwarupa high-fidelity melalui studi kegunaan untuk mendapatkan umpan balik dari beragam pengguna. Pada akhir bagian materi ini, desain website responsif Anda akan selesai!

Mendokumentasikan hasil desain dan mencari pekerjaan

Setelah menyelesaikan desain website responsif, Anda akan siap untuk membagikan hasil pekerjaan Anda dengan orang lain. Untuk memulainya, Anda akan belajar cara menyiapkan dan menyerahkan desain kepada para insinyur, yang akan membangun produk akhir. Anda juga akan menambahkan suatu studi kasus yang menampilkan desain website responsif ke portofolio UX profesional Anda. Kemudian, Anda akan beralih fokus pada tujuan yang lebih besar: mendapatkan pekerjaan sebagai desainer UX. Anda akan mempelajari kiat dan trik membaca lowongan pekerjaan, serta membuat resume menarik yang menonjolkan keterampilan baru Anda di bidang UX.

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Membangun keterampilan penting untuk peran desainer UX tingkat pemula

Diajarkan oleh desainer dan peneliti UX dari Google, yang merupakan pakar di bidangnya

Membahas proses desain UX yang komprehensif, mulai dari empati hingga pengujian

Memberikan kesempatan langsung untuk menerapkan konsep desain UX pada proyek nyata

Mencakup perencanaan arsitektur informasi dan pembuatan peta situs untuk desain situs web, yang merupakan keterampilan penting untuk desainer UX

Membantu pelajar mengembangkan portofolio UX profesional mereka dengan menambahkan proyek desain baru

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Membuat Antarmuka Pengguna (UI) Dinamis untuk Situs with these activities:

Pelajari cara membuat sistem desain di Adobe XD

Show steps

Membuat sistem desain adalah bagian penting dari mendesain situs web yang responsif. Tutorial ini akan memandu Anda dalam membuat sistem desain di Adobe XD.

Browse courses on Adobe XD

Show steps

Temukan tutorial tentang membuat sistem desain di Adobe XD.
Ikuti langkah-langkah dalam tutorial untuk membuat sistem desain Anda sendiri.

Show all one activities

Career center

Learners who complete Membuat Antarmuka Pengguna (UI) Dinamis untuk Situs will develop knowledge and skills that may be useful to these careers:

User Experience (UX) Designer

As a UX Designer, you will be responsible for the user experience of products, from websites and apps to physical products. This course will help you build a foundation in the UX design process, from user research and prototyping to user testing and iteration. You will learn how to create user-centered designs that are both effective and engaging.

See salaries and explore the career path for User Experience (UX) Designer

Interaction Designer

As an Interaction Designer, you will be responsible for the design of how users interact with products and services. This course will help you build a foundation in interaction design, including user research, prototyping, and user testing. You will also learn how to use Adobe XD to create prototypes and mockups of your designs.

See salaries and explore the career path for Interaction Designer

Front-End Web Developer

As a Front-End Web Developer, you will be responsible for the design and implementation of the user interface of websites and web applications. This course will help you build a foundation in front-end web development, including HTML, CSS, and JavaScript. You will also learn how to use Adobe XD to create prototypes and mockups of your designs.

See salaries and explore the career path for Front-End Web Developer

Product Designer

As a Product Designer, you will be responsible for the overall design and development of products, from concept to launch. This course will help you build a foundation in product design, including user research, prototyping, and user testing. You will also learn how to use Adobe XD to create prototypes and mockups of your designs.

See salaries and explore the career path for Product Designer

UX Researcher

As a UX Researcher, you will be responsible for conducting user research to inform the design of products and services. This course will help you build a foundation in UX research, including user interviews, surveys, and usability testing. You will also learn how to use Adobe XD to create prototypes and mockups of your designs.

See salaries and explore the career path for UX Researcher

Graphic designer

As a Graphic Designer, you will be responsible for the visual design of products, from websites and apps to print materials and packaging. This course will help you build a foundation in graphic design, including typography, color theory, and layout. You will also learn how to use Adobe XD to create prototypes and mockups of your designs.

See salaries and explore the career path for Graphic designer

Visual Designer

As a Visual Designer, you will be responsible for the visual design of products, from websites and apps to print materials and packaging. This course will help you build a foundation in visual design, including typography, color theory, and layout. You will also learn how to use Adobe XD to create prototypes and mockups of your designs.

See salaries and explore the career path for Visual Designer

UI Engineer

As a UI Engineer, you will be responsible for the implementation of the user interface of websites and web applications. This course will help you build a foundation in UI engineering, including HTML, CSS, and JavaScript. You will also learn how to use Adobe XD to create prototypes and mockups of your designs.

See salaries and explore the career path for UI Engineer

UX Director

As a UX Director, you will be responsible for the overall direction and management of the user experience of products, from websites and apps to physical products. This course will help you build a foundation in UX leadership, including user research, prototyping, and user testing. You will also learn how to use Adobe XD to create prototypes and mockups of your designs.

See salaries and explore the career path for UX Director

Product Manager

As a Product Manager, you will be responsible for the overall development and management of products, from concept to launch. This course will help you build a foundation in product management, including user research, prototyping, and user testing. You will also learn how to use Adobe XD to create prototypes and mockups of your designs.

See salaries and explore the career path for Product Manager

Information Architect

As an Information Architect, you will be responsible for the organization and structure of information on websites and other digital media. This course will help you build a foundation in information architecture, including user research, content strategy, and site navigation. You will also learn how to use Adobe XD to create prototypes and mockups of your designs.

See salaries and explore the career path for Information Architect

UX Writer

As a UX Writer, you will be responsible for the writing and editing of user interface text for websites, apps, and other digital media. This course will help you build a foundation in UX writing, including user research, content strategy, and tone of voice. You will also learn how to use Adobe XD to create prototypes and mockups of your designs.

See salaries and explore the career path for UX Writer

Content Strategist

As a Content Strategist, you will be responsible for the planning, creation, and management of content for websites, apps, and other digital media. This course will help you build a foundation in content strategy, including user research, content development, and content marketing. You will also learn how to use Adobe XD to create prototypes and mockups of your designs.

See salaries and explore the career path for Content Strategist

Motion Graphic Designer

As a Motion Graphic Designer, you will be responsible for the design and creation of animated graphics for websites, apps, and other digital media. This course will help you build a foundation in motion graphic design, including animation principles, software, and storytelling. You will also learn how to use Adobe XD to create prototypes and mockups of your designs.

See salaries and explore the career path for Motion Graphic Designer

UX Engineer

As a UX Engineer, you will be responsible for the implementation of the user experience of products, from websites and apps to physical products. This course will help you build a foundation in UX engineering, including user research, prototyping, and user testing. You will also learn how to use Adobe XD to create prototypes and mockups of your designs.

See salaries and explore the career path for UX Engineer