PRACTICE QUIZ
What are common elements in a mockup? Select all that apply. Explanation : 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.
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. Explanation: 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.
Which of the following is an advantage of a high-fidelity mockup?
Since high-fidelity mockups are not interactive, designers can make multiple iterations of a design visually without affecting its functionality.
What design characteristics make a mockup different from a wireframe?
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
Which of the following is a basic component of a design system? Select all that apply.
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. Explanation: 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. Explanation: 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.
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, which can save designers time and money. TEST YOUR KNOWLEDGE ON CREATING A HOMEPAGE IN ADOBE XD
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.
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.
When creating a mockup in Adobe XD, where can you find the alignment tool?
The property inspector provides a number of options for the object you select on an artboard, including alignment, font, color, spacing, and more.
What is the assets panel in Adobe XD?
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
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?
Annotations are markers placed next to interactive UI elements on the page, like the call-to-action buttons.
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?
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.
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 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
What are the main goals when conducting usability studies for high-fidelity prototypes? Select all that apply.
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. Explanation: 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.
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?
KPIs, such as user error rate, measure the progress toward the goal established for the design.
What step comes after you lay out your mockups in Adobe XD?
Once the artboards are in order, you connect the screens according to the user journey you want to be the focus.
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 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.
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 is the navigational flow for a user on an app or website.
Ready to test your recall?
What are common elements in a mockup? Select all that apply. Explanation : 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.
How confident are you in this answer?