Course 6 – Responsive Web Design in Adobe XD

Week 5: Create and Test a High-Fidelity Prototype

GOOGLE UX DESIGN PROFESSIONAL CERTIFICATE

Coursera Study Guide

Enroll in Coursera Google UX Design Certificate Here

TABLE OF CONTENT

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!

Learning Objectives

  • Review the purpose and common elements of mockups
  • Create mockups of a website homepage in Adobe XD
  • Identify benefits and features of design systems
  • Create and save design components in Adobe XD
  • Develop high-fidelity prototypes in Adobe XD
  • Use accessibility annotations and labels
  • [Optional] Conduct a usability study for a high-fidelity prototype of a website

TEST YOUR KNOWLEDGE ON THE BASICS OF MOCKUPS

1. What are common elements in a mockup? Select all that apply.

  • Outline
  • Color (CORRECT)
  • Iconography (CORRECT)
  • Typography (CORRECT)

Correct: Color is a common element in a mockup that helps designers better understand the design’s layout. Other common elements included in a mockup are typography and iconography.

Correct: Iconography is a common element in a mockup that helps designers map out the user flow. Other common elements included in a mockup are typography and color.

Correct: Typography is a common element in a mockup that helps designers visualize the user’s journey. Other common elements included in a mockup are color and iconography.

2. Which of the following is an advantage of a high-fidelity mockup?

  • High-fidelity mockups allow designers to make multiple iterations without affecting the design’s functionality. (CORRECT)
  • High-fidelity mockups can offer designers a basic outline of a product or screen.
  • High-fidelity mockups help designers test the product’s functionality.
  • High-fidelity mockups help designers map out a product during the early stages of design development.

Correct: Since high-fidelity mockups are not interactive, designers can make multiple iterations of a design visually without affecting its functionality.

3. What design characteristics make a mockup different from a wireframe?

  • A mockup includes minimal details and color.
  • A mockup is an outline or sketch of a product.
  • A mockup is a static, high-fidelity design that closely matches the final product. (CORRECT)
  • A mockup is clickable or highly interactive.

Correct: Mockups are high-fidelity designs that are used as representations of a final product. They also feature more visual and UI elements than wireframes.

TEST YOUR KNOWLEDGE ON WORKING WITH DESIGN SYSTEMS

1. Which of the following is a basic component of a design system? Select all that apply.

  • Editorial styles
  • Visual styles (CORRECT)
  • UI components (CORRECT)
  • Guidelines (CORRECT)

Correct: Defining the styles for core visual design elements helps companies express their brand more consistently. This may include elements, like typography, color palettes, and iconography. Other basic components of a design system include guidelines and UI components.

Correct: Components such as buttons, dialogues, and gestures are interface elements. These features are consistent across a brand or product. Other basic components of a design system include guidelines and visual styles.

Correct: Guidelines specify certain components or styles should be used within a product. These help designers stay consistent across all of their work. Other basic components of a design system include visual styles and UI components.

2. A design team is creating mockups for a website, and wants these mockups to incorporate solutions for multiple pages. A teammate proposes the creation of a design system to ensure consistency. Which of the following is another benefit of a design system?

  • Design systems help designers create scalable designs and increase efficiency. (CORRECT)
  • Design systems house single-use elements.
  • Design systems allow designers to develop standards as they move through the process.
  • Design systems help separate the product from the brand identity.

Correct: Design systems help designers create scalable designs and increase efficiency, which can save designers time and money.

TEST YOUR KNOWLEDGE ON CREATING A HOMEPAGE IN ADOBE XD

1. Fill in the blank: When creating a mockup in Adobe XD, you can add images easily by creating a ___ first, then dropping the image inside of it.

  • line
  • text box
  • shape (CORRECT)
  • drawing

Correct: When creating a mockup in Adobe XD, you can create shapes using the polygon, rectangle, and eclipse tools, and then add images inside of the shapes.

2. When creating a mockup in Adobe XD, where can you find the alignment tool?

  • Assets panel
  • Components tab
  • Property inspector (CORRECT)
  • Artboard

