design a user experience for social good and prepare for jobs week 3 answers

Weekly challenge 3: Mockups and high-fidelity prototypes

1. You are nearing the end of a project. Your client is excited to review what you’ve built and has asked you to present some mockups. What are mockups?

  • Low-fidelity outlines showing the basic structure of the product
  • Static, high-fidelity representations of the the final state of the product
  • Interactive, high-fidelity representations of the product
  • Hand-drawn, low-fidelity images of what the product might look like

2. What elements in a mockup give designers a better idea about the final state of the website or app?

  • Interactions and transition elements
  • Triggers and motion elements
  • Functionality and sound elements
  • Visual and UI elements

3. You are working on a mock design project for your portfolio. Why might you create a mockup for your portfolio in addition to wireframes and sketches?

  • Mockups refine a design’s information architecture.
  • Mockups show analysis of a user’s needs and pain points.
  • Mockups bring designs to life using visual design elements.
  • Mockups incorporate complex interactions and animations.

4. A mockup shows static, high-fidelity designs with visual and UI elements. How is this different from a wireframe?

  • Wireframes are static, high-fidelity designs that closely represent the final product.
  • Wireframes are interactive designs that closely represent the final product.
  • Wireframes are interactive designs that represent an early version of the product.
  • Wireframes are static images that provide an overview of the layout and hierarchy of the product.

5. A designer creates a mockup of a website homepage for a youth services nonprofit. They incorporate elements that add hierarchy to the visual design and content, make text easier to read, and add visual style in line with the brand identity. What visual design element are they using?

  • Layouts
  • Typography
  • Symbology
  • Iconography

6. You are creating a mockup of a food delivery mobile app. While creating the mockup you add in elements, including images and symbols associated with food and speedy delivery. What aspect of visual design are you adding?

  • Symbology
  • Iconography
  • Layouts
  • Typography

7. How can designers employ the typography visual design element to enhance a mockup?

  • Organize text and typefaces to make language legible, readable, and visually appealing
  • Mix, match, and contrast colors and text to communicate a core theme
  • Compile images, shapes, and symbols to create an association with a subject or idea
  • Arrange text and images to organize simple user journeys, and make content easy to find

8. A UX designer is ready to create mockups for a client presentation. Where should they build the mockups?

  • In the same design tool they used to build the wireframes
  • In a new design tool
  • In a different design tool from their earlier design iterations
  • In the draft section of a design tool

9. Fill in the blank: When creating a design system in Adobe XD, you will use a(n) _____.

  • visual system
  • button kit
  • asset panel
  • sticker sheet

10. Fill in the blank: When UX designers and collaborators want a better idea of the final state of a website or app, they can review _____.

  • mockups
  • low-fidelity prototypes
  • digital wireframes
  • case studies

11. What is the difference between wireframes and mockups?

  • Wireframes are static, high-fidelity designs that closely represent the final product. Mockups are static images that provide an overview of the hierarchy of the webpage.
  • Wireframes are interactive designs that closely represent the final product. Mockups are static images without a lot of detail or color.
  • Wireframes are static designs with visual and UI elements. Mockups are static images that provide an overview of the layout and hierarchy of the webpage.
  • Wireframes are static images that provide an overview of the layout and hierarchy of the webpage. Mockups are static, high-fidelity designs with visual and UI elements.

12. A designer creates a mockup of a website homepage for a yoga studio. They incorporate elements including images and symbols associated with health and wellness. What visual design element are they using?

  • Symbology
  • Typography
  • Layouts
  • Iconography

13. How can designers employ layouts to enhance a mockup?

  • Organize text and typefaces to make language legible, readable, and visually appealing
  • Arrange text and images to organize simple user journeys, and make content easy to find
  • Mix, match, and contrast colors and text to communicate a core theme
  • Compile images, shapes, and symbols to create an association with a subject or idea

14. Fill in the blank: When creating high-fidelity digital mockups, you should build them in _____.

  • the practice section of a design tool
  • a new design tool
  • a different design tool from your earlier design iterations
  • the same design tool you used to build your wireframes and low-fidelity prototype

15. Fill in the blank: When creating a design system, you can download a _____ to help get a head start on your designs.

  • color checker
  • style locator
  • UI kit
  • prototype template

16. What should high-fidelity mockups include?

  • Digital and paper-based wireframes
  • Front- and back-end site code
  • Visual and UI elements
  • Interactive components and transitions

17. What do mockups allow designers to do?

  • Incorporate complex interactions and animations
  • Bring designs to life using visual design elements
  • Refine a design’s information architecture
  • Identify a target user’s needs and pain points

18. You are in a meeting with a client. The client is unclear about what makes a mockup different from a wireframe. What can you tell the client?

  • Wireframes are interactive designs that closely represent the final product. Mockups are static images without a lot of detail or color.
  • Wireframes are static, high-fidelity designs that closely represent the final product. Mockups are static images that provide an overview of the hierarchy of the webpage.
  • Wireframes are static images that provide an overview of the layout and hierarchy of the webpage. Mockups are static, high-fidelity designs with visual and UI elements.
  • Wireframes are static designs with visual and UI elements. Mockups are static images that provide an overview of the layout and hierarchy of the webpage.

19. A designer creates a mockup of a website homepage for a local business. They take time to arrange, organize, and place elements like text and images, making sure important elements stand out. What aspect of visual design are they adding to the mockup?

  • Typography
  • Iconography
  • Symbology
  • Layouts

20. You are creating a mockup of a food delivery mobile app. While creating the mockup you arrange the elements thoughtfully and make sure that important features are emphasized. What aspect of visual design are you adding?

  • Typography
  • Iconography
  • Layouts
  • Symbology

21. Fill in the blank: When creating a design system in Figma, you will use a(n) _____.

  • visual system
  • sticker sheet
  • asset panel
  • button kit

22. A team of UX designers is interested in receiving feedback. They are presenting a static, high-fidelity representation of the final state of their product. What is this representation known as?

  • Wireframe
  • Mockup
  • Sketch
  • Prototype

23. A team of UX designers is excited to create mockups of a responsive website they have been working on. What will the mockups do that wireframes do not do?

  • Identify a target user’s needs and pain points
  • Bring designs to life using visual design elements
  • Incorporate complex interactions and animations
  • Refine a design’s information architecture

24. You are creating a mockup of a food delivery mobile app. While creating the mockup you add in text and decide on a few fonts. What aspect of visual design are you adding?

  • Layouts
  • Typography
  • Symbology
  • Iconography

25. How can designers employ the iconography visual design element to enhance a mockup?

  • Arrange text and images to organize simple user journeys, and make content easy to find
  • Compile images, shapes, and symbols to create an association with a subject or idea
  • Mix, match, and contrast colors and text to communicate a core theme
  • Organize text and typefaces to make language legible, readable, and visually appealing

26. A team of designers is starting to create mockups from wireframes. Should they use the same design tool for the mockups that they used for the wireframes?

  • Yes, and it’s best practice to place the wireframes near the mockups for reference.
  • No, because this is an opportunity to move to a more fully-featured design tool
  • Maybe, but it depends on what the team and the client decide for this project

Leave a Reply