This content is protected, please login and enroll in the course to view this content!
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.
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!