Correct: The property inspector provides a number of options for the object you select on an artboard, including alignment, font, color, spacing, and more.

3. What is the assets panel in Adobe XD?

  • A collection of the elements and preferences created in a design. (CORRECT)
  • A feature used to move or resize an element from a stack, and automatically move the rest of the elements, to preserve the defined spacing between elements.
  • A static high-fidelity design used as a representation of a final product.
  • An order of typefaces and fonts used to create divisions to aid users in where to focus and find information.

Correct: Similar to a sticker sheet, the assets panel in Adobe XD is a collection of elements and preferences that can be reused throughout the design.

TEST YOUR KNOWLEDGE ON WEB ACCESSIBILITY

1. Imagine a designer is creating a responsive high-fidelity webpage that should be accessible to people with disabilities. They place markers next to interactive UI elements on the page. What method is the designer using?

  • Labels
  • Annotations (CORRECT)
  • Hierarchical headings
  • Traversal order

Correct: Annotations are markers placed next to interactive UI elements on the page, like the call-to-action buttons.

2. Imagine a designer is creating a responsive high-fidelity webpage that should be accessible to people with disabilities. They apply a method to scale the size of the text based on its importance on the page. What method is the designer using?

  • Labels
  • Hierarchical headings (CORRECT)
  • Annotations
  • Traversal order

Correct: Headings are a great example of how hierarchy can help users navigate a webpage by selecting from the screen reader menu options more easily. Different sized headings can be annotated to indicate the hierarchy. Then, these can support the engineer’s implementation of headings in HTML.

3. Imagine a designer is creating a responsive high-fidelity webpage that should be accessible to people with disabilities. They apply a method to add descriptive language to the interactive UI elements on the site. What method is the designer using?

  • Labels (CORRECT)
  • Annotations
  • Hierarchical headings
  • Traversal order

Correct: Labels add descriptive language to the interactive UI elements on the page. When annotating labels for interactive elements, designers note where similar controls should be grouped to provide more efficiency and context to the screen reader.

TEST YOUR KNOWLEDGE ON USABILITY STUDIES

1. What are the main goals when conducting usability studies for high-fidelity prototypes? Select all that apply.

  • Define the design problem
  • Determine the design solution
  • Understand how users will interact with the final product (CORRECT)
  • Identify areas to iterate on the prototype and improve the design (CORRECT)

Correct: When testing a high-fidelity prototype, there are two main goals. One goal is to understand how users will interact with the final product. The other goal is to figure out ways to improve the design.

Correct: When testing a high-fidelity prototype, there are two main goals. One goal is identifying areas to iterate and improve the design. The other goal is to understand how users will interact with the final product.

2. A designer wants to test a high-fidelity design and conduct a usability study. Which of the following is an example metric that can be used to measure the design’s success?

  • Start time
  • Color saturation
  • User error rate (CORRECT)

Correct: KPIs, such as user error rate, measure the progress toward the goal established for the design.

3. What step comes after you lay out your mockups in Adobe XD?

  • Connect the screens (CORRECT)
  • Adjust the animation
  • Add interaction details
  • Switch to Prototype mode

Correct: Once the artboards are in order, you connect the screens according to the user journey you want to be the focus.

4. In Adobe XD, you can decide the type of interaction you want for the transition between two elements. What is the term for these interactions?

  • Triggers (CORRECT)
  • Actions
  • Components
  • Buttons

Correct: Triggers define what type of interaction will cause the prototype to advance. The most common action is tap, or when a user taps on the first element.

5. Fill in the blank: Annotations are markers placed on a page to set the _____, or navigation flow, for users on an app or site.

  • traversal order (CORRECT)
  • accessibility standards
  • hierarchical headings
  • labels

Correct: Traversal order is the navigational flow for a user on an app or website.

Previous Week 4
Next Week 6

Subscribe to our site

Get new content delivered directly to your inbox.

Quiztudy Top Courses

Popular in Coursera

Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!

Subscribe