Responsive Web Design in Adobe XD

Por: Coursera . en: , ,

  • 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.
  • 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.
  • 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.
  • 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.
  • 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!
  • 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.

Plataforma