Responsive Web Design in Adobe XD (Coursera)

By the end of this course, you will have a new design project to include in your professional UX portfolio.

In addition, you’ll learn how to search for entry-level UX design jobs, create a resume that highlights your skills and accomplishments, and build your professional portfolio website.

Current UX designers and researchers at Google will serve as your instructors, and you will complete hands-on activities that simulate real-world UX design scenarios. Learners who complete the seven courses in this certificate program should be equipped to apply for entry-level jobs as UX designers.

By the end of this course, you will be able to:

- Apply each step of the UX design process (empathize, define, ideate, prototype, test) to create a responsive website.

- Develop designs in a popular design tool, Adobe XD.

- Plan information architecture and create sitemaps for website designs.

- Apply common layouts for web pages.

- Plan and conduct a usability study to gather feedback about designs.

- Iterate on designs based on research insights.

- Work with design systems in Adobe XD.

- Add a new design project to your professional UX portfolio.

- [Optional] Create or update a UX-focused resume.

- [Optional] Learn how to search for and apply to introductory-level jobs in the field of UX.

This course is suitable for beginner-level UX designers who have completed the previous five courses of the Google UX Design Certificate. Alternatively, learners need to have a strong foundational understanding of the design process; experience creating wireframes, mockups, and prototypes; and the ability to conduct usability studies. No previous experience with Adobe XD is required.

Course 6 of 7 in the Google UX Design Professional Certificate

What You Will Learn

- Apply each step of the UX design process (empathize, define, ideate, prototype, test) to create a responsive website in Adobe XD.

- Plan information architecture and sitemaps for website designs.

- Apply common layouts for web pages.

- Complete a design project and include it in your professional UX portfolio.

Syllabus

WEEK 1

Starting the UX design process: Empathize and define

Get started with the basics of responsive web design. To create a responsive website, you’ll follow the steps of the UX design process: empathize, define, ideate, prototype, and test. In this part of the course, you'll complete the empathize and define phases. In addition, you'll begin to explore Adobe XD, a popular design tool that you'll use throughout this course.

WEEK 2

Continuing the UX design process: Ideate

Your responsive website design project is underway. In this part of the course, you'll move into the ideate phase of the design process. To help you come up with ideas for design solutions, you'll conduct a competitive audit, complete the How Might We activity, and sketch ideas using Crazy Eights. You'll also learn about the importance of information architecture and sitemaps when it comes to designing websites.

WEEK 3

Creating wireframes for a responsive website

After you’ve empathized with users, defined the user problem to solve, and begun to ideate possible solutions, it’s time to bring your ideas to life in wireframes. Your responsive website will have different layouts, depending on the device and screen size you’re designing for, so you'll create lots of different wireframes. First, you'll explore common website layouts, and you'll create paper wireframes. Next, you'll get to know a few elements and components that are commonly used in responsive website design. Then, you'll transition to create digital wireframes in Adobe XD. Finally, you’ll update and refine your wireframes to enhance accessibility.

WEEK 4

Creating and testing low-fidelity prototypes

Now that you’ve created digital wireframes in Adobe XD, it’s time to build, test, and iterate on a low-fidelity prototype. First, you'll learn how to build a low-fidelity prototype in Adobe XD. You’ll get feedback about your prototype by planning and conducting a usability study. Then, you'll make changes to your low-fidelity designs based on insights from your research.

WEEK 5

Creating and testing high-fidelity designs

In this part of the course, you'll be ready to create mockups of your responsive website in Adobe XD. You’ll also extend your work with design systems and use components from external design systems in your responsive website designs. Then, you’ll turn your mockups into a high-fidelity prototype by creating connections, adding interaction details, and adjusting animations. Finally, you’ll test your high-fidelity prototype through a usability study, in order to get feedback from a diverse set of users. By the end of this part of the course, your responsive website designs will be complete!

WEEK 6

Documenting design work and searching for jobs

With your responsive website designs complete, you'll be ready to share your work with others. To start, you’ll learn how to prepare and handoff designs to engineers, who will build the final product. You’ll also add a case study to your professional UX portfolio featuring your responsive website designs. Then, you'll pivot to focus on your big picture goal: getting a job as a UX designer. You'll learn tips and tricks to scan job postings, and you'll create a compelling resume that highlights your new UX skills