Week 5: Create and Test a High-Fidelity Prototype
You will also be extending your designing aspect into design systems, where some components from other design system will also be mixed with your responsive website designs. Once your mockups are completed, it will then be high fidelity by creating its connections, providing an interactivity detail, and adjusting animations with your mockups. To complete the design process, you will conduct a usability study on your high-fidelity prototype to collect feedback from various users. Therefore, at the end of this section of the course, your fully developed layouts for responsive websites will be achieved!
Learning Objectives:
- Familiarize with the objectives and key elements of mockups
- Mock-up the homepage of a website using Adobe XD
Recognize the advantages and characteristics of design systems - Create and save design components using Adobe XD
Develop high-fidelity prototypes in Adobe XD
Involve Accessibility - Annotations and Labels
[Optional] Engaging in 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: However, with mockups, color is sufficiently important for designers to visualize the layout of the design and its aesthetics. Other typical elements also include typography, defining the text style, size, and spacing, and iconography, which encompasses visual symbols applied to an action or piece of content. These elements cohesively create a design to express the intended user experience.
Correct: The first iconography is an essential pubic articulation going to the mockup feature where designers can sketch user flows ‘actions’ and/or ‘things’ within the mockup. Further, this is the prominent common aspect found in a mockup: typography which will prescribe design as well as the hierarchy of text; and color, which usually sets some mood and guides users’ attention. While these additively combine to present a better user experience, they only heighten the aesthetic quality to the design.
Correct: Typography plays an important match in the mockup for the designer to visualize the user’s journey through the tone, readability, and hierarchy of the text. Other aspects that are always found together with typography in a mockup are color, in terms of mood and focus, and iconography, where icons create a visual language that can represent actions and concepts for users. These elements help create an intuitive and very engaging experience for the user.
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: Because high-fidelity mockups are static, designers can create many different visual iterations of a design without making it nonfunctional.
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 very complete realistic designs serving really as the representation of a product in the final form, having 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: It defines styles for core visual design elements, thus allowing them to communicate their brand identity. This includes typography, colors, and iconography. It is in addition to the regular important elements of a design system, like guidelines and UI components.
Correct: A component like buttons, dialogues, and gestures is an interface aspect that keeps all brand or product applications consistent. Guidelines and visual styles may include other components of a design system.
Correct: Instructions lay out which items or modes can be picked to be involved in the product formation to be in line with the design work. Other basic ones shall include the visual styles and UI components that shall make up the design system.
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: The design systems allow designing scalable designs and improving productivity which can save on time and labor costs.
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: Users can construct shapes for their mockup using Polygon, Rectangle, or Ellipse tool and insert an image inside, those tools being available in Adobe XD.
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 all kinds of using the selected object on an artboard, from alignment and font, to color and spacing, and much 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: Like sticker sheets, this asset panel in Adobe XD is a collection of reusable components and preferences to be applied all over 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: So, Annotations are notes or markers located next to interactive UI elements on a page, like call-to-action buttons, to provide further meaning or instructions.
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: For example, headings can demonstrate a hierarchy that guides users in accessing a web page. When selected from the menu of a screen reader, option selection is facilitated even more suitably. Annotating heading sizes for their hierarchy can help engineers implement proper 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: Annotated labels are descriptive language for interactive UI elements on the page. Then designers can annotate the labels of the controls to specify where the similar ones should be grouped. This enhances efficiency and offers clearer context for 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 it comes to testing high-fidelity prototypes, the two major aims are understanding how users actually will use the final product and how to identify where to improve the design.
Correct: Testing a high-fidelity prototype involves two main aims: identifying areas for iteration and improvement in design as well as understanding how the users are going to 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: Different KPIs which include the user error rate measure the progress made towards specific design goals..
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: You connect the screens according to the user journey you wish to showcase after arranging the artboards.
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 communicate the type of interaction that will result in advance of the prototype. The most commonly used trigger, however, is a tap that develops if a user taps on an 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 refers to the specific sequence of navigation that a user follows when using an application or website.