Skip to content

Module 2 Challenge(Build Dynamic User Interfaces (UI) for Websites)Answers 2025

Question 1

You advise your client that you are ready to move on from your wireframe and begin a low-fidelity prototype. How might you explain the difference between the two?

  • ❌ Wireframes incorporate functionality and navigation, while low-fidelity prototypes are simply the blueprint of the product’s structure.

  • ❌ There is no difference.

  • ✅ Wireframes are blueprints of the product’s structure. A low-fidelity prototype ties the wireframes together and incorporates functionality and navigation.

  • ❌ Wireframes include full content and branding. A low-fidelity prototype is the final, finished product.

🔹 Explanation:
A wireframe shows structure and layout, while a low-fidelity prototype connects those wireframes to demonstrate basic interactivity and navigation.

Question 2

You have received a lot of feedback from a client on your app mockups. What might you do next?

  • ❌ Tell the client the mockups are close to final.

  • ✅ Go through another iteration phase, and then ask for additional feedback.

  • ❌ Ask the client to prioritize their feedback.

  • ❌ Start over with sketches.

🔹 Explanation:
UX design is iterative — you should refine your mockups based on feedback, update the design, and seek further input for continuous improvement.

Question 3

When thinking about your mockups, what should you consider when you are thinking about the colors for the design?

  • ✅ The ratio of primary to neutral colors

  • ✅ How the colors contrast with each other

  • ✅ How users will interpret the colors

  • ✅ The emotions the colors convey

🔹 Explanation:
Color affects usability, accessibility, and emotion. Consider contrast, balance, and meaning for inclusive and visually appealing designs.

Question 4

You are working on your design system for your mockups. Which elements should you include?

  • ✅ UI components

  • ❌ Curriculum architecture

  • ✅ Visual styles

  • ❌ Core content

🔹 Explanation:
A design system includes reusable UI components (buttons, menus, inputs) and consistent visual styles (colors, typography, spacing).

Question 5

What are ways to make your designs more accessible according to WCAG standards?

  • ❌ Use annotations.

  • ✅ Add labels.

  • ✅ Adopt a hierarchy.

  • ❌ Use primary colors.

🔹 Explanation:
Adding labels helps screen readers, and visual hierarchy ensures clear, logical flow for all users — both core WCAG principles.

Question 6

Your colleague notes that you should have a better luminosity contrast ratio. What does that mean?

  • ❌ The text and background colors should use only primary colors.

  • ❌ The text should be transparent.

  • ❌ The text and background colors should be the same.

  • ✅ The text color should be light, and the background color should be dark.

🔹 Explanation:
Luminosity contrast ensures readability — for example, dark text on a light background (or vice versa) for strong visual distinction.

Question 7

You are finalizing navigational elements for your high-fidelity prototype. Which elements should you check?

  • ✅ Back arrows

  • ✅ Buttons on each screen

  • ✅ External links

  • ❌ Help guide

🔹 Explanation:
Navigation testing ensures users can move freely through the app using working buttons, back arrows, and links.

Question 8

An accessibility consultant advised you to add annotations. What does this mean?

  • ❌ Alt text associated with graphics

  • ✅ Notes associated with every element on the screen

  • ❌ Markers placed next to interactive buttons

  • ❌ A help guide in the navigation bar

🔹 Explanation:
Annotations describe design intent and function for developers and testers — explaining how elements behave or interact.

Question 9

You are ready to make connections in your high-fidelity prototype in Figma. What does this mean?

  • ❌ It’s how designers share their work.

  • ✅ It’s how designers make an element interactive in Figma.

  • ❌ It’s how the user is attracted to the site.

  • ❌ It’s how users access the help icon.

🔹 Explanation:
In Figma, “connections” link screens or elements so the prototype can simulate real navigation and interactivity.

Question 10

You are creating the design plan for the app you are designing. Which elements should be included in the guidelines portion of the design system?

  • ✅ Editorial guidelines

  • ✅ Design principles

  • ✅ Implementation guidelines

  • ✅ Color palette and typography standards

🔹 Explanation:
Design system guidelines outline the rules, principles, and visual identity — ensuring brand consistency and accessibility across designs.

🧩 Summary

Concept Key Learning
Wireframe vs Prototype Wireframes = structure; low-fi prototypes = clickable, interactive versions.
Iteration Always refine mockups based on feedback — UX is a continuous loop.
Color Strategy Consider meaning, emotion, and contrast for usability and accessibility.
Design System Combines visual styles, UI components, and clear guidelines.
WCAG Accessibility Focus on clear labels, hierarchy, and high contrast.
Annotations Notes that clarify design functionality for developers.
Figma Connections Create navigation and interactivity between frames.
Guidelines Maintain visual, editorial, and implementation consistency.

✅ Final Takeaway: