Week 3 – Creating mockups and high-fidelity prototypes

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

Shuffle Q/A 1

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.

Devendra Kumar

Project Management Apprentice at Google

Leave a Reply